一、效果預覽

在Mapbox地圖中，添加經緯網與經緯網坐標標注，并隨著地圖縮放自適應經緯網網格大小。

?二、原理說明

本方法在maplibre-grid.js基礎上修改完成，maplibre-grid的github地址：

GitHub - maptiler/maplibre-grid: Grid / graticule plugin for MapLibre GL JS / Mapbox GL JS

在maplibre-grid的基礎上，跟隨經緯網在右側和底部放置相應的地圖標注。目前只實現了度級別的標注，分和秒尚未實現，主要滿足全球尺度的Web地圖展示。

具體實現代碼如下：

// 生成經度標注 function generateLngLable(map) {let mapBound = map.getBounds();let mapZoom = map.getZoom();// 根據縮放級別設置網格大小，要與網格保持一致let interval = mapZoom > 7 ? 1 : (mapZoom > 6 ? 2 : (mapZoom > 5 ? 5 : (mapZoom > 4 ? 10 : (mapZoom > 3 ? 15 : 30))));let lableFeatureList = [];for (let i = -180; i < 180; i += interval) {let lableName = i.toString() + "°" + (i < 0 && i > -180 ? "W" : (i > 0 ? "E" : ""));let lableFeature = {"type": "Feature","properties": {"Name": lableName},"geometry": {"type": "Point","coordinates": [i, map.getBounds()._sw.lat]}};lableFeatureList.push(lableFeature);}let lableSource = {"type": "geojson","data": {"type": "FeatureCollection","name": "lngLable","features": lableFeatureList}};return lableSource; }// 生成緯度標注 function generateLatLable(map) {let mapBound = map.getBounds();if (Math.abs(mapBound._ne.lng - mapBound._sw.lng) > 360) {let lableSource = {"type": "geojson","data": {"type": "FeatureCollection","name": "latLable","features": []}};return lableSource;}let mapZoom = map.getZoom();let interval = mapZoom > 7 ? 1 : (mapZoom > 6 ? 2 : (mapZoom > 5 ? 5 : (mapZoom > 4 ? 10 : (mapZoom > 3 ? 15 : 30))));let lableFeatureList = [];for (let i = -90; i < 90; i += interval) {if (i < -85 || i > 85) continue; //超高緯度地區超出Web墨卡托地圖范圍，忽略let lableName = i.toString() + "°" + (i < 0 ? "S" : (i > 0 ? "N" : ""));let lableFeature = {"type": "Feature","properties": {"Name": lableName},"geometry": {"type": "Point","coordinates": [map.getBounds()._ne.lng, i]}};lableFeatureList.push(lableFeature);}let lableSource = {"type": "geojson","data": {"type": "FeatureCollection","name": "latLable","features": lableFeatureList}};return lableSource; }// 添加標注 function generateMapLable(map) {let lngLableSource = generateLngLable(map);let latLableSource = generateLatLable(map);map.addSource('lngLable', lngLableSource);map.addSource('latLable', latLableSource);map.addLayer({"id": "bottomLable","type": "symbol","source": "lngLable","layout": {"visibility": "visible","text-field": ["get", "Name"],"text-variable-anchor": ["bottom"],"text-radial-offset": 0.5,"text-justify": "auto","text-size": 16,"text-font": ["Arial Unicode MS Regular"]},"paint": {"text-color": "black","text-halo-width": 2,"text-halo-color": "white"}});map.addLayer({"id": "rightLable","type": "symbol","source": "latLable","layout": {"visibility": "visible","text-field": ["get", "Name"],"text-variable-anchor": ["right"],"text-radial-offset": 0.5,"text-justify": "auto","text-size": 16,"text-font": ["Arial Unicode MS Regular"]},"paint": {"text-color": "black","text-halo-width": 2,"text-halo-color": "white"}}); }function addMapLable(map) {removeMapLable(map);generateMapLable(map); }function removeMapLable(map) {if (map.getLayer('bottomLable')) {map.removeLayer('bottomLable');map.removeSource('lngLable');}if (map.getLayer('rightLable')) {map.removeLayer('rightLable');map.removeSource('latLable');} }

完整項目已上傳至本人github，地址如下：

GitHub - YuWebGIS/Mapbox-Graticule-with-Lable: A Example of Graticule with Lable for Mapbox GL JS

本項目使用了離線版Mapbox的js庫，點擊即可使用。

總結

以上是生活随笔為你收集整理的Mapbox实现自定义经纬网及标注的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。