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的MODIS Aqua卫星影像之上看到了2018年加州营地大火的快照。

Now, to get a basemap, we need the imagery to produce it, which is where tiles come in. A tile is a single image block that makes up your group of tiles that represent your layer.

现在，要获取底图，我们需要图像来生成底图，这就是瓷砖的来源。瓷砖是单个图像块，它构成代表图层的一组瓷砖。

Your tiles are really just a simple image, but alongside the rest, coordinated by geographic positions and zoom levels, make up what you see when you’re looking at a web map like the basemap shown above. The goal of including these smaller individual pieces rather than 1 huge image is that between dealing with the entire globe, the different zoom levels available, and the resolutions available beyond that, we’re talking about gigabytes upon gigabytes of image assets that just wouldn’t be reliable or realistic to serve as a whole.

您的图块实际上只是一个简单的图像，但与其余图像一起，通过地理位置和缩放级别进行协调，可以构成您在查看网络地图(如上面所示的底图)时看到的内容。 包含这些较小的单个片段而不是1张大图像的目标是，在处理整个地球，可用的不同缩放级别以及可用的分辨率之外，我们所谈论的是千兆字节的图像资源，而这不会整体上可靠或现实。

Once you’ve established your basemap, you can then overlay additional layers using more imagery, vector tiles, or datapoints that get transformed to layers. In the screenshot below, we’re zoomed in beyond the highest resolution of our basemap. Notice though the imagery on the left, is an individual overlay tile from Digital Globe that provides us with a higher resolution of part of the area surrounding the fire zone.

建立底图后，您可以使用更多图像，矢量图块或转换为图层的数据点来覆盖其他图层。 在下面的屏幕截图中，我们放大了底图的最高分辨率。 请注意，尽管左侧的图像是Digital Globe的单独覆盖图块，它为我们提供了围绕着火区的部分区域的更高分辨率。

Another example on top of that is adding points representing fires collected from NASA’s VIIRS imagery.

最重要的另一个例子是添加点，这些点表示从NASA的VIIRS图像中收集的火灾。

This allows us to have the context of the basemap as well as being able to cast any type of data we’d like to better understand its effects.

这使我们能够拥有底图的上下文，并且能够投射我们想要更好地了解其效果的任何类型的数据。

In addition to the VIIRS data, there are many sources of imagery, vector tiles, and datasets published by governments and municipalities that you can use to help build interesting maps and data visualizations. NASA is one good source of these types of assets, but many commercial providers release open access to disaster datasets that help others build solutions around relief efforts.

除了VIIRS数据外，还有许多政府和市政当局发布的图像，矢量图块和数据集来源，可用于帮助构建有趣的地图和数据可视化。 NASA是这类资产的良好来源之一，但是许多商业提供商发布了对灾难数据集的开放访问，以帮助其他人围绕救灾工作构建解决方案。

画东西是什么意思？ (What’s this about drawing stuff?)

Usually when people use maps, they want to look at points of interest. Drawing gives us the ability to frame those areas of interest with different drawing tools such as creating a rectangle using a bounding box tool or drawing a circle. These are simple shapes, but those shapes represent a geographic space that can then be used to gather data about that area.

通常，当人们使用地图时，他们想要查看兴趣点。 绘图使我们能够使用不同的绘图工具来构图那些感兴趣的区域，例如使用边界框工具创建矩形或绘制圆。 这些是简单的形状，但是这些形状代表一个地理空间，然后可以用来收集有关该区域的数据。

React❤️传单 (React ❤️ Leaflet)

Leaflet in itself gives you a lot to work with, but there’s still a lot of manual effort that goes along with it. If you’re used to building a React app, you’re probably not as used to building an entire UI using nothing but APIs based on the browser’s window, and this is where React Leaflet shines.

Leaflet本身为您提供了很多工作，但是仍然需要很多手动工作。 如果您习惯于构建React应用程序，那么您可能不习惯基于浏览器窗口仅使用API​​来构建整个UI，而这正是React Leaflet的亮点。

React Leaflet is a React library that takes the map building and bundles it into intuitive components that represents those parts of the map. Consider the above, where we talked about your basemap and layers to along with it, you might see it looking something along the lines of:

React Leaflet是一个React库，它使用地图构建并将其捆绑到代表地图那些部分的直观组件中。 考虑到上面的内容，我们在其中讨论了底图和图层时，您可能会看到它看上去与以下内容类似：

While you would probably expect that it’s not as flexible as utilizing the Leaflet APIs directly, this completely opens up one’s world to being able to easily spin up simple map solutions in an intuitive way without all the effort. After all, at that point, you’re spinning up a React app which you’re probably already familiar with.

尽管您可能希望它不像直接使用Leaflet API 那样灵活，但这完全打开了人们的世界，使其能够以直观的方式轻松创建简单的地图解决方案，而无需付出任何努力。 毕竟，到那时，您正在构建一个可能已经很熟悉的React应用。

与盖茨比更进一步 (Taking it a bit further with Gatsby)

You want it easier, you say? You want me to build the map for you, you say? Well, you’re in luck! First, let’s give a brief introduction to another tool.

