react leaflet_如何使用React Leaflet和Leaflet Gatsby Starter设置自定义Mapbox底图样式

react leaflet

Building maps can be pretty powerful, but often you’re stuck with open source options for the map imagery that might not help the readability of your data. How can we leverage Mapbox’s tile APIs to add a custom basemap to our React Leaflet app?

构建地图的功能可能非常强大，但是您经常会为地图图像使用开放源代码选项，这可能不利于数据的可读性。 我们如何利用Mapbox的tile API向我们的React Leaflet应用添加自定义底图？

• What are we going to build?

  我们要建造什么？

• What is Mapbox?

  什么是Mapbox？

• Part 1: Creating a custom Mapbox style

  第1部分：创建自定义Mapbox样式

• Part 2: Adding a custom TileLayer to React Leaflet

  第2部分：向React Leaflet中添加自定义TileLayer

• Part 3: Adding a custom basemap to Gatsby Starter Leaflet

  第3部分：向Gatsby Starter传单添加自定义底图

• Securing your Mapbox key

  保护您的Mapbox密钥

• Want to learn more about maps?

  想更多地了解地图？

我们要建造什么？ (What are we going to build?)

We’re going to walk through creating a new basic Mapbox style in our Mapbox account. Once created, we’re going to use their Map API to add a custom basemap to our React Leaflet app.

我们将逐步在Mapbox帐户中创建新的基本Mapbox样式 。 创建完成后，我们将使用其Map API向我们的React Leaflet应用添加自定义底图。

For our map, we’re going to use this Leaflet Gatsby Starter I created that will allow you to easily spin up a new mapping app. Before we spin that up though, I’ll walk you through how to add it using only React Leaflet components.

对于我们的地图，我们将使用我创建的Leaflet Gatsby Starter ，它将使您轻松启动新的地图绘制应用程序。 在开始之前，我将引导您如何仅使用React Leaflet组件添加它。

映射应用程序？ (A mapping app?)

Yup! Maps are used all around the world to study datasets for geographic locations. They're important tools for scientists and others that are trying to help the world.

对！ 世界各地都使用地图来研究地理位置数据集。 对于科学家和其他试图帮助世界的人来说，它们是重要的工具。

If you want to learn more about building a map and adding data to it, you can check out some of my other articles first such as creating a Coronavirus (COVID-19) map or a Summer Road Trip map as well as a little bit of inspiration about why Anyone Can Map.

如果您想了解有关构建地图和向其中添加数据的更多信息，可以先阅读我的其他一些文章，例如创建冠状病毒(COVID-19)地图或“ 夏季公路旅行”地图 ，以及一些其他内容。关于为什么任何人都能绘制地图的启示。

什么是Mapbox？ (What is Mapbox?)

Mapbox is a mapping platform that allows its customers to create custom mapping solutions. They also leverage a variety of APIs that provide powerful capabilities for building map features.

Mapbox是一个映射平台，可让其客户创建自定义映射解决方案。 他们还利用各种AP​​I提供强大的功能来构建地图功能。

For our purposes, we’re going to utilize their Map API, specifically their Static Tiles API, to serve a custom map style that we create.

为了我们的目的，我们将利用他们的Map API，特别是他们的Static Tiles API，来提供我们创建的自定义地图样式。

第1部分：创建自定义Mapbox样式 (Part 1: Creating a custom Mapbox style)

To get the look and feel that we want for our map, it’s important to have a basemap that helps make our data present itself without distractions. Plus, sometimes it’s fun to have a custom map.

为了获得我们想要的地图外观，感觉很重要，要有一个底图，它可以使我们的数据呈现出来而不会分散注意力。 另外，有时自定义地图会很有趣。

Mapbox帐户 (Mapbox account)

The first thing we’ll need to set up our custom Mapbox style is to have an account. I'm not going to walk you through that process, but you can head over to Mapbox’s website where you can sign up for free: mapbox.com

设置自定义Mapbox样式的第一件事是拥有一个帐户。 我不会逐步介绍该过程，但是您可以转到Mapbox的网站 ，免费注册： mapbox.com

创建新的自定义样式 (Creating a new custom style)

Creating a new style in Mapbox isn’t as hard as it sounds. While it can get really complex if you want something unique, we can copy one of Mapbox’s default styles to get started.

在Mapbox中创建新样式并不像听起来那样困难。 如果您想要独特的东西，它可能会变得非常复杂，但是我们可以复制Mapbox的默认样式之一来开始使用。

First, head over to Mapbox’s Studio dashboard by clicking your account link in the top right corner when logged in.

首先，请在登录后单击右上角的帐户链接转到Mapbox的Studio仪表板 。

Once we’re on our Studio dashboard, we want to select the New Style button.

在Studio仪表板上后，我们要选择“新样式”按钮。

