本文作者：字節(jié)跳動(dòng)數(shù)據(jù)平臺(tái) 早千

這是一張?jiān)偈煜げ贿^(guò)的地圖，但右上角黑龍江與內(nèi)蒙古之間的那片飛地是什么呢？

查一下，摘自互聯(lián)網(wǎng)：

大興安嶺是黑龍江省下轄的一個(gè)非常特殊的地級(jí)行政單位，大興安嶺行政公署和大興安嶺林業(yè)集團(tuán)公司實(shí)行政企合一的管理體制。行政公署為省政府派駐機(jī)構(gòu)，所轄加格達(dá)奇和松嶺兩區(qū)，地權(quán)屬于內(nèi)蒙古自治區(qū)呼倫貝爾市。黑龍江每年向內(nèi)蒙古支付租金，加格達(dá)奇屬于“租界”。所以，加格達(dá)奇人是黑龍江的，地是內(nèi)蒙古的，樹(shù)是林業(yè)部的。

哦豁，原來(lái)如此。知道了，但是我突然更好奇這個(gè)地圖是怎么畫(huà)在網(wǎng)頁(yè)上的呢？

將地圖畫(huà)在頁(yè)面上，概括一下分三步。1. 拿到地圖信息數(shù)據(jù) 2. 投影 3. 畫(huà)

地圖數(shù)據(jù)

這里介紹兩種可以用于表示地理信息的數(shù)據(jù)類型

• GeoJSON

• TopoJSON

GeoJSON

GeoJSON是一種基于JSON的地理空間數(shù)據(jù)交換格式，它定義了幾種類型JSON對(duì)象以及它們組合在一起的方法，以表示有關(guān)地理要素、屬性和它們的空間范圍的數(shù)據(jù)。

如下表所示，坐標(biāo)表示點(diǎn)。點(diǎn)連成線，線連成面，從而表現(xiàn)出各種各樣的形狀。

一段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 按拓?fù)鋵W(xué)編碼后的擴(kuò)展形式，是由 D3 的作者 Mike Bostock 制定的。相比 GeoJSON 直接使用 Polygon、Point 之類的幾何體來(lái)表示圖形的方法，TopoJSON 中的每一個(gè)幾何體都是通過(guò)將共享邊（被稱為arcs）整合后組成的。

簡(jiǎn)單說(shuō)，它的線并不是由點(diǎn)構(gòu)成，而是有自己的id。

邊在一起組成幾何形狀時(shí)，最后一個(gè)坐標(biāo)必須與后續(xù)邊的第一個(gè)坐標(biāo)（如果有）相同。例如，如果邊6代表點(diǎn)序列A→B→C，邊7代表點(diǎn)序列C→D→E，則[6，7]代表點(diǎn)序列A→B→C→D→E。

由于邊是共享的所以在表示不同方向時(shí)需要反轉(zhuǎn)。使用補(bǔ)碼表示。-1（?0）為反0，-2（?1）為反1，依此類推。

以上圖舉例說(shuō)明。綠色點(diǎn)與紅色點(diǎn)坐標(biāo)分別代表兩個(gè)點(diǎn)。紫色邊為3。如果定義藍(lán)色邊順時(shí)針?lè)较驗(yàn)?，黑色邊順時(shí)針?lè)较驗(yàn)?，則藍(lán)色邊與黑色邊組成幾何圖形為[[0, 1]]。在此基礎(chǔ)上紅色順時(shí)針為2，則紅色邊與逆黑色邊（~0 = -1）組成圖形為[[2, -1]]。

獲取數(shù)據(jù)

1. http://datav.aliyun.com/tools/atlas/ 直接下載中國(guó)及省市GeoJSON

2. http://www./ 獲取各種各樣的shape格式(.shp)地圖數(shù)據(jù)，使用mapshaper(https://github.com/mbloch/mapshaper)進(jìn)行處理后導(dǎo)出為GeoJSON或TopoJSON。

投影

地圖投影，是指按照一定的數(shù)學(xué)法則將地球橢球面上的經(jīng)緯網(wǎng)轉(zhuǎn)換到平面上，使地面的地理坐標(biāo)與平面直角坐標(biāo)建立起函數(shù)關(guān)系，是繪制地圖的數(shù)學(xué)基礎(chǔ)之一。由于地球是一個(gè)不可展的球體，使用物理方法將其展平會(huì)引起褶皺、拉伸和斷裂，因此要使用地圖投影實(shí)現(xiàn)由曲面向平面的轉(zhuǎn)化。

下表是一些地圖投影與經(jīng)緯線形狀特征

示例的中國(guó)地圖就是采用了墨卡托投影。

畫(huà)

經(jīng)過(guò)上面的介紹，接下來(lái)只需要將二維平面內(nèi)容繪制出來(lái)即可。

這里使用d3與d3-geo舉例繪制上面提到的中國(guó)地圖。為了美觀，使用d3-scale-chromatic的一個(gè)主題隨意上了顏色。

 import * as d3 from 'd3';
import * as geo from 'd3-geo';
import * as d3Color from 'd3-scale-chromatic';

在頁(yè)面中創(chuàng)建一個(gè)svg元素

<svg id="svg" width="1080" height="600"></svg>

創(chuàng)建投影，設(shè)置參數(shù)

const projection = geo.geoMercator() // 墨卡托投影
.scale(450) // 投影的比例因子，可以按比例放大投影。
.center([105, 38]) // 中心點(diǎn)設(shè)置為中國(guó)的中心位置 大約經(jīng)度105，緯度38

利用得到的投影創(chuàng)建path，補(bǔ)充顏色與邊線

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是下載好的中國(guó)地圖GeoJSON格式數(shù)據(jù)
                .enter()
                .append('path')
                .attr('d', path)
                .attr('fill', (_, i) => {
                  return colors(i);
                })
                .attr('stroke', '#fff')
                .attr('stroke-width', 1);

到此為止，中國(guó)地圖就已經(jīng)出現(xiàn)在了我們面前。

如果在這個(gè)基礎(chǔ)上將北京上海兩座城市標(biāo)注出來(lái)呢？定義經(jīng)緯度

const places = [
  {
    'name': '北京',
    'log': '116.3',
    'lat': '39.9'
  },
  {
    'name': '上海',
    'log': '121.4',
    'lat': '31.2'
  }
];

故技重施，用svg畫(huà)出兩個(gè)點(diǎn)

const location = svg.selectAll('g')
                    .data(places)
                    .enter()
                    .append('g')
                    .attr('transform', (d) => {
                        const coor = projection([d.log, d.lat]); // 經(jīng)緯度轉(zhuǎn)換為繪制坐標(biāo)
                        return 'translate(' + coor[0] + ',' + coor[1] + ')';
                    });

// 綠色圓點(diǎn)
location.append('circle')
        .attr('r', 4)
        .attr('fill', '#a0d911')

現(xiàn)在地圖上的北京與上海兩地就被標(biāo)注出來(lái)咯

看來(lái)要繪制一幅地圖也并不難呀。