走進地理信息可視化

豆皮粉們，又見面了，這一期，👏由來自字節跳動數據平臺的「Kakashi」 帶寶寶們瞭解「地理信息可視化」相關的芝士😘。

導讀：本文先將介紹地理信息可視化的定義及意義， 其次將探討怎麼設計實現一個地理信息可視化系統。

全文閱讀約：8min

本文做者：Kakashi

1、前言

1.1 定義

地理信息可視化是在地理數據庫驅動下,以地圖形式表達地理信息的過程。（後續文章也會從 生成數據和展示數據 兩部分入手介紹） 主要是以地理信息科學、計算機科學、地圖學、認知科學、信息傳輸科學與地理信息系統爲基礎，並經過計算機技術、數字技術、多媒體技術動態、直觀、形象地表現、解釋、傳輸地理信空間信息並揭示其規律，是關於信息表達和傳輸的理論、方法和技術的一門學科。旨在藉助於圖形學、計算機圖形學和圖像處理技術，將地學信息輸入、處理、查詢、分析以及預測的結果和數據以圖形符號、圖標、文字、表格、視頻等可視化形式顯示並進行交互。

1.2 意義

舉兩個例子

🌰:2016年《紐約時報》美國總統大選各州投票結果

很是直觀地顯示各個州選舉的支持結果。

能夠看到藍州民主黨（希拉里）主要分佈西海岸和東北部。這些地區兩級分化嚴重，精英階層和下層人士，分別是精英特權和政府福利的受益者。紅州共和黨（特朗普）主要分佈在中部地區。這些地區傳統農業/行業爲主，思想相對保守，奉行本身努力，白手起家，反對大政府主義。

🌰:2017年百度地圖春節前遷出流向

從這份遷出圖能夠看出，較爲發達的東部地區，大面積務工人員回家過年，短暫的‘逃離北上廣深’，不久後你們節後又會相聚於此，爲了夢想和生活努力着。結論：從上面能夠看出，地理信息數據的可視化將本來沉悶繁冗的數據以通俗易通的形式呈現給咱們，讓咱們可以從多個維度（時間、分佈區域、遷移方向）來挖掘這份數據的價值，瞭解數據之美，它比文字和語言更直觀，更具備說服力。

2、生成地理數據

首先，數據大體可分爲兩種。底圖數據和自定義可視化圖層數據。底圖一般只用作地理信息的表達，例如MapBox、Google地圖等。通常流程是在地理信息底圖的基礎上，加入不一樣的自定義可視化圖層，好比柱狀圖，熱力圖，飛線呼吸點，或者一些mark標記等（後續Data 自定義數據層會詳細介紹）。關係大體以下：

ps：這兩種數據不是每一個場景下都必須的。不少狀況下咱們只是作些簡單的地理可視化，不須要加載地圖底圖。

2.1 GeoJSON（底圖）

2.1.1 簡介

GeoJSON 是一種對各類地理數據結構進行編碼的格式，是一個樹狀的json對象。每一條數據，都叫作一個特徵（Feature），數據主要有六種類型：

•點：Point、MultiPoint

•線：LineString、MultiLineString

•面：Polygon、MultiPolygon 舉個例子：

{
複製代碼

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 重點，重點，重點

根據《中華人民共和國測繪法》[1]** 第十條、第十一條、第三十八條、第五十二條、第六十二條 之規定

在中華人民共和國境內必須使用基於 GCJ02 的座標系；而 BD09 座標系爲基於 GCJ02 加密的座標系，亦能夠直接使用。

因此在中華人民共和國境內使用地圖相關服務，請務必遵循國家法律法規，不要從小網站找一份，或者本身DIY一份，推薦使用 天然資源部地圖技術審查中心 提供的 標準地圖服務：bzdt.ch.mnr.gov.cn/

2.2 自定義數據（可視化圖層）

底圖的數據格式是較爲統一的，可是咱們若是在地圖上 加了不少自定義數據（好比Mark標記），此時 想導出地圖，給別人導入使用，Mark的數據格式改如何設計呢？這個沒有統一的說法，常規的文件類型都行，喜歡txt都沒問題。

•GeoJSON 支持點、線、面等全部的標準空間數據格式。•CSV 支持點、線段、弧線等數據類型。•JSON 支持簡單的點、線，面數據類型，不支持多點，多線的，多面數據格式。可是仍是推薦自定義數據 繼續使用GeoJson的格式，由於這樣的樹形結構和schema格式，都較爲公認、統一。

其次 數據一般是瓦片金字塔模型，是一種多分辨率層次模型，從瓦片金字塔的底層到頂層，分辨率愈來愈低，但表示的地理範圍不變。簡單來講就是平時咱們看地圖 放大後 看到的更詳細，這麼作能夠獲得更好的性能和觀看體驗。

3、展示地圖數據

數據驅動視圖，獲得了地圖地理數據，怎麼樣合理的展示呢？

3.1 Context底圖層

底圖是告訴用戶在哪裏，看到的什麼，大體有一個總體的認知。

好比繪製中國地圖，底圖能夠用一個世界地圖簡化圖，爲了讓用戶熟悉的物理環境，幫助用戶更好的肯定位置。或者用一個三維地球來描述，基礎底圖位於地圖最底層。

3.2 Data 自定義數據層

通過與antv L七、 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 [2]

4、實現本身的地理信息可視化系統

4.1 分析業務場景

•大屏可視化: DataWind自定義佈局組件化大屏•BI系統：deepInsight 等BI系統•業務領域：GIS，國土監測，數字城市，交通物流，氣象，商業選址 不一樣業務場景，展現形態會略有不一樣，致使選型方案也會有差別。一種是實現較爲通用的地理數據應用的基礎設施，不一樣業務方引入後須要進行二次開發。一種是業務方自身根據業務場景，直接引入較成熟的地圖庫，那就不必考慮後面設計架構這部分了，相似MapBox等很成熟的產品這裏也不安利了。

4.2 設計架構

若是想本身實現一個較爲通用的地圖庫給別人用。MVC自底向上設計簡單探討下思路及優化。

4.2.1 Model

數據加載實際上是地圖場景 比較大的一個問題，好比視角縮放後加載新的數據（以前提到的瓦片金字塔模型）可能形成卡頓和延遲。業內的優化方案也較爲成熟。

1.相似MapBox的TileCache，一個LRU（最近最少使用）緩存算法。2.IndexedDB 本地化存儲，等於作一個二次緩存

4.2.2 Controller

數據處理也是核心，由於基本上 場景更新 都是傳入一個極大的raw數據。可能形成cpu計算阻塞。主要優化思路是：3.Web Worker，釋放主線程壓力（這個得帶入實際場景測試，一些主線程和Worker通訊帶來的時間浪費，是否反而構成了一個負優化）4.Web Assembly，這兩年最火的web 新技術了，解決js計算慢的問題（這個上面同樣，是否形成負優化得根據業務場景複雜度判斷）

4.2.3 View

     最後就是渲染了，這個方面 一些WebGL基礎知識，以及怎麼渲染文字的問題 就不展開討論了，可使用一些較爲成熟的gl庫，如Three，babylon等。總體示意圖以下：

References

[1] 《中華人民共和國測繪法》: www.npc.gov.cn/npc/xinwen/… [2] # What to think about when designing maps : smallmultiples.com.au/articles/wh…

The     End

參考：

走進地理信息可視化