使用 Mapbox 更新 props 的正确方法

Question

使用 Mapbox 删除和添加源/图层的正确方法是什么？data我正在使用 React，并且在更新源属性时遇到问题并收到错误。据我在 Mapbox 的文档中读到的内容，removeSource应该在再次添加之前将其删除，但它不适用于组件更新。

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

  componentDidMount() {
    const { data } = this.props;
    this.map = new mapboxgl.Map(config);
  }

  componentWillUnmount() {
    const map = this.map;
    map.remove();
    map.removeControl(Draw, 'top-left');
  }


  shouldComponentUpdate(props, nextProps) {
    const { data } = props;
    if (JSON.stringify(data) !== JSON.stringify(nextProps.data)) {
      return true;
    }
    return false;
  }


  componentDidUpdate(prevProps) {
    const { data } = this.props;
    if (JSON.stringify(data) !== JSON.stringify(prevProps.data)) {
      this.fetchMap();
    }
  }

  fetchMap() {
        const map = this.map;
        const { data } = this.props;
        map.addControl(Draw, 'top-left');

        map.on("load", (e) => {
            if (data.features !== null) {

                if (map.getSource("locations")) {
                    map.removeSource("locations");
                }

                map.addSource("locations", {
                    type: "geojson",
                    data: data
                });
            }
        })
  }

Answer 1

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

如果我理解正确，您要实现什么目标，那么您应该将地图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和设置mapIsLoaded状态变量。

现在您可以在componentDidUpdate加载地图后处理源更新：

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

  if (!mapIsLoaded) {
    return;
  }

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

就是这样。

顺便说一下，我是React Component Library for Mapbox GL JS 的作者。该项目旨在尽可能接近 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>