如何使用 React 和 Leaflet 创建地图

Desknumber

Leaflet是一个非常强大的工具，我们可以创建很多不同类型的地图。本教程将帮助您了解如何在 React 和 Vanilla JS 的帮助下创建高级地图。 从 CSV 或 JSON 文件中获取信息不仅复杂，而且乏味。以视觉辅助的形式表示相同的数据更简单。在本文中，我们将在地图上显示旧金山消防局响应的非医疗火灾事件的位置。 在本教程中，我们将使用以下工具： 传单 交互式地图的 JavaScript 库 React 用于构建用户界面的 JavaScript 库 React-Leaflet Leaflet 地图的 React 组件 什么是传单？  拥有约 27k 颗星，是领先的移动友好型交互式地图开源 JavaScript 库之一。

它在现代浏览器上利用了 HTML5 和 CSS3，同时也可以在旧浏览器上访问。总而言之，它支持所有主要的桌面和移动平台。 传单重约 38KB，非常适合基本的事情。对于其他扩展，可以使用大量 电子邮件营销列表 插件进行扩展。 许多报纸，包括 NPR、华盛顿邮报、波士顿环球报等，以及其他组织都使用 Leaflet 进行深度数据项目。 例如，《旧金山纪事报》开展了一个名为 加州火灾跟踪器 的项目 - 一个交互式地图，提供有关各地燃烧的野火的信息加利福尼亚州，使用传单。他们不仅查明了火灾的起源，还向我们展示了火灾的轨迹。



由于这是一个介绍性教程，我们将仅标记火灾事件的位置并显示有关它的一些详细信息。 在开始 React 之前，我们先了解一下 Leaflet 的基础知识。为此，我们将创建一个简单的示例，在其中设置传单地图、使用标记和弹出窗口。 认识“TypeScript 50 课”，这是我们全新的 TypeScript 指南。包含详细的代码演练、实践示例和常见问题。对于了解足够的 JavaScript 的开发者来说是危险的。 跳转至目录↬ 功能面板 首先，我们创建 和  我们的 /project 文件夹中的文件，并将后者链接到我们的文件。