教程：React ⚛ + Leaflet 🗺
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
大家好，👋 今天我想和大家分享一个关于如何在 React 中使用 Leaflet 的小教程。
为此，我们将制作一个网络应用程序，以便查找巴黎的一些旅游景点！🇫🇷 🥖
您可以访问以下链接查看演示：https://react-leaflet-example.netlify.app/ 🚀
Leaflet是什么？
Leaflet 是最流行的开源交互式地图库。你可以给地图添加标记，绘制圆形、方形、直线等等，功能丰富，趣味十足。更多信息请查看文档：https://leafletjs.com/
我们将要做的事情：📝
- 创建项目并安装所有依赖项
- 显示一张以巴黎为中心的地图
- 在地图上显示标记
- 在地图上添加新标记
- 在标记点之间画线。
为了便于理解，本文仅展示部分代码，但欢迎访问GitHub 仓库查看完整源代码。
安装⚙️
首先，让我们为这个项目创建并安装依赖项。
npx create-react-app react-leaflet-example --template typescript
npm i -S leaflet react-leaflet
- 安装类型（如果您不使用 TypeScript，则此项为可选）：
npm i -D @types/leaflet
显示地图🗺
现在我们已经安装了所有需要的组件，接下来创建一个名为 Map 的新组件，并添加文档中的初始代码。
它使用了 MapContainer 组件，我们需要向它传递一些坐标，以便将地图中心定位到我们的城市。
TileLayer 用于在地图上显示版权信息。
import { MapContainer, TileLayer } from "react-leaflet";
const Map = () => {
const defaultPosition: LatLngExpression = [48.864716, 2.349]; // Paris position
return (
<div className="map__container">
<MapContainer
center={defaultPosition}
zoom={13}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</MapContainer>
</div>
);
};
在地图上显示标记📍
我们的地图上还没有任何地点。所以让我们添加一些默认地点。为此，我预先创建了一个地点数组，并赋予它们以下属性：
import { LatLngExpression } from "leaflet";
export interface Place {
id: string;
picture: string;
title: string;
description: string;
seeMoreLink: string;
position: LatLngExpression;
}
在我的应用中，我使用 Redux 来管理地点状态、显示预览模态框等等。这里我省略了如何使用 react-redux 创建/使用 store 的讲解。你可以在GitHub 仓库中查看代码。
现在我们导入地点数组，并为每个地点使用 Marker 组件。Marker 组件需要将地点的位置作为 props 传递。我们还可以处理诸如点击之类的事件，以便显示地点的描述。
查看更多关于Marker 组件的选项。
import { MapContainer, TileLayer, Marker, Tooltip } from "react-leaflet";
import { LatLngExpression } from "leaflet";
const Map = ({places}) => {
const defaultPosition: LatLngExpression = [48.864716, 2.349]; // Paris position
const showPreview = (place) => {
// show place's description
}
return (
<div className="map__container">
<MapContainer
center={defaultPosition}
zoom={13}
>
{places.map((place: Place) => (
<Marker
key={place.id}
position={place.position} // 👈
eventHandlers={{ click: () => showPreview(place) }}
>
{/* show place's title on hover the marker */}
<Tooltip>{place.title}</Tooltip>
</Marker>
))}
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</MapContainer>
</div>
);
};
在地图上添加新标记 ➕📍
太棒了！现在地图上已经有了标记，但是如何动态添加新地点呢？比如说，我们想在点击地图时添加一个新地点。
为了在点击时显示新地点，我们将创建一个名为 AddMarker 的新组件来处理此操作并更新 store。
在这个组件中，我们将使用useMapEvents hook。
import { MapContainer, TileLayer, Marker, Tooltip, useMapEvents } from "react-leaflet";
const AddMarker = () => {
const [position, setPosition] = useState(null);
useMapEvents({
click: (e) => {
setPosition(e.latlng); // 👈 add marker
/* CODE TO ADD NEW PLACE TO STORE (check the source code) */
},
});
return position === null ? null : (
<Marker position={position}></Marker>
);
};
const Map = ({places}) => {
/* ... */
return (
<div className="map__container">
<MapContainer
center={defaultPosition}
zoom={13}
>
{/* ... */}
<AddMarker/>
{/* ... */}
</MapContainer>
</div>
);
};
既然我们游览了巴黎，那就顺便把巴黎圣日耳曼队的主场也加上吧⚽️
点击后，就会显示添加新地点的表单：
保存后，新地点将添加到我们的地图中🎉。
画线✏️
现在我们已经学会了如何在地图上添加标记，让我们尝试在每个标记之间画一条线。
为此，我们将使用折线组件。
该组件需要一个位置列表来绘制线条。所以，让我们创建一个包含位置信息的数组。
我将使用 useEffect 仅在位置发生变化时创建此数组。
const Map = ({ places }) => {
const [polyLineProps, setPolyLineProps] = useState([]);
useEffect(() => {
setPolyLineProps(places.reduce((prev: LatLngExpression[], curr: Place) => {
prev.push(curr.position);
return prev
;
}, []))
}, [places]);
return (
<MapContainer
center={defaultPosition}
zoom={13}
scrollWheelZoom={false}
style={{ height: "100vh" }}
zoomControl={false}
>
{/* ... */}
<Polyline positions={polyLineProps} /> {/* 👈 */}
{/* ... */}
</ MapContainer>
)
}
结论
本文成功地展示了一张地图并与之进行了交互，例如动态添加标记和绘制线条。您还可以尝试绘制圆形或矩形，进一步探索地图的奥秘。
希望对你们有所帮助。
感谢阅读。😇
源代码可在Github上找到👈