From 96fa651b1e5423342380591c3d484f8bea0d11e6 Mon Sep 17 00:00:00 2001 From: coffee-gh Date: Sat, 21 Sep 2019 01:17:03 +0800 Subject: [PATCH] Update add-points-pt-3.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 完成校对 --- Tutorials/add-points-pt-3.md | 80 ++++++++++++++++++------------------ 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/Tutorials/add-points-pt-3.md b/Tutorials/add-points-pt-3.md index 34604ec..af972de 100644 --- a/Tutorials/add-points-pt-3.md +++ b/Tutorials/add-points-pt-3.md @@ -14,45 +14,44 @@ prependJs: contentType: tutorial --- -This is the third and final part in a [tutorial series](https://www.mapbox.com/studio-manual/help/#add-points-to-a-map) that teaches you how to add points to a map using the Mapbox Studio dataset editor, the Mapbox Studio style editor, and Mapbox GL JS. +这是 [tutorial series] (https://www.mapbox.com/studio-manual/help/#add-points-to-a-map) 的第三部分，也是最后一部分，它将教您如何使用 Mapbox Studio 数据集编辑器、Mapbox Studio 样式编辑器和 Mapbox GL JS.向地图添加点。 -*Part 3* focuses on using **Mapbox GL JS**, a JavaScript library, and will require you to write code. In this tutorial, you will learn how to: - -- Add a custom style to a Mapbox GL JS map -- Add popups when a [marker](/help/glossary/marker/) is clicked +*第3部分* 重点介绍如何使用 **Mapbox GL JS** ，一个 JavaScript 库，并需要您编写代码。在本教程中，您将学习如何： +- 向 Mapbox GL JS 地图添加自定义样式 +- 点击 [marker](/help/glossary/marker/) 时添加弹窗 {{ }} -## Getting started +## 准备开始 -There are a few resources you will need to follow along with this guide: +在本指南中，您需要遵循一些资源： -- **The "Chicago Parks" custom style**. You will need a [style](/help/glossary/style) containing markers for 10 Chicago parks. You can learn how to create this style in [Add points to a web map, part 1: create a dataset](/help/tutorials/add-points-pt-1) and [Add points to a web map, part 2: create a style](/help/tutorials/add-points-pt-2). -- **Development environment**. This guide requires writing code. See _Get ready to write code_ below for tips on how to get started. +- **"芝加哥公园"的自定义样式**。你需要一个包含10个芝加哥公园标记点的 [style] (/help/glossary/style) 。您可以在 [Add points to a web map, part 1: create a dataset] (/help/tutorials/add-points-pt-1) 和 [Add points to a web map, part 2: create a style](/help/tutorials/add-points-pt-2) 中学习如何创建此样式。 +- **开发环境**。本指南需要编写代码。有关如何开始的提示，请参照下面的 _准备编写代码_ 。 -### Get ready to write code +### 准备编写代码 -To create an interactive map with popups you will need to use [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/). This will require writing code. First, you will need to get setup with a development environment to write HTML, CSS, and JavaScript. If you are new to writing code, you may want to explore a resource like [Codecademy](https://www.codecademy.com/) to learn more about how front-end development works before using Mapbox GL JS. Here's what you'll need to do: +使用弹窗创建交互式地图，您需要使用 [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/) 。这需要编写代码。首先，您需要设置一个开发环境来编写HTML, CSS和JavaScript。如果您对编写代码还不熟悉，那么在使用 Mapbox GL J S之前，您可能需要研究 [Codecademy](https://www.codecademy.com/) 之类的资源，以了解有关前端开发如何工作的更多信息。你需要做的是： -- Download a text editor (for example, [Sublime Text](https://www.sublimetext.com/) or [Atom](https://atom.io/)). -- Familiarize yourself with JavaScript and front-end development concepts. +- 下载文本编辑器（例如， [Sublime Text](https://www.sublimetext.com/) 或 [Atom](https://atom.io/)） 。 +- 熟悉 JavaScript 和前端开发理念。 -## Create an HTML file +## 创建一个HTML 文件 -Create a new HTML file in your text editor to initialize a Mapbox GL JS map. +在文本编辑器中创建新的 HTML 文件以初始化 Mapbox GL JS 地图。 -### Initialize your map +### 初始化地图 -1. Open your text editor. -1. Copy and paste the code below into your text editor to initialize your Mapbox GL JS map. -1. Make sure `mapboxgl.accessToken` is set equal to your access token. - - You can find your access token on your [Access tokens page](https://www.mapbox.com/account/access-tokens/) when you sign into your [Mapbox Account](https://www.mapbox.com/account). -1. Replace `your-style-URL-here` with your own style URL. [Need help finding your style URL?](/help/glossary/style-url/) -1. Save your file as "index.html." -1. Open the file in a browser. -1. You should see a map displaying your data in the browser window. +1. 打开你的文本编辑器。 +1. 将下面的代码复制并粘贴到文本编辑器中，以初始化您的 Mapbox GL JS 地图。 +1. 确保将 `mapboxgl.accessToken` 设置和您的 access token 一致。 + - 当您登录到 [Mapbox Account] (https://www.mapbox.com/account) 时，您可以在 [Access tokens page](https://www.mapbox.com/account/access-tokens/) 上找到您的 access token。 +1. 用您自己的样式URL替换 `your-style-URL-here` 。[Need help finding your style URL?] (/help/glossary/style-url/) +1. 将您的文件另存为“index.html”。 +1. 在浏览器中打开此文件。 +1. 您应该可以在浏览器窗口中看到显示您的数据的地图。 ```html @@ -93,21 +92,21 @@ Create a new HTML file in your text editor to initialize a Mapbox GL JS map. ``` -## Add popups +## 添加弹窗 -After you have successfully displayed your map, you will need to add a little more code to allow the user to interact with your markers. This code will include: - - [`queryRenderedFeatures`](https://www.mapbox.com/mapbox-gl-js/api/#map#queryrenderedfeatures): This Mapbox GL JS method will generate a list of all the points on your map and the feature properties associated with each. - - [`mapboxgl.Popup`](https://www.mapbox.com/mapbox-gl-js/api/#popup): This method is used to create popups that show certain feature properties. The `Popup` component has several different instance members that you can use to customize the popup elements. In this example, you will use: - - **`Popup.setLngLat()`:** Sets the geographical location of the popup's anchor. - - **`Popup.setHTML()`:** Sets the popup's content to the HTML provided as a string. The specified properties must match the name of the properties you would like to display in your popups. In the code below, the properties that will display are the `title` and `description` properties for each feature. - - **`Popup.addTo(map)`:** Adds the popup to a map. - - An event listener: This event listener will make sure that popups are only shown when the user clicks a marker. +在您成功显示地图后，需要再添加一点代码，以允许用户与标记点进行交互。这些代码包括： + - [`queryrenderedfeatures`](https://www.mapbox.com/mapbox-gl-js/api/#map#queryrenderedfeatures) ：这个 Mapbox GL JS 方法将生成地图上所有点的列表以及与每个点相关联的特性属性。 + - [`mapboxgl.Popup`](https://www.mapbox.com/mapbox-gl-js/api/#popup) ：此方法用于创建显示某些功能属性的弹窗。`Popup` 组件有几个不同的实例成员，您可以使用它们自定义 popup 元素。在本例中，您将使用： + - **`Popup.setLngLat()`:** 设置弹窗锚点的地理位置。 + - **`Popup.setHTML()`:** 将弹窗的内容设置为以字符串形式提供的 HTML。指定的属性必须与要在弹窗中显示的属性的名称匹配。在下面的代码中，将显示的属性是每个功能的 `title` 和 `description` 属性。 + - **`Popup.addTo(map)`:** 将弹窗添加到地图。 +- 事件监听器：此事件监听器将确保仅当用户点击标记点时才显示弹窗。 -### Add more code +### 添加更多代码 -1. Copy and paste the code below into your HTML file after the code that initializes your map, but before the `` tag. -1. In the variable `features`, make sure you replace `layer-name-here` with the name of your layer as seen in the style editor. This is probably `chicago-parks` if you have been following the earlier tutorials in this series. -1. Refresh your browser page. You will be able to click on the markers and see titles and descriptions displayed in the popups. +1. 将下面的代码复制并粘贴到您的HTML文件中，在初始化地图的代码之后，但在 `` 标签之前。 +1. 在变量 `features` 中，确保将 `layer-name-here` 替换为样式编辑器中显示的图层名称。如果您一直遵循本系列前面的教程，那么这里可能是 `chicago-parks` 。 +1. 刷新浏览器页面。您可以点击标记点并在弹窗中看到标题和描述。 ```js map.on('click', function(e) { @@ -128,14 +127,15 @@ map.on('click', function(e) { }); ``` -## Final product +## 最后成品 -You've made a map using the Mapbox Studio dataset editor, Mapbox Studio style editor, and Mapbox GL JS that incorporates custom data and styles and allows for user interaction. +您已经使用 Mapbox Studio 数据集编辑器、Mapbox Studio 样式编辑器和 Mapbox GL JS 创建了一个地图，其中包含了自定义数据和样式，并允许用户交互。 {{ }} -## Next steps +## 下一步 + +要了解有关 Mapbox Studio 的更多操作，请浏览 [Mapbox Studio manual](https://www.mapbox.com/studio-manual/) 。有关 Mapbox GL JS 及其工作原理的更多信息，读我们的 [Mapbox web applications work](/help/how-mapbox-works/web-apps/) 指南。 -To learn about more things you can do with Mapbox Studio, explore the [Mapbox Studio manual](https://www.mapbox.com/studio-manual/). For more information on Mapbox GL JS and how it works, read our guide on how [Mapbox web applications work](/help/how-mapbox-works/web-apps/).