一、效果预览

在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实现自定义经纬网及标注的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。