一、效果预览

在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实现自定义经纬网及标注相关推荐

百度地图上自定义添加一个标注
在百度地图上,自定义添加一个标注,标注可以是自己的图片. 步骤:先确定你要标注的点的坐标–>创建一个添加标注的函数addMarker–>(1)在该函数中创建这个图标,并说明图标的来源(网址 ...
maven自定义插件-mojo标注和参数
每个mojo都必须使用@Goal标注来表明其目标名称,否则maven将无法识别该目标.还有其他很多标注,列举如下: @goal <name>:唯一必须声明的标注,当用户命令行调用或在pom ...
cad线性标注样式修改在哪里_自定义设置CAD标注样式教程
在日常CAD绘图设计中,可能经常要遇到各种不同的CAD标注样式,例如迅捷CAD编辑器里自带一些常用标注类型,但有时候可能还是不能满足设计需求,这时就需要自定义设置需要的标注样式了.下面就是以迅捷CAD ...
百度地图自定义添加一个标注
1.引入百度地图js(需要去百度地图申请ak) <script type="text/javascript"src="https://api.map.baidu.c ...
Mapbox GL JS 支持中文标注
mapbox官方提供了对应的语言插件. 方法安装 npm install --save mapbox-gl @mapbox/mapbox-gl-language 使用 import MapboxLa ...
mapbox创建自定义marker图标绑定弹框展示信息
/*** 创建自定义marker图标绑定弹框*/let carMarker = [];//存放marker图标for(let m= 0;m<gpsInfoList.length;m++){let ...
【Silverlight】Bing Maps开发应用与技巧二：自定义图钉标注控件和动态ToolPanel
在Bing Maps Silverlight Control中以及为我们提供了地图图钉控件Pushpin,我曾经在< 使用图钉层(Pushpin layer)及地图图层(MapLayer)> ...
cesium加载自定义mapbox地图
cesium加载自定义mapbox地图自定义mapbox地图可以使用mapbox studio来自定义地图样式 mapbox-studio官网首页使用模版创建地图自定义地图,然后发布使用自 ...
MapKit 进阶教程: 自定义瓦片
原文:Advanced MapKit Tutorial: Custom Tiles 作者:Michael Katz 译者:kmyhy 在现代 app 中,地图的使用无处不在.地图可以提供 POI(兴趣 ...

Mapbox实现自定义经纬网及标注

一、效果预览

二、原理说明

Mapbox实现自定义经纬网及标注相关推荐

最新文章

热门文章