react中多个 mapboxgl pupups 怎么删除

在 React 中删除多个 Mapbox GL popups 可以按照以下步骤进行：

1. 给每个 popup 添加一个唯一的 ID，可以使用 uuid 库生成一个唯一的 ID。

2. 将所有的 popups 存储在一个数组中，数组中每个元素都包含一个唯一的 ID 和 popup 的信息。

3. 当需要删除某个 popup 时，可以根据其唯一的 ID 找到相应的 popup。

4. 使用 Mapbox GL 的 `remove` 方法将该 popup 从地图中删除。

5. 在数组中删除该 popup 的信息。

以下是示例代码：

import React, { useState, useEffect } from "react";
import mapboxgl from "mapbox-gl";
import { v4 as uuidv4 } from "uuid";

mapboxgl.accessToken = "your-mapbox-token";

function Map() {
  const [map, setMap] = useState(null);
  const [popups, setPopups] = useState([]);

  useEffect(() => {
    const newMap = new mapboxgl.Map({
      container: "map",
      style: "mapbox://styles/mapbox/streets-v11",
      center: [-122.4194, 37.7749],
      zoom: 12,
    });

    setMap(newMap);

    return () => {
      newMap.remove();
    };
  }, []);

  const addPopup = () => {
    const popup = new mapboxgl.Popup({
      closeButton: false,
      closeOnClick: false,
    })
      .setLngLat([-122.4194, 37.7749])
      .setHTML("<h1>Hello World!</h1>")
      .addTo(map);

    const id = uuidv4();
    setPopups([...popups, { id, popup }]);
  };

  const removePopup = (id) => {
    const popupInfo = popups.find((popup) => popup.id === id);
    if (popupInfo) {
      popupInfo.popup.remove();
      setPopups(popups.filter((popup) => popup.id !== id));
    }
  };

  return (
    <div>
      <button onClick={addPopup}>Add Popup</button>
      <div id="map" style={{ width: "100%", height: "400px" }}></div>
    </div>
  );
}

export default Map;

在上面的示例代码中，我们使用 uuid 库生成唯一的 ID，将每个 popup 的 ID 和 popup 对象存储在一个数组中。当需要删除某个 popup 时，调用 `removePopup` 方法，并传入该 popup 的唯一 ID，该方法会根据该 ID 找到相应的 popup 并从地图中删除。