一、效果預(yù)覽

在Mapbox地圖中，添加經(jīng)緯網(wǎng)與經(jīng)緯網(wǎng)坐標(biāo)標(biāo)注，并隨著地圖縮放自適應(yīng)經(jīng)緯網(wǎng)網(wǎng)格大小。

?二、原理說明

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

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

在maplibre-grid的基礎(chǔ)上，跟隨經(jīng)緯網(wǎng)在右側(cè)和底部放置相應(yīng)的地圖標(biāo)注。目前只實(shí)現(xiàn)了度級別的標(biāo)注，分和秒尚未實(shí)現(xiàn)，主要滿足全球尺度的Web地圖展示。

具體實(shí)現(xiàn)代碼如下：

// 生成經(jīng)度標(biāo)注 function generateLngLable(map) {let mapBound = map.getBounds();let mapZoom = map.getZoom();// 根據(jù)縮放級別設(shè)置網(wǎng)格大小，要與網(wǎng)格保持一致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; }// 生成緯度標(biāo)注 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; //超高緯度地區(qū)超出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; }// 添加標(biāo)注 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');} }

完整項(xiàng)目已上傳至本人github，地址如下：

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

本項(xiàng)目使用了離線版Mapbox的js庫，點(diǎn)擊即可使用。

總結(jié)

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

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