生活随笔
收集整理的這篇文章主要介紹了
mapbox-gl绘制经纬网格（Graticule）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在mapbox-gl上實現經緯網格，是按照經度、緯度的一定間隔，將同經度（緯度）的坐標點，連接成直線，實現繪制經緯度網格的形式。
實現代碼
參照開源代碼，實現在地圖上進行經緯度網格的繪制。
//緯線
function makeMeridian(lng) {
lng
= lngFix(lng
);
const coords
= [];
for (var lat
= -90; lat
<= 90; lat
+= 1) {
coords
.push([lng
, lat
]);
}
return coords
;
}
function makeParallel(lat) {
const coords
= [];
for (var lng
= -180; lng
<= 180; lng
+= 1) {
coords
.push([lngFix(lng
), lat
]);
}
return coords
;
}
function makeFeature(coordinates, properties) {
return {
type
: 'Feature',
geometry
: {
type
: 'LineString',
coordinates
},
properties
};
}
function lngFix(lng) {
if (lng
>= 180) return 179.999999;
if (lng
<= -180) return -179.999999;
return lng
;
}
function graticule(interval) {
interval
= +interval
|| 20;
const features
= [];
for (var lng
= 0; lng
<= 180; lng
+= interval
) {
features
.push(makeFeature(makeMeridian(lng
), {
name
: (lng
) ? lng
.toString() + "° E" : "本初子午線"
}));
if (lng
!== 0) {
features
.push(makeFeature(makeMeridian(-lng
), {
name
: lng
.toString() + "° W"
}));
}
}for (var lat
= 0; lat
<= 90; lat
+= interval
) {
features
.push(makeFeature(makeParallel(lat
), {
name
: (lat
) ? lat
.toString() + "° N" : "赤道"
}));if (lat
!== 0) {
features
.push(makeFeature(makeParallel(-lat
), {
"name": lat
.toString() + "° S"
}));
}
}
return {
type
: 'FeatureCollection',
features
};
}
const _griddata
= graticule(5);
map
.addSource('gridline', {
'type': 'geojson',
'data': _griddata
});
map
.addLayer({
'id': 'gridid',
'type': 'line',
'source': 'gridline',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#f00',
'line-width': 1
}
});
效果圖如下：
以上是5度為間隔畫的經緯度網格，拉到最北邊和最南邊，會清楚的看到，只能顯示到±85多的坐標位置。
引用內容：
https://github.com/turban/Leaflet.Graticule
https://github.com/dereklieu/cool-grid
總結
以上是生活随笔為你收集整理的mapbox-gl绘制经纬网格（Graticule）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
