⭐Mapbox GL JS学习探索系列（4） - Marker重叠解决方案

最新推荐文章于 2025-03-31 18:39:11 发布

j_bleach

最新推荐文章于 2025-03-31 18:39:11 发布

阅读量3.1k

点赞数 1

分类专栏： mapbox 文章标签： mapbox javascript

本文链接：https://blog.youkuaiyun.com/j_bleach/article/details/103145507

版权

本文探讨了在Mapbox GL JS中如何处理marker重叠问题。通过设置source的cluster属性，可以实现marker的聚合效果，避免重叠。在地图缩放时，marker会自适应地显示，提高地图标注的可读性。此外，通过监听地图数据更新，动态调整marker的显示，确保只有非聚合的marker被显示在地图上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

在这里插入图片描述
相比于layer，marker 有着更为灵活的呈现方式，适用于地图上更加复杂的标注显示，而与此同时marker是通过dom渲染，然后叠加在地图图层上的，因此在性能上不及layer。在实际应用场景中，当地图需要大量渲染复杂的结构标注时，layer通常不能完全满足需求，而此时marker就成了替代方案之一，但marker没有layer那么多的配置项去满足marker之间或者marker与地图之间的位置关系。本文利用source的cluster属性，着重解决marker在地图中显示重叠的问题。

基础用法

var popup = new mapboxgl.Popup({ offset: 25 })
.setText('popUpText');
var marker = new mapboxgl.Marker({
element: element,
draggable: true,
offset: [10, 0],
})
.setLngLat([0, 0])
.setPopup(popup)
.addTo(map);

marker 接收一个dom元素作为显示单位，默认是一个svg 定位图标。options 还支持配置偏移量及可拖拽配置，也可以对marker增加一个弹出窗口。

marker重叠显示解决方案

在mapbox中，想要直接达到marker具有边界检测的效果是比较困难的，目前的思路是通过两两计算marker间的距离，来控制marker的显示隐藏，避免重叠。但这种方法，计算量太大，可行度差。因此需要一种借助于类似于layer那种自适配地图显示的方案，来解决marker的重叠显示问题。

this.map.addSource("build-marker-source", {
                                "type": "geojson",
                                "data": {
                                    "type": "FeatureCollection&#

最低0.47元/天解锁文章