使用 `icon-allow-overlap` 时 Mapbox 标记闪烁答案

【问题标题】：Mapbox markers flashing when using `icon-allow-overlap`使用 `icon-allow-overlap` 时 Mapbox 标记闪烁
【发布时间】：2019-08-15 21:51:04
【问题描述】：

我有一张使用 mapboxgl-js 根据某些标准隐藏或显示地图标记的地图。

隐藏标记按预期工作，但是当我希望标记再次显示时，它们会闪烁几毫秒然后再次消失，而地图会在它们再次出现之前隐藏底层上的标签（街道名称等）。

观看此视频：https://streamable.com/debcp

查看此代码笔：https://codepen.io/jakobfuchs/details/VRRgJO

我得出的结论是，这是由于在标记符号层上设置了'icon-allow-overlap': true。

有什么建议我可以如何保持该设置并避免闪烁？

奇怪的是，这种情况并非 100% 发生，而是大约 95% 发生。

代码示例：

标记层：

  map.addLayer({
    id: 'property-layer',
    type: 'symbol',
    source: 'properties',
    filter: ['!has', 'point_count'],
    layout: {
      'symbol-placement': 'point',
      'icon-image': 'marker',
      'icon-size': 1,
      'icon-anchor': 'bottom',
      'icon-allow-overlap': true,
    }
  });

过滤代码：

  const filterToggle = document.getElementById('filterToggle');
  filterToggle.addEventListener('change', function(e) {
    if (openPopup) {
      openPopup.remove();
      openPopup = '';
    }
    let properties;
    if (this.checked) {
      properties = {
        type: "FeatureCollection",
        features: features.features.filter((property) => property.properties.availability === 'Available')
      }
    } else {
      properties = features;
    }
    map.getSource('properties').setData(properties);
  });

【问题讨论】：

我不一定知道这是罪魁祸首，但每次使用切换时您是否都在重写源代码？您可能会发现更简单的方法是使用setFeatureState。（见这个例子：docs.mapbox.com/mapbox-gl-js/example/hover-styles）

标签： javascript mapbox mapbox-gl-js mapbox-gl mapbox-marker

【解决方案1】：

我遇到了同样的问题，我的解决方案是使用 icon-ignore-placement 而不是 icon-allow-overlap，它仍然没有任何问题

您可以在此处找到该文档：https://docs.mapbox.com/mapbox-gl-js/style-spec/#layout-symbol-icon-ignore-placement

希望这会有所帮助，谢谢！

【讨论】：