乐趣区

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

     导读:本文先将介绍地理信息可视化的定义及意义,其次将探讨怎么设计实现一个地理信息可视化零碎。全文浏览约【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 等。
    整体示意图如下:


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

退出移动版