setFeatureState 不更新 mapbox 中的值？

Question

我正在尝试在 mapbox 中单击圆圈时更新圆圈的笔划。我已经关注了 mapbox 的文档，但它似乎没有更新值。控制台也很清楚。

  t.map.addLayer({
    id: id,
    type: 'circle',
    source: id,
    paint: {
      'circle-radius': 100,
      'circle-opacity': 0.5,
      'circle-color': 'rgba(20, 106, 181, 0.11)',
      'circle-stroke-color': [
        'case', ['boolean', ['feature-state', 'clicked'], false],
          'rgba(20, 106, 181, 0.11)',
          '#146ab5',
      ],
      'circle-stroke-width': [
        'case', ['boolean', ['feature-state', 'clicked'], false],
          2,
          0,
      ],
    },
  });

我正在尝试更新状态：

  t.map.on('click', id, (e) => {
    t.map.setFeatureState({ source: id, id: id }, { clicked: true });
  });

我已经逐步完成，但值没有更新。谢谢

Answer 1

查看您的示例，您的 ID 引用似乎不正确。对于图层中的每个元素，必须存在一个唯一的 ID，这可以很容易地添加到源数据中。

t.map.addSource('sourceId', {
    'type': 'dataType',
    'data': yourData,
    'generateId': true // This ensures that all features have unique IDs
});

此外，添加后您必须在每个 setFeatureState 更新中找到并引用此唯一 ID：

t.map.on('click', id, (e) => {
    let uniqueId = e.features[0]['id'];
    t.map.setFeatureState({ source: id, id: uniqueId }, { clicked: true });
  });

我自己现在也在为类似的问题苦苦挣扎，希望这个意见对您有所帮助（我绝不是 MapBox GL JS 的专家）。以上示例摘自MapBox文档中的Interactive Hover Effects, and Create Hover Effect

setFeatureState 不更新 mapbox 中的值？

setFeatureState not updating value in mapbox?

javascript

mapbox

vue.js