setFeatureState 不更新地图框中的值？

Question

I am trying to update the stroke of a circle when a circle is clicked in mapbox. I've followed the documentation from mapbox but it doesnt seem to be updating the values. Console is all clear too.

  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,
      ],
    },
  });

Im then trying to update the state:

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

I've slowely stepped through but the values do not update. Thanks

Answer 1

Reviewing your example it appears that your id reference is not correct. For each element in the layer, a unique ID must exist, this can easily be added to the source data.

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

Furthermore once this has been added you must then locate and reference this unique id in each setFeatureState update:

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

I myself am struggling away at a similar issue right now, hope that this input has helped (I am by no means an expert with MapBox GL JS). The above examples are adopted from Interactive Hover Effects , and Create Hover Effect in the MapBox documentation.