javascript - 使用 Mapbox 更新 Prop 的正确方法

Question

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

Error: There is already a source with this 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。

如果我理解正确，你想达到什么目的，那么你应该将 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 并在 map 加载完成后设置 mapIsLoaded 状态变量。

现在您可以在加载 map 后处理 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>