Mapbox标记过多致城镇名称不显示的解决方案咨询

问题描述 #

站点中Mapbox地图加载大量标记后，城镇名称被遮挡；即使放大地图，城镇名称仍不显示，但对应地标能正常显示。已按官方文档配置标签防冲突属性，问题依旧。使用的Vue组件代码如下：

<product-map
        mapstyle=""
        :longitude="145.2814504"
        :latitude="-37.6574789"
        :maxzoom="15"
        :minzoom="9"
        :zoom="10"
        :products="[…]"
        :categories="[…]"
        :settings="{
                'map': {
                        'cluster':false,
                        'clusterMaxZoom':13
                },
                'flyTo':{
                        'zoom':15,
                        'pitch':60,
                        'bearing':45
                },
                'marker': {
                        'icon-size':0.844444,
                        'icon-anchor':'center'
                },
                'cluster': {
                        'paint': {
                                'circle-color': [
                                        'step',
                                        ['get','point_count'],
                                        '#15B9CF',
                                        10,
                                        '#15B9CF'
                                ],
                                'circle-radius':[
                                        'step',
                                        ['get','point_count'],
                                        25,
                                        10,
                                        35
                                ],
                                'circle-stroke-color':'rgba(81, 187, 214, 0.2)',
                                'circle-stroke-width':25
                        }
                },
                'clusterCount':{
                        'layout':{
                                'text-field':'{point_count_abbreviated}',
                                'text-font':[],
                                'text-size':13,
                                'icon-allow-overlap':true,
                                'text-allow-overlap':true,
                                'text-optional':true,
                                'icon-ignore-placement':true
                        },
                        'paint':{'text-color':'#fff'}
                }
        }"
/>

可行解决办法 #

• 调整标记图层绘制顺序
  Mapbox按图层添加顺序绘制，后添加的图层会覆盖先添加的。如果标记图层在地名图层之后，会遮挡地名。可以在添加标记图层时指定beforeId参数，将标记放在place-label（地名图层）之前绘制，让地名优先显示。

• 给普通标记添加碰撞避让属性
  当前仅在clusterCount中配置了重叠属性，普通标记的marker配置缺少碰撞检测相关设置。修改marker的layout配置：

  'marker': {
          'icon-size':0.844444,
          'icon-anchor':'center',
          'marker-allow-overlap': false,
          'marker-ignore-placement': false,
          'marker-optional': true
  }
  

  开启后标记会主动避让地名标签，而非强制覆盖。

• 启用标记聚合并调整聚合参数
  当前cluster设为false，大量分散标记更容易遮挡地名。尝试开启聚合，或提高clusterMaxZoom到15，让地图放大到更高层级才分散标记，减少低层级的标记密度，给地名留出显示空间。

• 修改地图样式提升地名标签优先级
  直接调整Mapbox样式中place-label图层的布局属性，强制地名优先显示：
  在样式的place-label图层layout中添加：

  'text-allow-overlap': true,
  'text-ignore-placement': true
  

  这样地名标签会忽略其他元素的遮挡，优先展示。

• 优化标记视觉属性
  减小标记的icon-size（比如调整到0.6-0.7），或给标记添加半透明效果：

  'marker': {
          'icon-size':0.7,
          'icon-anchor':'center',
          'icon-opacity': 0.8
  }
  

  降低标记的视觉权重，减少对地名的遮挡。

内容的提问来源于stack exchange，提问作者Tyssen