After clicking the button, a modal will pop up allowing you to choose a template. You can choose whatever you want here, but I’m going to choose Monochrome with a variation of Dark. And after you’ve selected your template, click the Customize button.

单击按钮后，将弹出一个模态，允许您选择模板。 您可以在此处选择任何内容，但我将选择带有Dark变体的Monochrome。 然后，选择模板后，单击“自定义”按钮。

And now we’re dropped into our customization UI.

现在，我们进入了自定义界面。

From here, you can really do what you’d like. There are a ton of options to customize your map. It’s a little complex to try to dig in here, but Mapbox provides some resources to try to help you get productive.

在这里，您可以真正完成自己想做的事情。 有很多选项可以自定义地图。 尝试在这里进行挖掘有点复杂，但是Mapbox提供了一些资源来帮助您提高工作效率。

生成Mapbox令牌 (Generating a Mapbox token)

Once you’re happy with your new style and everything’s published, we want to generate a token that we’ll use for providing access to our Map.

当您对新样式满意并发布了所有内容后，我们想生成一个令牌，该令牌将用于提供对地图的访问权限。

Head on over to the Account section of the Mapbox dashboard.

转到Mapbox仪表板的Account部分。

Mapbox provides you with a “default” token that you can use in your applications. You're free to use this, but I recommend creating a new token that you can provide a unique name, that way if you ever blow past the free tier of Mapbox, you’ll be able to track your usage.

Mapbox为您提供了一个“默认”令牌，您可以在应用程序中使用它。 您可以随意使用它，但是我建议您创建一个新令牌，以提供唯一的名称，这样，如果您超过了Mapbox的免费层 ，就可以跟踪您的用法。

Additionally, it’s best to keep a separate token for each application, that way you can easily rotate an individual key, without having to update every application using it.

此外，最好为每个应用程序保留一个单独的令牌，这样您就可以轻松旋转单个密钥，而不必使用它来更新每个应用程序。

Once you click Create a token, you can set up the key how you’d like, with the scopes and permissions you choose, but for our purposes, you can leave all of the Public scopes checked for our map, which they do by default.

单击创建令牌后，您可以使用自己选择的范围和权限来设置所需的键，但是出于我们的目的，您可以选中地图的所有公共范围，默认情况下会选中。

配置我们的自定义端点 (Configuring our custom endpoint)

For this tutorial, we’re going to use Mapbox’s Static Tiles service.

在本教程中，我们将使用Mapbox的Static Tiles服务 。

Our endpoint will look like the following:

我们的端点将如下所示：

https://api.mapbox.com/styles/v1/{username}/{style_id}/tiles/256/{z}/{x}/{y}@2x?access_token={access_token}

There are a few parameters here we need to understand:

这里需要了解一些参数：

• username: this will be your Mapbox account’s username
  用户名：这将是您的Mapbox帐户的用户名
• style_id: this will be the ID of the style you created before
  style_id：这是您之前创建的样式的ID
• z, x, y: these are parameters that Leaflet programmatically swaps out, so we want to leave them as is
  z，x，y：这些是Leaflet以编程方式交换的参数，因此我们希望保持不变
• access_token: this is the Mapbox key you created above
  access_token：这是您在上方创建的Mapbox键

To find your username and style ID, we can use the Style URL for our new Mapbox style to get those values.

要找到您的用户名和样式ID，我们可以使用新Mapbox样式的样式URL来获取这些值。

In my example, my Style URL looks like:

在我的示例中，我的样式网址如下所示：

mapbox://styles/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p

colbyfayock is my username and ck8lryjfq0jdo1ip9ctmuhc6p is my style ID.

colbyfayock是我的用户名， ck8lryjfq0jdo1ip9ctmuhc6p是我的样式ID。

And once I update my endpoint parameters, the final tilepoint URL will look like:

更新端点参数后，最终的tilepoint URL将如下所示：

https://api.mapbox.com/styles/v1/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p/tiles/256/{z}/{x}/{y}@2x?access_token=MYACCESSTOKEN

第2部分：向React Leaflet中添加自定义TileLayer (Part 2: Adding a custom TileLayer to React Leaflet)

When building a map with React Leaflet, your main component will be a <Map> that wraps the entirety of the app. This is what sets up your Map instance for Leaflet.

当使用React Leaflet构建地图时，您的主要组件将是<Map> ，它包装了整个应用程序。 这就是为Leaflet设置Map实例的过程。

For our purposes here, we’re going to use the example on the React Leaflet homepage as our starting point.

为了达到这里的目的，我们将以React Leaflet主页上的示例为起点。

React Leaflet TileLayer组件 (React Leaflet TileLayer Component)

Inside of your <Map> component you include a <TileLayer> component, which defines the imagery of the world that you base your map upon.

在<Map>组件内部，包含一个<TileLayer>组件，该组件定义了地图所基于的世界的图像。

The example on the React Leaflet homepage uses a public version of OpenStreetMap as their TileLayer, which is an open source map project created and updated by people all around the world.

React Leaflet主页上的示例使用OpenStreetMap的公共版本作为TileLayer，这是一个由世界各地的人们创建和更新的开源地图项目。

<Map center={position} zoom={13}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
  />
</Map>

This gives you a basic map, but we want to swap in Mapbox so we can set up a custom look and feel for our map.

这为您提供了基本的地图，但是我们希望在Mapbox中进行交换，以便我们可以为地图设置自定义外观。

自定义Mapbox TileLayer (Custom Mapbox TileLayer)

To add our custom style, we’ll want to update the url and attribution props of the TileLayer component.

要添加我们的自定义样式，我们将要更新TileLayer组件的url和attribution 。

For URL, it will simply be the custom style endpoint we created earlier, so in my example, it looks like:

对于URL，它只是我们之前创建的自定义样式终结点，因此在我的示例中，它看起来像：

https://api.mapbox.com/styles/v1/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p/tiles/256/{z}/{x}/{y}@2x?access_token=MYACCESSTOKEN

For attribution, we want to credit Mapbox as the service, so we want to set our attribution as:

对于归因，我们希望将Mapbox归功于服务，因此我们希望将归因设置为：

Map data &copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors, <a href=&quot;https://creativecommons.org/licenses/by-sa/2.0/&quot;>CC-BY-SA</a>, Imagery &copy; <a href=&quot;https://www.mapbox.com/&quot;>Mapbox</a>

When plugged in to our TileLayer, our code should now look like this:

当插入我们的TileLayer ，我们的代码现在应如下所示：

<Map center={position} zoom={13}>
  <TileLayer
    url="https://api.mapbox.com/styles/v1/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p/tiles/256/{z}/{x}/{y}@2x?access_token=MYACCESSTOKEN"
    attribution="Map data &copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors, <a href=&quot;https://creativecommons.org/licenses/by-sa/2.0/&quot;>CC-BY-SA</a>, Imagery &copy; <a href=&quot;https://www.mapbox.com/&quot;>Mapbox</a>"
  />
</Map>

And once we open up our map, we should see our new basemap!

打开地图后，我们应该会看到新的底图！

看代码！ (See the code!)

If you want to see how I did it, check out the diff commit by commit.

如果您想了解我是如何做到的， 请通过commit签出diff commit 。

The only caveat there is I created an .env.development.local file in the root of my project in which I stored a new environment variable called REACT_APP_MAPBOX_KEY  to store my Mapbox key.

唯一需要注意的是，我在项目的根目录中创建了一个.env.development.local文件，在其中存储了一个名为REACT_APP_MAPBOX_KEY的新环境变量来存储我的Mapbox密钥。

第3部分：向Gatsby Starter传单添加自定义底图 (Part 3: Adding a custom basemap to Gatsby Starter Leaflet)

I’ve written a few other articles on how to get started with my Leaflet Gatsby Starter, but for this part, we’ll want to have a basic app spun up that we can use to change our TileLayer endpoint.

我还写了一些 其他 文章 ， 介绍如何使用Leaflet Gatsby Starter入门 ，但是对于这一部分，我们希望启动一个基本应用程序，以用于更改TileLayer端点。

设置我们的React Leaflet Gatsby应用 (Setting up our React Leaflet Gatsby app)

To get started, check out the instructions on the Starter github:

首先，请查看Starter github上的说明：

https://github.com/colbyfayock/gatsby-starter-leaflet

https://github.com/colbyfayock/gatsby-starter-leaflet

Once you’re ready, you should have a basic mapping app ready to go!

准备就绪后，您应该已经准备好使用基本的地图绘制应用程序！

配置我们的Mapbox服务 (Configuring our Mapbox service)

The first thing we’ll want to do is add Mapbox as a service in our src/data/map-services.js file.

我们要做的第一件事是在我们的src/data/map-services.js文件中将Mapbox添加为src/data/map-services.js 。

Taking our custom endpoint URL that we created in Part 1, let’s set up a new object with a name of Mapbox, and with a url and attribution similar to what we did in Part 2.

使用我们在第1部分中创建的自定义端点URL，让我们设置一个新对象，其名称为Mapbox，并具有与第2部分中相似的url和属性。

export const mapServices = [
  {
    name: ‘OpenStreetMap’,
    attribution: '&copy; <a href="http://osm.org/copyright”>OpenStreetMap</a> contributors’,
    url: ‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’
  },
  {
    name: ‘Mapbox’,
    attribution: ‘Map data &copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors, <a href=&quot;https://creativecommons.org/licenses/by-sa/2.0/&quot;>CC-BY-SA</a>, Imagery &copy; <a href=&quot;https://www.mapbox.com/&quot;>Mapbox</a>’,
    url: `https://api.mapbox.com/styles/v1/colbyfayock/ck8c2foj72lqk1jnug0g2haw0/tiles/256/{z}/{x}/{y}@2x?access_token=MY_ACCESS_TOKEN`
  }
];

