如果你正在开发一个需要在网页上展示地图的应用，那么 Leaflet 是一个非常好的选择。它是一个轻量级、灵活且易于使用的开源 JavaScript 库，可以轻松创建互动式地图。同时，React 也是一个非常流行的前端框架，它将组件化和声明式编程引入到了前端开发中，大大提高了代码的可维护性和复用性。
但是，在 React 中使用 Leaflet 并不像我们想象的那么简单。因为 Leaflet 是以全局对象的方式引入的，而 React 强调组件化，使得我们需要通过一些技巧来优雅地结合两者。本文将详细介绍如何使用 React 和 Leaflet 创建互动式地图，并提供一些例子以供参考。
安装和配置 Leaflet
首先，我们需要安装 Leaflet。可以通过 npm 或者从官网下载源码包进行安装。这里我们采用 npm 进行安装：
--- ------- -------
接下来，我们在 React 的组件中引入并初始化 Leaflet。
------ ------ - --------- - ---- --------
------ - ---- ----------
----- --- ------- --------- -
------------------- -
-- -----
----- --- - ----------------------------- ------- ----
-- ----
----------------------------------------------------------------- -
------------ ---- ---- - ------------- --------------
-------- ---
--------------
-
-------- -
------ ---- -------- -------- ------- ------- -- ---
-
-
------ ------- ----在上面的代码中，我们在 componentDidMount 生命周期中初始化了 Leaflet，并在 render 方法中创建了一个 <div> 元素用于显示地图。通过 L.map() 方法可以创建一个 Leaflet 地图对象，并通过 setView() 方法设置地图的中心点和缩放级别。接着，我们添加了一个图层，这里使用了OpenStreetMap提供的瓦片图层作为底图。
在 React 中使用 Leaflet 组件
现在我们已经成功地将 Leaflet 引入到了 React 中。但是如果我们直接在组件的 render 方法中写 Leaflet 的 HTML 和 JavaScript 代码，就会使得组件变得难以维护和理解。因此，我们可以将 Leaflet 封装成一个 React 组件。
------ ------ - --------- - ---- --------
------ - ---- ----------
----- ---------- ------- --------- -
------------------- -
----- - ------- ---- - - -----------
-------- - ------------------------------------ ------
----------------------------------------------------------------- -
------------ ---- ---- - ------------- --------------
-------- ---
-------------------
-
-------- -
------ ---- --------- -------- ------- ------- -- ---
-
-
------ ------- -----------在上面的代码中，我们创建了一个名为 LeafletMap 的 React 组件。在 componentDidMount 生命周期中，我们首先获取到组件的属性中传入的地图中心点和缩放级别（this.props.center 和 this.props.zoom），然后创建 Leaflet 地图对象，并通过 setView() 方法设置中心点和缩放级别。最后，我们添加了与之前相同的瓦片图层。
在 render 方法中，我们返回了一个 <div> 元素，并将其绑定到组件的 ref 属性上。这样可以让我们在 componentDidMount 方法中获取到这个元素，并将其
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30025