乐趣区

关于前端:走进地理信息可视化

jiezi 
     导读：本文先将介绍地理信息可视化的定义及意义，其次将探讨怎么设计实现一个地理信息可视化零碎。全文浏览约【8min】

本文作者：Kakashi

一、前言

1.1 定义

地理信息可视化是在天文数据库驱动下, 以地图模式表白地理信息的过程。（后续文章也会从 生成数据 和 展示数据 两局部动手介绍）
次要是以地理信息迷信、计算机科学、地图学、认知科学、信息传输迷信与地理信息系统为根底，并通过计算机技术、数字技术、多媒体技术动静、直观、形象地体现、解释、传输天文信空间信息并揭示其法则，是对于信息表白和传输的实践、办法和技术的一门学科。旨在借助于图形学、计算机图形学和图像处理技术，将地学信息输出、解决、查问、剖析以及预测的后果和数据以图形符号、图标、文字、表格、视频等可视化模式显示并进行交互。

1.2 意义

举两个例子

🌰:2016 年《纽约时报》美国总统大选各州投票后果

十分直观地显示各个州选举的反对后果。

能够看到蓝州民主党（希拉里）次要散布西海岸和东北部。这些地区两级分化重大，精英阶层和上层人士，别离是精英特权和政府福利的受益者。
红州共和党（特朗普）次要散布在中部地区。这些地区传统农业 / 行业为主，思维绝对激进，奉行本人致力，白手起家，拥护大政府主义。

🌰:2017 年百度地图春节前迁出流向

从这份迁出图能够看出，较为发达的东部地区，大面积务工人员回家过年，短暂的‘逃离北上广深’，不久后大家节后又会相聚于此，为了幻想和生存致力着。
论断：从下面能够看出，地理信息数据的可视化将本来 爽朗繁冗的数据以艰深易通的模式出现给咱们 ，让咱们可能从多个维度（工夫、散布区域、迁徙方向）来开掘这份数据的价值，理解数据之美，它比文字和语言 更直观，更具备说服力。

二、生成天文数据

首先，数据大抵可分为两种。底图数据 和自定义可视化图层数据 。
底图通常只用做地理信息的表白，例如 MapBox、Google 地图等。
个别流程是在地理信息底图的根底上，退出不同的自定义可视化图层，比方柱状图，热力求，飞线呼吸点，或者一些 mark 标记等。
关系大抵如下：

ps：这两种数据不是每个场景下都必须的。很多状况下咱们只是做些简略的天文可视化，不须要加载地图底图。

2.1 GeoJSON（底图）

2.1.1 简介

GeoJSON 是一种对各种天文数据结构进行编码的格局，是一个树状的 json 对象 。
每一条数据，都叫做一个特色（Feature），数据次要有六种类型：

  • 点：Point、MultiPoint
  • 线：LineString、MultiLineString

  • 面：Polygon、MultiPolygon
    举个例子：

    {
"type": "FeatureCollection",
"features": [
  {
    "type": "Feature",
    "properties": {"name": "xxx 省"},
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [
            110.478515625,
            32.76880048488168
          ],
          [
            117.68554687499999,
            32.76880048488168
          ],
          [
            117.68554687499999,
            37.64903402157866
          ],
          [
            110.478515625,
            37.64903402157866
          ],
          [
            110.478515625,
            32.76880048488168
          ]
        ]
      ]
    }
  }
]
}
    2.1.2 阐明

    大家可能在网上看到过很多种后缀名不同的 geojson 文件，还有各种地图的坐标系，那它们的区别是什么呢？

  • 数据蕴含根底信息和 GEO 数据

    • 标记为*.info.json 为 根底信息（国家名称、编码、首都信息等）
    • 标记为 *.geo.json 为 结构化GEO 数据
    • 标记为 *.all.json 为 基于geo.json 数据格式，整合 info.json 数据的结构化数据体
    • 标记为*.dist.json 为 罕用可间接应用的结构化数据，根本满足构建地图及其他须要

  • 对于坐标系的阐明

    • WGS84：为一种大地坐标系，也是目前宽泛应用的 GPS 全球卫星定位系统应用的坐标系。
    • GCJ02：又称火星坐标系，是由中国国家测绘局制订的地理坐标零碎，是由 WGS84 加密后失去的坐标系。
    • BD09：为百度坐标系，在 GCJ02 坐标系根底上再次加密。其中 bd09ll 示意百度经纬度坐标，bd09mc 示意百度墨卡托米制坐标。
    2.1.3 重点，重点，重点

    依据《中华人民共和国测绘法》** 第十条、第十一条、第三十八条、第五十二条、第六十二条 之规定

    • 在中华人民共和国境内必须应用基于 GCJ02 的坐标系；而 BD09 坐标系为基于 GCJ02 加密的坐标系，亦能够间接应用
      所以在中华人民共和国境内应用地图相干服务，请务必遵循国家法律法规，不要从小网站找一份，或者本人 DIY 一份，举荐应用 自然资源部地图技术审查核心 提供的 规范地图服务：http://bzdt.ch.mnr.gov.cn/

2.2 自定义数据（可视化图层）

