從一片飛地說起的地圖畫法
- 2020 年 4 月 5 日
- 筆記
本文作者：字節跳動數據平台 早千
這是一張再熟悉不過的地圖，但右上角黑龍江與內蒙古之間的那片飛地是什麼呢？
查一下，摘自互聯網：
大興安嶺是黑龍江省下轄的一個非常特殊的地級行政單位，大興安嶺行政公署和大興安嶺林業集團公司實行政企合一的管理體制。行政公署為省政府派駐機構，所轄加格達奇和松嶺兩區，地權屬於內蒙古自治區呼倫貝爾市。黑龍江每年向內蒙古支付租金，加格達奇屬於「租界」。所以，加格達奇人是黑龍江的，地是內蒙古的，樹是林業部的。
哦豁，原來如此。知道了，但是我突然更好奇這個地圖是怎麼畫在網頁上的呢？
將地圖畫在頁面上，概括一下分三步。1. 拿到地圖資訊數據 2. 投影 3. 畫
地圖數據
這裡介紹兩種可以用於表示地理資訊的數據類型
-
GeoJSON
-
TopoJSON
GeoJSON
GeoJSON是一種基於JSON的地理空間數據交換格式，它定義了幾種類型JSON對象以及它們組合在一起的方法，以表示有關地理要素、屬性和它們的空間範圍的數據。
如下表所示，坐標表示點。點連成線，線連成面，從而表現出各種各樣的形狀。
一段GeoJSON示例
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [102.0, 0.5] }, "properties": { "prop0": "value0" } }, { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0] ] }, "properties": { "prop0": "value0", "prop1": 0.0 } }, { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ] ] }, "properties": { "prop0": "value0", "prop1": { "this": "that" } } } ] } TopoJSON
TopoJSON 是 GeoJSON 按拓撲學編碼後的擴展形式，是由 D3 的作者 Mike Bostock 制定的。相比 GeoJSON 直接使用 Polygon、Point 之類的幾何體來表示圖形的方法，TopoJSON 中的每一個幾何體都是通過將共享邊（被稱為arcs）整合後組成的。
簡單說，它的線並不是由點構成，而是有自己的id。
邊在一起組成幾何形狀時，最後一個坐標必須與後續邊的第一個坐標（如果有）相同。例如，如果邊6代表點序列A→B→C，邊7代表點序列C→D→E，則[6，7]代表點序列A→B→C→D→E。
由於邊是共享的所以在表示不同方向時需要反轉。使用補碼錶示。-1（〜0）為反0，-2（〜1）為反1，依此類推。
以上圖舉例說明。綠色點與紅色點坐標分別代表兩個點。紫色邊為3。如果定義藍色邊順時針方向為1，黑色邊順時針方向為0，則藍色邊與黑色邊組成幾何圖形為[[0, 1]]。在此基礎上紅色順時針為2，則紅色邊與逆黑色邊（~0 = -1）組成圖形為[[2, -1]]。
獲取數據
-
http://datav.aliyun.com/tools/atlas/ 直接下載中國及省市GeoJSON
-
http://www.naturalearthdata.com/ 獲取各種各樣的shape格式(.shp)地圖數據，使用mapshaper(https://github.com/mbloch/mapshaper)進行處理後導出為GeoJSON或TopoJSON。
投影
地圖投影，是指按照一定的數學法則將地球橢球面上的經緯網轉換到平面上，使地面的地理坐標與平面直角坐標建立起函數關係，是繪製地圖的數學基礎之一。由於地球是一個不可展的球體，使用物理方法將其展平會引起褶皺、拉伸和斷裂，因此要使用地圖投影實現由曲面向平面的轉化。
下表是一些地圖投影與經緯線形狀特徵
示例的中國地圖就是採用了墨卡托投影。
畫
經過上面的介紹，接下來只需要將二維平面內容繪製出來即可。
這裡使用d3與d3-geo舉例繪製上面提到的中國地圖。為了美觀，使用d3-scale-chromatic的一個主題隨意上了顏色。
import * as d3 from 'd3'; import * as geo from 'd3-geo'; import * as d3Color from 'd3-scale-chromatic'; 在頁面中創建一個svg元素
<svg id="svg" width="1080" height="600"></svg> 創建投影，設置參數
const projection = geo.geoMercator() // 墨卡托投影 .scale(450) // 投影的比例因子，可以按比例放大投影。 .center([105, 38]) // 中心點設置為中國的中心位置 大約經度105，緯度38 利用得到的投影創建path，補充顏色與邊線
const svg = d3.select('#svg'); const path = geo.geoPath(projection); const colors = d3.scaleOrdinal(d3Color.schemeBlues[9]); const area = svg.selectAll('path') .data(geoData.features) // 這裡的geoData是下載好的中國地圖GeoJSON格式數據 .enter() .append('path') .attr('d', path) .attr('fill', (_, i) => { return colors(i); }) .attr('stroke', '#fff') .attr('stroke-width', 1); 到此為止，中國地圖就已經出現在了我們面前。
如果在這個基礎上將北京上海兩座城市標註出來呢？定義經緯度
const places = [ { 'name': '北京', 'log': '116.3', 'lat': '39.9' }, { 'name': '上海', 'log': '121.4', 'lat': '31.2' } ]; 故技重施，用svg畫出兩個點
const location = svg.selectAll('g') .data(places) .enter() .append('g') .attr('transform', (d) => { const coor = projection([d.log, d.lat]); // 經緯度轉換為繪製坐標 return 'translate(' + coor[0] + ',' + coor[1] + ')'; }); // 綠色圓點 location.append('circle') .attr('r', 4) .attr('fill', '#a0d911') 現在地圖上的北京與上海兩地就被標註出來咯
看來要繪製一幅地圖也並不難呀。
有意到字節跳動工作的同學，可以選擇閃電內推哦，流程簡，速度快，工資高?。
-
重點職位推薦 字節跳動-數據平台前端內推，2020閃電內推
-
自行查看更多職位需求，投遞簡歷請掃描下方二維碼：
-
掃碼加下方秘書微信，回復「前端」 ，加入交流群。
