問題描述

TLDR；有沒有辦法使用 react-leaflet 和 react-leaflet-markercluster 從標記簇中清除所有標記?

是的，有！我剛剛向 MarkerClusterGroup 添加了一個關鍵道具，正如@SethLutske 推薦的那樣.現在，每次重新渲染地圖時，之前的標記都會被移除，只保留新的標記.

Yes, there is! I just added a key prop to the MarkerClusterGroup, as @SethLutske recommended. Now, every time there is a re-render of the map, the previous markers are removed and only the new ones remain.

<MarkerClusterGroup
    key={uuidv4()}  
    spiderfyDistanceMultiplier={1}
    showCoverageOnHover={true}
>

我在我所在州的公安機關工作.有一個 API 可以從我所在州的所需城市獲取監控攝像頭的集合.我正在使用 React PWA 來檢索這些攝像頭的圖像，因此警察可以使用我的應用程序進行實時監控.警察在系統中進行身份驗證，使用表格按城市過濾攝像機，結果顯示在地圖中，地圖上帶有指示每個攝像機位置的標記.觸摸標記時，會顯示一個彈出窗口，其中包含該攝像機的信息，以及一個按鈕，觸摸時會在新頁面中顯示攝像機圖像.

I work in the Public Security agency of my state. There is an API that gets a collection of monitoring cameras from a desired city of my State. I'm working in a React PWA that retrieves the image of these cameras, so the police can use my app for live monitoring. The policemen authenticate into the system, filter the cameras by their city using a form, and the result is shown in a map with markers that indicate the position of each camera. When touching a marker, a popup is shown with information of that camera and a button that shows the camera image in a new page when touched.

地圖標記和彈出窗口

我選擇 Leaflet 和 react-leaflet 進行地圖渲染，并選擇 react-leaflet-markercluster 來對彼此相鄰的標記進行分組.我有一個小問題:如果用戶按城市過濾相機，然后他返回表單并決定按不同城市過濾，我想要發生的行為是:

I chose Leaflet and react-leaflet for the map rendering, and react-leaflet-markercluster to group the markers that are next each other. I'm having a little problem: if an user filters cameras by a city, then he returns to the form and decides to filter by a different city, the behavior that I wanted to happen is:

• 清除上一個被過濾城市的所有標記；
• 顯示當前城市的所有標記；

但發生的情況是:前一個城市的標記仍保留在地圖中，彈出窗口為空.

But what happens is this: the markers from the previous city remain in the map, with an empty popup.

不同城市的標記組

我的目標:我想在添加新城市的標記之前清除過去的城市標記！

這是我的 MapContainer.盡管存在我提到的錯誤，但它運行良好.

Here is how it is my MapContainer. It is working quite well, despite of the bug I mentioned.

      <MapContainer            
          center={[-26.627817, -51.196288]}
          zoom={6}
          scrollWheelZoom={false}
          style={{ height: '100vh', width: '100wh' }}
      >
        {//<ClearLayers /> this clears the entire map, even the tile layer, leaving it blank
        }
          <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <MarkerClusterGroup
              spiderfyDistanceMultiplier={1}
              showCoverageOnHover={false}
          >
              {cameras.map((camera: Camera) => (
                  <Marker icon={iconBTV} key={camera.name} position={[camera.latitude, camera.longitude]}>
                      <Popup>
                        {camera.name} <br /> {camera.description} <br />
                        <Link
                          to={{
                            pathname: "/cameraScreen",
                          }}
                          style={{ textDecoration: 'none' }}
                        >
                          <button
                            style={{marginTop: "1rem"}}
                            onClick={(e) => insertLog(e, camera)}
                          >Ver camera</button>
                        </Link>                            
                      </Popup>
                  </Marker>
              ))}
          </MarkerClusterGroup>
      </MapContainer>

我嘗試使用此功能，但它沒有按我的意愿工作.它會破壞地圖，使其完全空白.

I tried using this function, but it doesn't work as I wanted. It bugs the map, leaving it completely blank.

function ClearLayers() {
  const map = useMap();
  map.eachLayer(function (layer) {
    map.removeLayer(layer);
  });
  return null
}

我在這里搜索并接近解決方案:我能夠通過使用 Leaflet 的核心 API 并留下 react-leaflet-markercluster 包裝器來清除過去的城市標記 如本答案所示.在向 MCG 添加新標記之前，我確實執行了 clearLayers()，這樣就可以了.這是我嘗試做的:

I've searched in here and came close to a resolution: I was able to clear the past city markers by using Leaflet's core API and leaving behind react-leaflet-markercluster wrapper as shown in this answer. I do execute clearLayers() before adding new markers to the MCG, and that does the trick. Here's what I tried to do:

    import * as L from 'leaflet';
    import 'leaflet.markercluster';

    import { useMap } from 'react-leaflet';
    import { useContext, useEffect } from 'react';
    import { Link } from 'react-router-dom';
    import CameraContext from '../../contexts/CameraContext';

    const mcg = L.markerClusterGroup({
        chunkedLoading: true,
        showCoverageOnHover: false,
    });

    const MarkerCluster = ({ markers, icon }) => {
        const { setCamera } = useContext(CameraContext);

        const inserirLog = (e, camera) => {
            setCamera(camera);
            var ajax_log = new XMLHttpRequest();
            ajax_log.open('GET', `https://fakeurl.sc.gov.br/api/ajax-log-bemtevi.php?camera=${camera.nome}&servidor=${camera.servidor}`);
            ajax_log.send();
        }   

        console.log(markers);
        const map = useMap();
        useEffect(() => {
            mcg.clearLayers();
            const markerList = markers.map((camera) => {
                return L.marker(new L.LatLng(camera.latitude, camera.longitude), {
                    icon: icon,
                }).bindPopup(
                    `
                    ${camera.name} <br /> ${camera.description} <br />
                    <Link
                    to={{
                        pathname: "/cameraScreen",
                    }}
                    style={{ textDecoration: 'none' }}
                    >
                    <button
                        style={{marginTop: "1rem"}}
                        onClick={(e) => insertLog(e, camera)}
                    >Watch camera</button>
                    </Link>
                    `
                );
            });
            mcg.addLayers(markerList);
            map.fitBounds(mcg.getBounds());
            map.addLayer(mcg);
        }, [markers, icon, map]);

        return null;
    };

    export default MarkerCluster;

通過這樣做，我無法在 Popup 中注入 JSX，也無法使用 react-router-dom 中的 Link 組件.我也無法將相機對象保存在上下文中以在下一頁中進一步使用它.所以我結束了堅持我當前的代碼，這是有效的，盡管有這個無法清除過去的城市標記".錯誤.

By doing that, I can't inject JSX inside the Popup, and can't use the Link component from react-router-dom. I also couldn't save the camera object in a context to use it further in the next page. So I ended sticking to my current code, that is working, despite of having this "can't clear past city markers" bug.

所以我想在使用 React 組件用于 Leaflet 地圖和 Marker Cluster 時有一種方法可以清除過去的城市標記.如果 MarkerClusterGroup 有一個鉤子，就像 Leaflet 地圖有一個鉤子一樣，我想這會更容易做到:我需要做的就是這樣簡單的事情:

So I'd like to have a way to clear the past city markers when using the React components for Leaflet map and Marker Cluster. If there was a hook for the MarkerClusterGroup like there is one for the Leaflet map, I guess this would be easier to do: all I would need to do is something simple as this:

    const markercluster = useMarkerClusterGroup();
    markercluster.clearLayers();

但是，據我所知，react-leaflet-markercluster 中沒有鉤子.

But, as long as I know, there aren't hooks in react-leaflet-markercluster.

推薦答案

你可以在 MarkerClusterGroup 中添加一個 key 屬性，當你希望集群成為完全重新渲染.

You can add a key prop to MarkerClusterGroup, and change it when you want the cluster to be completely rerendered.

<MarkerClusterGroup
  key={somekey}
  spiderfyDistanceMultiplier={1}
  showCoverageOnHover={false}
>

我不確定是什么邏輯觸發了標記的更改，但在相同的邏輯中，當標記更改時，會生成一個新的唯一值(無論是遞增的簡單計數器，還是新的 uuid)，將 key 設置為該新值，整個組件應卸載并重新安裝.雖然如果有大量標記，這對性能來說并不是很好，但這聽起來像是您正在嘗試做的事情.

I'm not sure what logic is triggering the markers to change, but within that same logic, when the markers change, generate a new unique value (whether its a simple counter that increments, or a new uuid), set the key to that new value, and the entire component should unmount and remount. While this isn't great for performance if there are a huge number of markers, it sounds like what you're trying to do.

這篇關于react-leaflet:在渲染新標記之前清除標記簇的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！