使用我们的Mapbox地图服务 (Using our Mapbox map service)

Once you have your Mapbox service set up, all that’s left is to open up the src/pages/index.js file, find the mapSettings object definition, and update the defaultBaseMap property to Mapbox.

设置好Mapbox服务后，剩下的就是打开src/pages/index.js文件，找到mapSettings对象定义，并将defaultBaseMap属性更新为Mapbox 。

const mapSettings = {
  center: CENTER,
  defaultBaseMap: ‘Mapbox’,
  zoom: DEFAULT_ZOOM,
  mapEffect
};

Save that change, refresh the map in your browser, and you should now see your custom basemap style!

保存所做的更改，在浏览器中刷新地图，您现在应该可以看到自定义底图样式！

看代码！ (See the code!)

If you want to see how I did it, check out the diff with the commit.

如果您想了解我的操作方法， 请使用commit来检查diff 。

The only caveat there is I created an .env.development file in the root of my project in which I stored a new environment variable called GATSBY_MAPBOX_KEY  to store my Mapbox key.

唯一需要注意的是，我在项目的根目录中创建了一个.env.development文件，在其中存储了一个名为GATSBY_MAPBOX_KEY的新环境变量来存储我的Mapbox密钥。

保护您的Mapbox密钥 (Securing your Mapbox key)

环境变量 (Environment variables)

Part of most development processes that use individual keys will generally set the keys up as environment variables. Environment variables are configured settings that don’t live in the code itself.

大多数使用单个键的开发过程的一部分通常会将键设置为环境变量。 环境变量是配置的设置，它们不存在于代码本身中。

This is important because it prevents your key from being checked in to your code, which is bad from a security perspective, but it also allows you to provide a different key for different environments.

这很重要，因为它可以防止将密钥签入代码，这从安全角度来看是很糟糕的，但是它还允许您为不同的环境提供不同的密钥。

When generating your keys, try to keep this in mind, as it can save you in the long run.

生成密钥时，请记住这一点，因为从长远来看，它可以节省您的时间。

锁定您的Mapbox键 (Locking down your Mapbox key)

In your settings when creating a token or when editing a token, Mapbox allows you to specify only the URLs you want your key to be accessible from.

在创建令牌或编辑令牌时的设置中，Mapbox允许您仅指定希望从中访问密钥的URL。

Though Mapbox has a generous free tier, you probably want to keep it locked down only to the URLs that you’re using it on. You can create multiple keys, where one could be for public use on your website and one would be for your local development.

尽管Mapbox具有免费的免费层，但您可能希望仅将其锁定在使用它的URL上。 您可以创建多个密钥，其中一个可以在您的网站上公开使用，另一个可以用于您的本地开发。

This is helpful for instance, where you have a key that will never be used publicly for development purposes, but then you have a key that you deploy with, which can be locked down only to that URL.

例如，这对您很有用，您拥有一个永远不会公开用于开发目的的密钥，但是您拥有一个用于部署的密钥，该密钥只​​能锁定到该URL。

If someone grabs your key, they could plug it into their own website and use up all of your free tier, potentially running up your bill!

如果有人抓住了您的钥匙，他们可以将其插入自己的网站并用尽您的所有免费套餐，从而有可能增加您的账单！

想更多地了解地图？ (Want to learn more about maps?)

You can check out a few of my other resources to get started:

您可以查看其他一些资源以开始使用：

• How to create a Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet

  如何使用Gatsby和Leaflet在React中创建冠状病毒(COVID-19)仪表盘和地图应用

• Anyone Can Map! Inspiration and an introduction to the world of mapping

  任何人都可以地图！ 灵感以及对制图世界的介绍

• How to Create a Summer Road Trip Mapping App with Gatsby and Leaflet

  如何使用Gatsby和Leaflet创建夏季公路旅行地图绘制应用程序

• How to Create your own Santa Tracker with Gatsby and React Leaflet

  如何使用Gatsby和React Leaflet创建自己的圣诞老人追踪器

• How to build a mapping app in React the easy way with Leaflet

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

• 🐦 Follow Me On Twitter

  Twitter在Twitter上关注我

• 📽️ Subscribe To My Youtube

  Subscribe️订阅我的YouTube

• ✉️ Sign Up For My Newsletter

  ✉️注册我的时事通讯

翻译自: https://www.freecodecamp.org/news/how-to-set-up-a-custom-mapbox-basemap-with-gatsby-and-react-leaflet/

react leaflet