更改事件上的 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 希望對您或其他人有所幫助