Question

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

不确定它是否有用，但是这是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);

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

有什么想法吗？（使用Mapbox GL JS）

Answer 1

您可以在地图事件监听器中使用Map#setLayoutProperty method，并传递：

'markers'作为layerId参数
icon-image作为要设置的layout property的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/

的此页面上找到

在事件上更改Mapbox图标

2 个答案: