简介
相比于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&#