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應用程序從未如此簡單。 有足夠的工具，文檔和公共數據可用來幫助您起步并開始建立地圖，以便在建立博客或靜態網站時花時間探索我們的世界。 那你還在等什么？

• 🐦 Follow Me On Twitter

  Twitter在Twitter上關注我

• 📽? Subscribe To My Youtube

  Subscribe?訂閱我的YouTube

• ?? Sign Up For My Newsletter

  ??注冊我的時事通訊

Originally published at https://www.element84.com/blog/mapping-with-leaflet-and-react

最初發布在https://www.element84.com/blog/mapping-with-leaflet-and-react

翻譯自: https://www.freecodecamp.org/news/easily-spin-up-a-mapping-app-in-react-with-leaflet/

react leaflet

總結

以上是生活随笔為你收集整理的react leaflet_如何使用Leaflet在React中轻松构建地图应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。