Javascript 使用Mapbox更新道具的正确方法

使用Mapbox删除和添加源/图层的正确方法是什么？我正在使用React，在更新源

数据
道具时出现问题并出错。据我在Mapbox
removeSource
的文档中所读到的，在再次添加它之前应该删除它，但它不适用于组件更新

错误：已存在具有此ID的源

问题是在组件生命周期中多次调用
map.addSource

如果我理解正确，那么您应该将map
load
事件处理程序移动到
componentDidMount
方法：

componentDidMount() {
  const { data } = this.props;

  const map = new mapboxgl.Map(config);
  map.addControl(Draw, 'top-left');

  map.once("load", (e) => {
    map.addSource("locations", {
        type: "geojson",
        data: data
    });

    this.setState({ mapIsLoaded: true });
  });

  this.map = map;
}

注意
map.once
的用法，而不是
map.on
上的
MapsLoaded
状态变量，在完成映射加载后

现在，在加载映射后，您可以在
componentdiddupdate
上处理源代码更新：

componentDidUpdate(prevProps) {
  const { data } = this.props;
  const { mapIsLoaded } = this.state;

  if (!mapIsLoaded) {
    return;
  }

  if (data !== prevProps.data) {
    this.map.getSource("locations").setData(data);
  }
}

就这样


顺便说一下，我是这本书的作者。该项目旨在尽可能接近Mapbox GL JS API

例如，以下是使用库重写代码的方法：

<MapGL mapStyle='mapbox://styles/mapbox/light-v9'>
  <Source id='locations' type='geojson' data={data} />
  <Layer
    id='locations'
    type='circle'
    source='locations'
    paint={{
      'circle-radius': 6,
      'circle-color': '#1978c8'
    }}
  />
  <Draw />
</MapGL>



<MapGL mapStyle='mapbox://styles/mapbox/light-v9'>
  <Source id='locations' type='geojson' data={data} />
  <Layer
    id='locations'
    type='circle'
    source='locations'
    paint={{
      'circle-radius': 6,
      'circle-color': '#1978c8'
    }}
  />
  <Draw />
</MapGL>