Question

使用Mapbox删除和添加源/图层的正确方法是什么？我正在使用React，在更新源data道具时遇到问题并出现错误。据我在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>

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

1 个答案: