React-Leaflet 多個圖層中的相同標記

Question

如何在 react-leaflet 的多個圖層中添加相同的標記？

例如：

我有一個應用程序可以搜索帶有反應 leaflet 的餐廳，每個標記都是不同的餐廳。 我想要一個LayerControl按類型和評級（1..5 星）過濾它們。

我可以有一個LayerControl.Overlay來按類型（例如自助餐）過濾，但我也想按評級過濾。 如果我有一家餐廳 type='buffet' 和 rating=4，我該怎么做才能僅在檢查自助餐類型和 4 星評級時顯示標記。

這是我當前僅按類型過濾的代碼。

我正在使用 react-leaflet v3。

Answer 1

您用於創建各種圖層組來管理過濾器的方法並不是 go 的最佳方法。 我采取了另一種方法。

使用所需的過濾器創建 state object

在您的應用程序中，創建一個包含潛在過濾器的 state 變量。 我們將其設置為最初包含所有選項：

const restaurantTypes = ["Family Style", "Buffet", "Fast Food", "Cafe"];
const ratings = [1, 2, 3, 4, 5];

function App() {
  const [filters, setFilters] = useState({
    restaurantTypes,
    ratings
  });
  ...
}

自定義過濾器組件

我選擇創建一個自定義組件，它與 leaflet 層控件基本完全相同的 html 標記，但沒有任何功能。 您可以在此答案末尾查看沙箱，但它所做的只是管理我們剛剛定義的filters state 變量。 這是一個簡短的摘要：

const FilterControl = ({ filters, setFilters }) => {
  return (
    <div>
      <h3>Type</h3>
      {restaurantTypes.map((type) => (
        <label>
          <input
            type="checkbox"
            checked={filters.restaurantTypes.includes(type)}
            onClick={(e) => {
              if (filters.restaurantTypes.includes(type)) {
                setFilters((prevFilters) => ({
                  ...prevFilters,
                  restaurantTypes: prevFilters.restaurantTypes.filter(
                    (f) => f !== type
                  )
                }));
              } else {
                setFilters((prevFilters) => ({
                  ...prevFilters,
                  restaurantTypes: [...prevFilters.restaurantTypes, type]
                }));
              }
            }}
          />
          <span>{type}/span>
        </label>
      ))}
      <h3>Rating</h3>
      {ratings.map((rating) => (
        // same as above but for ratings
      ))}
    </div>
  );
};

所以現在您的FilterControl可以巧妙地管理filters的 state 了。

根據過濾器過濾標記

現在您所要做的就是在您的restaurants數據集上執行 map，並且只渲染其type和rating在當前filters中的標記：

function App() {
  const [filters, setFilters] = useState({
    restaurantTypes,
    ratings
  });
  return (
    <MapContainer ... >
      <TileLayer ... />
      <FilterControl filters={filters} setFilters={setFilters} />
      {restaurants.map((restaurant) => {
        if (
          filters.restaurantTypes.includes(restaurant.type) &&
          filters.ratings.includes(restaurant.rating)
        ) {
          return <Marker position={restaurant.coordinates} />
        }
        return null;
      })}
    </MapContainer>
  );
}

工作代碼框