在数据数组的反应组件中使用带有过滤器的地图 - TypeScript

在 TypeScript 中，我们可以使用反应组件来创建交互式应用程序。经常需要使用地图，并且需要根据数据数组中的值过滤显示。在本文中，我们将学习如何在数据数组的反应组件中使用带有过滤器的地图。

步骤 1：安装依赖

首先，我们需要安装依赖项。我们将使用 react-leaflet 库创建地图，并使用 leaflet 库渲染地图数据。打开终端并运行以下命令：

npm install react-leaflet leaflet @types/leaflet

步骤 2：导入依赖

在组件中导入所需的库：

import React, { useState } from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import L from "leaflet";

我们还需要创建样式：

/* map container */
#mapid {
  height: 400px;
}

/* marker icon */
.leaflet-marker-icon {
  background-image: url("https://leafletjs.com/examples/custom-icons/leaf-green.png");
  background-size: cover;
}

步骤 3：创建数据和过滤器

现在，我们需要创建数据数组和一个过滤器。数据将包含地点的名称、位置和类型。过滤器将基于类型过滤数据。我们将使用钩子来存储过滤器的当前值：

const locations = [
  {
    name: "Location 1",
    position: { lat: 51.505, lng: -0.09 },
    type: "type1"
  },
  {
    name: "Location 2",
    position: { lat: 51.507, lng: -0.11 },
    type: "type2"
  },
  {
    name: "Location 3",
    position: { lat: 51.51, lng: -0.12 },
    type: "type1"
  },
  {
    name: "Location 4",
    position: { lat: 51.512, lng: -0.1 },
    type: "type2"
  }
];

function App() {
  const [filter, setFilter] = useState<string>("all");
}

步骤 4：创建地图和过滤器

现在，我们需要创建地图。我们将使用 MapContainer 组件。我们还需要创建一个下拉菜单，以在地图上过滤不同类型的地点：

return (
  <div>
    <select value={filter} onChange={(e) => setFilter(e.target.value)}>
      <option value="all">All</option>
      <option value="type1">Type 1</option>
      <option value="type2">Type 2</option>
    </select>
    <MapContainer id="mapid" center={[51.505, -0.09]} zoom={13}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      {locations
        .filter((location) => filter === "all" || location.type === filter)
        .map((location, i) => (
          <Marker
            key={i}
            position={location.position}
            icon={L.icon({
              iconUrl: "https://leafletjs.com/examples/custom-icons/leaf-green.png",
              iconSize: [38, 95],
              iconAnchor: [22, 94],
              popupAnchor: [-3, -76],
              shadowUrl: "https://leafletjs.com/examples/custom-icons/leaf-shadow.png",
              shadowSize: [50, 64],
              shadowAnchor: [4, 62]
            })}
          >
            <Popup>{location.name}</Popup>
          </Marker>
        ))}
    </MapContainer>
  </div>
);

在上面的代码中，我们首先创建下拉菜单，然后创建地图。我们对 locations 数组应用了一个过滤器，以根据选择的类型筛选显示的位置。最后，我们遍历过滤的位置，并在地图上创建标记。

步骤 5：测试

现在是时候测试我们的应用程序了。运行以下命令来启动应用程序：

npm start

在浏览器中打开 http://localhost:3000/，以查看应用程序。选择不同的选项以过滤不同类型的位置。

总结

在本文中，我们学习了如何在数据数组的反应组件中使用带有过滤器的地图。我们通过创建一个来自静态数据的数组，并使用钩子来保持选择的过滤类型。我们还学习了如何使用 react-leaflet 库和 leaflet 库创建地图。