您想轻松一点吗？ 您要我为您制作地图吗？ 好吧，你很幸运！ 首先，让我们简要介绍另一种工具。

For the unfamiliar, Gatsby is a javascript framework that allows developers to easily spin up full, completely working React applications in a matter of minutes. They have all the nuts and bolts in place and moved out of the way to let you do what you do best: focus on the important parts of your application.

对于不熟悉的人来说， Gatsby是一个JavaScript框架，可让开发人员在几分钟内轻松启动完整，可正常工作的React应用程序。 他们已经将所有的螺母和螺栓固定到位，并且移开了以让您做到自己的最佳选择：专注于应用程序的重要部分。

The beautiful part about Gatsby is that it supports extensions of their default installation which they call Starters. What better way to make it easier for people to spin up maps than to create a Gatsby Starter?

关于Gatsby的美丽之处在于它支持默认安装的扩展，这些扩展被他们称为Starters 。 有什么比创建Gatsby Starter更好的方法来使人们更轻松地旋转地图？

盖茨比入门传单 (Gatsby Starter Leaflet)

Combining the ease of a Gatsby Starter and the flexibility of Leaflet, we have Gatsby Starter Leaflet. This simple tool allows you to scaffold a new React application running Leaflet along side React Leaflet in the matter of seconds (or minutes depending on your computer).

结合一个方便盖茨比起动机和单张的灵活性，我们有盖茨比入门小册子 。 这个简单的工具使您可以在几秒钟内(或几分钟，具体取决于您的计算机)在React Leaflet旁边搭建一个运行Leaflet的新React应用程序。

With a few basic commands, including installing your dependencies, you have an app that’s ready for you to start building on top of to create maps that will save the world. Even better, it includes some out of the box integrations like OpenStreetMap and an easy to setup map service configuration to the foundational React Leaflet component APIs that allow you to easily get product and have more flexibility to create smarter Mapping apps.

使用一些基本命令 (包括安装依赖项)，您就可以使用一个应用程序，开始在其基础上构建应用程序，以创建可拯救世界的地图。 更好的是，它包括一些现成的集成，如OpenStreetMap，以及易于安装的基础基础React Leaflet组件API的地图服务配置，可让您轻松获得产品并拥有更大的灵活性来创建更智能的Mapping应用。

有一些缺点... (There’s gotta be some downsides…)

No library or framework isn’t without its downsides. The more complicated your mapping application gets, the more pain points you run into. Here are a few from our experience that might help you settle in.

没有库或框架没有缺点。 映射应用程序越复杂，遇到的痛苦就越多。 以下是我们的一些经验，可能会帮助您安顿下来。

传单-从窗口到React (Leaflet — from the Window to React)

Trying to manage state and the lifecycle between your Leaflet map and your React components can prove to be tricky. Trying to constantly maintain and update your component using props will immediately start to create issues between stale map state or memory leaks due to maps not properly unmounting when the component does.

尝试管理Leaflet映射和React组件之间的状态和生命周期可能会很棘手。 尝试使用道具不断维护和更新组件将立即开始在陈旧的映射状态或内存泄漏之间产生问题，这是由于在映射组件时无法正确卸载映射。

Advice: mount your map with React, interact with it using the native Leaflet API. Once your map is rendered and settled down, you can use Leaflet to fly your user around the world and draw on your map without running into the state issues of multiple component renders.

建议：使用React安装地图，并使用本地Leaflet API与之交互。 渲染地图并使其沉降后，您可以使用Leaflet在世界各地飞行用户并在地图上绘图，而不会遇到多个组件渲染的状态问题。

公用瓷砖的有限使用 (Limited Use of Public Tiles)

While there are a few tiling services available that allow you to easily plug in and create a basemap, not all of these are actually intended to be heavily used. Take for instance OpenStreetMap, while you may be able to play around and develop basic solutions on their public endpoint, heavy use will be throttled and potentially blocked without explicit permission from those who maintain their servers.

尽管有一些切片服务可让您轻松插入并创建底图，但实际上并不是所有这些工具都打算大量使用。 以OpenStreetMap为例，虽然您可以在其公共端点上试用并开发基本解决方案，但如果没有维护服务器的人员的明确许可，大量使用将受到限制并可能受到阻止。

Advice: when you’re just starting out playing around, you shouldn’t have to worry too much. Worst case the maps will be a little slow to download. As your application starts to get more traffic, you’ll want to look into spinning up your own tiling service or paying for an out of the box solution such as Mapbox.

忠告 ：当您刚开始玩耍时，不必太担心。 最坏的情况是，地图下载速度会有些慢。 随着您的应用程序开始获得更多的流量，您将需要考虑扩展自己的切片服务或支付现成的解决方案(如Mapbox)的费用 。

获取地图！ (Get mapping!)

It has never been easier to build a map-based web application. There is enough tooling, documentation, and public data available to help you get off the ground and start building maps to explore our world in the time it takes you to set up a blog or static website. So what are you waiting for?

构建基于地图的Web应用程序从未如此简单。 有足够的工具，文档和公共数据可用来帮助您起步并开始建立地图，以便在建立博客或静态网站时花时间探索我们的世界。 那你还在等什么？