更改事件上的 Mapbox 图标

Question

我正在向 mapbox 中的图层添加一些circle图标，效果很好，但我需要在事件发生后更新特定 geoLoc 的图标（更改图标）。 现在事件部分不是问题，但我不知道如何更改图标（在初始化 map 之后，无需重新初始化地图）。

不确定它是否有用，但 geoJSON 的外观如下：

"type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.341896,
          53.710173
        ]
      },
      "properties": {
        "icon": "circle",
        "id": "392"
      }
    }, ... {} ... {}
  ]
}

以及我如何初始化样式层

this.map.addLayer({
    'id': 'markers',
    'type': 'symbol',
    'source': 'source-markers',
    'layout': {
        'icon-image': '{icon}-15-theme',
        'icon-size': 1,
        'icon-allow-overlap': true,
    },
    'paint': {
        'icon-color': '#00a19a'
    },
    'filter': ['all', ['!has', 'point_count']],
}, addBelowLayer);

简而言之，每组坐标都有一个表示其位置的圆圈，当我单击圆圈时，它应该放大并将形状更改为正方形。 放大有效，但我不知道如何将图标更改为正方形。 我在 map 样式中添加了一个方形图标，但不知道如何进行切换。

有任何想法吗？ （使用 Mapbox GL JS）

Answer 1

您可以在地图事件侦听器中使用Map#setLayoutProperty方法，传递：

• 'markers'作为layerId参数，
• icon-image作为要设置的布局属性的name参数，以及
• 精灵表中方形图像的名称作为value参数。

所以，像这样：

map.setLayoutProperty('markers', 'icon-image', 'square-15-theme');

Answer 2

用户@adriana-babakanian 提供了一个有用的想法，所以我以此为基础。 我为每个地理位置创建了一个新图层，然后在事件中我只是使用map.setLayoutProperty方法通过传递 id 来显示或隐藏所需的图层。

map.setLayoutProperty('focus-markers-' + id, 'visibility', 'visible');

更多细节可以在 mapbox api https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/的这个页面上找到

Answer 3

与其他人的建议类似，您可以使用map.setLayoutProperty - 但是，我认为您不必将每个图标都放在单独的图层上（出于性能原因，我认为这很糟糕）。 像这样的东西应该工作：

map.setLayoutProperty('markers', 'icon-image', {
      property: 'id',
      type: 'categorical',
      stops: [
       [clickedId, 'icon-square'],
      ],
      default: 'icon-round,
    });

您应该能够使用map.queryRenderedFeatures clickedId 希望对您或其他人有所帮助