底图的数据格式是较为对立的，然而咱们如果在地图上 加了很多自定义数据（比方 Mark 标记），此时 想导出地图，给他人导入应用，Mark 的数据格式改如何设计呢？
这个没有对立的说法，惯例的文件类型都行，喜爱 txt 都没问题。

  • GeoJSON 反对点、线、面等所有的规范空间数据格式。
  • CSV 反对点、线段、弧线等数据类型。
  • JSON 反对简略的点、线，面数据类型，不反对多点，多线的，多面数据格式。
    然而还是举荐自定义数据 持续应用 GeoJson 的格局，因为这样的树形构造和 schema 格局，都较为公认、对立。

    其次 数据通常是 瓦片金字塔模型，是一种多分辨率层次模型，从瓦片金字塔的底层到顶层，分辨率越来越低，但示意的天文范畴不变。简略来说就是平时咱们看地图 放大后 看到的更具体，这么做能够失去更好的性能和观看体验。

三、展示地图数据

数据驱动视图，失去了地图天文数据，怎么样正当的展示呢？

3.1 Context 底图层

底图是通知用户在哪里，看到的什么，大抵有一个整体的认知。

比方绘制中国地图，底图能够用一个世界地图简化图，为了让用户相熟的物理环境，帮忙用户更好的确定地位。或者用一个三维地球来形容，根底底图位于地图最底层。

3.2 Data 自定义数据层

通过与 antv L7、MapV、Loca JS 剖析比照，将自定义数据层大抵分为了 5 类：

3.2.1 点类型数据图层

怎么了解点类型数据图层，要害是点类型，比方一个某地搁置一个柱状图也是属于点类型数据图层。因为在设计点或标记时，点代表的是: 准确性和映射 ，简略来说就是单个 xyz 坐标确定地位的数据。
咱们的 省份名字，图形 mark 标注，呼吸点，散点图，柱状图等 都属于点类型数据图层

3.2.2 线类型数据图层

线其实比拟好了解，线就是形容终点和起点之前的某种关系。
数据和展示了解都是对立的，比方 城市道路拥挤状况图，火车线，飞线（人口流向，航班信息）。

3.2.3 面类型数据图层

面类型也较好了解，就是形成一个立体（有厚度也算）。就是一个关闭的区块，常见的如省份，国家等。

3.2.4 热力类型图层

热力求是以色彩来体现数据强弱大小及散布趋势，在三维地图场景中，还能够借助高度来晋升立体感。热力求能够更为清晰敏感的监控 / 比照数据变动，对剖析数据 有很大的可参考性。

3.2.5 其余数据模型图层

如 DBSCAN 和等高线图，数据格式都较为非凡，这里不再具体介绍。

3.3 Control 地图控件层

地图组件是辅助用户扭转浏览地图的 UI 组件
罕用的控件有:

  • 放大和放大
  • Pan (通常在拖动地图时是固有的)
  • 按地位 / 地理位置搜寻
  • 重置为默认状态
  • 更改 底图
  • 全屏

  • 关上和敞开图层

    3.4 Interaction 交互层

    交互是人们能够在地图中找到更多细节和信息的形式。

  • 通过设计良好的抉择状态来明确抉择或过滤的内容。
  • 具备明确定义的层次结构，优先解决信息并以对应用地图的人不言而喻的形式进行设计。
  • 如何应用过渡和动画来反对层次结构和抉择。
    举个例子，比方搜寻过滤信息，交互层就是用户批改数据触发 rerender，这个和业务场景需要是强绑定的，个别绘图库凋谢 api 给内部业务开发人员调用。

    想要更零碎具体的理解地图分层怎么设计，能够学习下这篇文章 [# What to think about when designing maps
    ](https://smallmultiples.com.au…)

四、实现本人的地理信息可视化零碎

4.1 剖析业务场景

  • 大屏可视化: 组件化大屏，自定义大屏
  • BI 零碎：deepiInsight 等 BI 零碎
  • 业务畛域：GIS，疆土监测，数字城市，交通物流，气象，商业选址
    不同业务场景，展现状态会略有不同，导致选型计划也会有差别。
    一种是实现较为通用的天文数据利用的基础设施，不同业务方引入后须要进行二次开发。
    一种是业务方本身依据业务场景，间接引入较成熟的地图库，那就没必要思考前面 设计架构 这部分了，相似 MapBox 等很成熟的产品这里也不安利了。

4.2 设计架构

如果想本人实现一个较为通用的地图库给他人用。MVC 自底向上设计简略探讨下思路及优化。

4.2.1 Model

数据加载其实是地图场景 比拟大的一个问题，比方视角缩放后加载新的数据（之前提到的瓦片金字塔模型）可能造成卡顿和提早。
业内的优化计划也较为成熟。

  1. 相似 MapBox 的 TileCache，一个 LRU（最近起码应用）缓存算法。

  2. Indexed DB 本地化存储，等于做一个二次缓存

    4.2.2 Controller

    数据处理也是外围，因为基本上 场景更新 都是传入一个极大的 raw 数据。可能造成 cpu 计算阻塞。次要优化思路是：

  3. Web Worker，开释主线程压力（这个得带入理论场景测试，一些主线程和 Worker 通信带来的工夫节约，是否反而形成了一个负优化）

  4. Web Assembly，这两年最火的 web 新技术了，解决 js 计算慢的问题（这个下面一样，是否造成负优化得依据业务场景复杂度判断）

    4.2.3 View

    最初就是渲染了，这个方面 一些 WebGL 基础知识，以及怎么渲染文字的问题 就不展开讨论了，能够应用一些较为成熟的 gl 库，如 Three，babylon 等。
    整体示意图如下：

完结撒花，后续会继续更新 地理信息可视化 其余内容 ～

退出移动版