react leaflet_如何使用Leaflet在React中轻松构建地图应用

react leaflet

Mapping is hard, but spinning up a new app that renders maps doesn’t have to be. Here’s how you can easily get started working with maps in a new React app.

映射很困难，但是不必开发一个新的可渲染地图的应用程序。 这是您可以轻松地开始在新的React应用程序中使用地图的方法。

不是您的汽车座椅下方的AAA地图 (Not that AAA map under your car seat)

Maps have been around for thousands of years, but they’ve become more complex and powerful within the last couple decades simply due to the fact that computers exist. This has enabled the creation of products we use every day - like Google Maps that help us get home from work and avoid traffic, or weather maps that allow us to check real time radar images. Taking that a step further, scientists use maps every day using data from satellite imagery to try to get a better understanding of our humble planet.

地图已经存在了数千年，但是由于计算机的存在，它们在过去的几十年中变得更加复杂和强大。 这样就可以创建我们每天使用的产品，例如可以帮助我们下班回家并避免交通拥堵的Google Maps或可以让我们检查实时雷达图像的天气图。 更进一步，科学家每天都使用来自卫星图像的数据来使用地图，以更好地了解我们这个不起眼的星球。

This sounds hard…

听起来很难...

建筑图 (Building maps)

Plot twist, it’s not hard!

情节扭转，这并不难！

At least it’s not hard to get started. Thankfully, the parts that are the hardest are already built into libraries that can easily be tapped into with JavaScript.

至少开始并不难。 幸运的是，最难的部分已经内置在库中，可以轻松地使用JavaScript进行开发。

Enter Leaflet…

输入传单...

映射库 (Mapping Libraries)

There are a few libraries in the mapping space right now (like OpenLayers), but we like Leaflet.

映射空间中现在有一些库(例如OpenLayers )，但是我们喜欢Leaflet 。

To get started with Leaflet, first include the library’s assets on your page. Next, mount the application onto a root element within the DOM with some basic settings. You can kind of think of it like how React mounts to a DOM node, but Leaflet itself doesn’t use React. Once initialized, Leaflet allows you to start utilizing it’s API to project a basemap, add layers, tiles on those layers, and even start to draw on it.

要开始使用Leaflet，请首先在页面上包含图书馆的资产。 接下来，使用一些基本设置将应用程序安装到DOM中的根元素上。 您可以将其想像成React如何安装到DOM节点，但是Leaflet本身不使用React。 初始化后，Leaflet允许您开始使用其API来投影底图，添加图层，在这些图层上平铺，甚至开始在其上绘制。

底图？ 层？ 瓷砖？ (Basemap? Layers? Tiles?)

To get the basic gist, think of a cake. Traditionally, cakes have different layers, some on the bottom, some on the top, some might just cover one side with icing. Your map layers function similarly. The bottom layer, which is your foundation, will be your “basemap”. Below, we’re seeing a snapshot of the 2018 California Camp Fire wildfires on top of NASA’s MODIS Aqua satellite imagery.

要获得基本要点，请考虑一下蛋糕。 传统上，蛋糕有不同的层，有的在底下，有的在顶上，有的可能只用糖衣盖住一侧。 您的地图图层的功能类似。 最底层是您的基础，它将是您的“底图”。 下面，我们在NASA的