|
本文作者：字節(jié)跳動數(shù)據(jù)平臺 早千 這是一張再熟悉不過的地圖，但右上角黑龍江與內(nèi)蒙古之間的那片飛地是什么呢？ 查一下，摘自互聯(lián)網(wǎng)：
哦豁，原來如此。知道了，但是我突然更好奇這個地圖是怎么畫在網(wǎng)頁上的呢？ 將地圖畫在頁面上，概括一下分三步。1. 拿到地圖信息數(shù)據(jù) 2. 投影 3. 畫 地圖數(shù)據(jù)這里介紹兩種可以用于表示地理信息的數(shù)據(jù)類型
GeoJSON
如下表所示，坐標(biāo)表示點。點連成線，線連成面，從而表現(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" }
}
}
]
}TopoJSONTopoJSON 是 GeoJSON 按拓?fù)鋵W(xué)編碼后的擴展形式，是由 D3 的作者 Mike Bostock 制定的。相比 GeoJSON 直接使用 Polygon、Point 之類的幾何體來表示圖形的方法，TopoJSON 中的每一個幾何體都是通過將共享邊（被稱為arcs）整合后組成的。 簡單說，它的線并不是由點構(gòu)成，而是有自己的id。 邊在一起組成幾何形狀時，最后一個坐標(biāo)必須與后續(xù)邊的第一個坐標(biāo)（如果有）相同。例如，如果邊6代表點序列A→B→C，邊7代表點序列C→D→E，則[6，7]代表點序列A→B→C→D→E。 由于邊是共享的所以在表示不同方向時需要反轉(zhuǎn)。使用補碼表示。-1（?0）為反0，-2（?1）為反1，依此類推。 以上圖舉例說明。綠色點與紅色點坐標(biāo)分別代表兩個點。紫色邊為3。如果定義藍(lán)色邊順時針方向為1，黑色邊順時針方向為0，則藍(lán)色邊與黑色邊組成幾何圖形為[[0, 1]]。在此基礎(chǔ)上紅色順時針為2，則紅色邊與逆黑色邊（~0 = -1）組成圖形為[[2, -1]]。 獲取數(shù)據(jù)
投影地圖投影，是指按照一定的數(shù)學(xué)法則將地球橢球面上的經(jīng)緯網(wǎng)轉(zhuǎn)換到平面上，使地面的地理坐標(biāo)與平面直角坐標(biāo)建立起函數(shù)關(guān)系，是繪制地圖的數(shù)學(xué)基礎(chǔ)之一。由于地球是一個不可展的球體，使用物理方法將其展平會引起褶皺、拉伸和斷裂，因此要使用地圖投影實現(xiàn)由曲面向平面的轉(zhuǎn)化。 下表是一些地圖投影與經(jīng)緯線形狀特征 示例的中國地圖就是采用了墨卡托投影。 畫經(jīng)過上面的介紹，接下來只需要將二維平面內(nèi)容繪制出來即可。 這里使用d3與d3-geo舉例繪制上面提到的中國地圖。為了美觀，使用d3-scale-chromatic的一個主題隨意上了顏色。 import * as d3 from 'd3'; import * as geo from 'd3-geo'; import * as d3Color from 'd3-scale-chromatic'; 在頁面中創(chuàng)建一個svg元素 <svg id="svg" width="1080" height="600"></svg> 創(chuàng)建投影，設(shè)置參數(shù) const projection = geo.geoMercator() // 墨卡托投影 .scale(450) // 投影的比例因子，可以按比例放大投影。 .center([105, 38]) // 中心點設(shè)置為中國的中心位置 大約經(jīng)度105，緯度38 利用得到的投影創(chuàng)建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格式數(shù)據(jù)
.enter()
.append('path')
.attr('d', path)
.attr('fill', (_, i) => {
return colors(i);
})
.attr('stroke', '#fff')
.attr('stroke-width', 1);到此為止，中國地圖就已經(jīng)出現(xiàn)在了我們面前。 如果在這個基礎(chǔ)上將北京上海兩座城市標(biāo)注出來呢？定義經(jīng)緯度 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]); // 經(jīng)緯度轉(zhuǎn)換為繪制坐標(biāo)
return 'translate(' + coor[0] + ',' + coor[1] + ')';
});
// 綠色圓點
location.append('circle')
.attr('r', 4)
.attr('fill', '#a0d911')現(xiàn)在地圖上的北京與上海兩地就被標(biāo)注出來咯 看來要繪制一幅地圖也并不難呀。 |
|
|
