在mapbox-gl上實現(xiàn)經(jīng)緯網(wǎng)格，是按照經(jīng)度、緯度的一定間隔，將同經(jīng)度（緯度）的坐標(biāo)點，連接成直線，實現(xiàn)繪制經(jīng)緯度網(wǎng)格的形式。
實現(xiàn)代碼

參照開源代碼，實現(xiàn)在地圖上進行經(jīng)緯度網(wǎng)格的繪制。
//緯線

function makeMeridian(lng) { lng = lngFix(lng); const coords = []; for (var lat = -90; lat <= 90; lat += 1) { coords.push([lng, lat]); } return coords; }//經(jīng)線 function makeParallel(lat) { const coords = []; for (var lng = -180; lng <= 180; lng += 1) { coords.push([lngFix(lng), lat]); } return coords; }//創(chuàng)建geojson數(shù)據(jù) function makeFeature(coordinates, properties) { return { type: 'Feature', geometry: { type: 'LineString', coordinates }, properties }; }//修整經(jīng)度，防止最大值溢出 function lngFix(lng) { if (lng >= 180) return 179.999999; if (lng <= -180) return -179.999999; return lng; } //主函數(shù) 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 }; }//添加經(jīng)緯度圖層 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度為間隔畫的經(jīng)緯度網(wǎng)格，拉到最北邊和最南邊，會清楚的看到，只能顯示到±85多的坐標(biāo)位置。

引用內(nèi)容：
https://github.com/turban/Leaflet.Graticule
https://github.com/dereklieu/cool-grid

總結(jié)

以上是生活随笔為你收集整理的mapbox-gl绘制经纬网格（Graticule）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。