31 | Source: John Snow - Published by C.F. Cheffins, Lith, Southhampton Buildings, London, England, 1854 in Snow, John. On the Mode of Communication of Cholera, 2nd Ed, John Churchill, New Burlington Street, London, England, 1855.
32 |
25 |
26 | 在_Style_选项栏中，点击+。
27 | 
28 |
29 | ## 添加在Mapbox工作室创建的地图样式
30 |
31 | 在Mapbox工作室中，点击您想要添加到CARTO项目的地图样式旁的**Share & use** 按钮。
32 |
33 | 
34 |
35 | 在**Share & use** 窗口打开后，切换到**Use**选项卡，然后点击**Third party**选项并切换到**CARTO**。点击剪贴板图标{{
38 |
39 | 回到CARTO平台中，将您在上一步操作中复制的共享地址URL粘贴到文本框中，然后点击**ADD BASEMAP**。
40 |
41 | 
42 |
43 | 您希望添加的Mapbox工作室样式将会作为CARTO底图显示。
44 |
45 | ## 添加使用工作室经典创建的地图样式
46 |
47 | 在Mapbox工作室中访问[mapbox.com/studio/classic](https://www.mapbox.com/studio/classic)的工作室经典界面。找到您希望使用的样式，然后点击剪切板图标{{
}}
42 |
43 | ### 第一步：创建数据集
44 | 在Mapbox数据库编辑器中学习如何创建新的数据库，添加新的点、保存你的数据库和将它输出为切片集。 **[Add points to a web map, Part 1: create a dataset {{In this tutorial series you will add custom icons inside Mapbox Studio. Mapbox Studio only supports SVG images. Other image formats are supported when using markers in Mapbox GL JS.
59 | 60 | }} 61 | 62 | ## 在iOS中添加标记 63 | 64 | IOS 版的 Mapbox 地图软件开发包（The Mapbox Maps SDK for iOS）为可视化地图上的点数据提供了一系列不同的方式。每种方法各有利弊，所以当你需要添加大量图标或者显示高度自定义图标时，务必扫一眼。 65 | 66 | 请查看面向 The Mapbox Maps SDK for iOS 的 [Adding Points to a Map](https://www.mapbox.com/ios-sdk/maps/overview/markers-and-annotations/) 指南，以获取更多信息，关于如何使用有效的方法可视化你地图上的点数据，并权衡每种方法的利弊。 67 | 68 | ## 在 Android 中添加标记 69 | 70 | 在使用 Android 版的地图软件工具包给地图添加标记时，我们推荐注释插件 [Annotation plugin](https://docs.mapbox.com/android/plugins/overview/annotation) 。注释插件简化了在 Mapbox map 上设置和调整注释的可视属性的方法。 71 | 72 | [Directly using the Maps SDK for Android's sources and layers](https://docs.mapbox.com/android/maps/overview/data-driven-styling/) 是比注释插件更加先进的添加注释的方法。 73 | 74 | 75 | ## 在 Mapbox.js 中添加标记 76 | 77 | {{ 78 |如果您不需要从头开始编辑或绘制数据，您可以将数据作为tileset而不是dataset上传到Mapbox。了解有关tileset和数据集之间的区别的更多信息，请参见Mapbox Studio手册的上传部分。 Uploads section of the Mapbox Studio Manual.
56 | 57 | }} 58 | 59 | ### 创建一个Datasets 60 | 61 | 1. 登入 [Mapbox Studio](https://www.mapbox.com/studio) 并导航至[Datasets 页面](https://www.mapbox.com/studio/datasets)。 62 | 1. 点击 **New dataset** 按钮。 63 | 1. 选择 the _New Dataset_ modal右上角的**Upload** 选项。 64 | 1. 选择下载的GeoJSON 文件，点击 **Confirm**,然后点击**Create**。 65 |
66 | 1. 当你的文件上传完成, 点击 **Start editing**. dataset编辑器自动打开, 数据会显示在一个黑色的基础地图上，使得功能可视化。
67 |
68 | 
69 |
70 | ### 关于 datasets
71 |
72 | 您可以在datasets编辑器中编辑datasets特性和属性:
73 |
74 | - **特性** 是地图上的点、线和多边形。 您可以使用绘图工具添加新功能，通过单击和拖动地图上的功能来编辑功能的位置或形状，或者通过全选+delete键将所有功能一起删除。您还可以单击dataset 编辑器中的每个特性来查看其属性。
75 |
76 | - **属性** 可以是字符串、数字或布尔值。在您上传的示例datasets中，每个点都有“标题”和“描述”属性，它们都有一个惟一的文本字符串。您可以在dataset编辑器中编辑属性、添加新属性或删除属性。*确保在dataset编辑器中工作时，想要在最终产品的弹出窗口中显示的所有内容都包含在属性中。*
77 |
78 | ## 绘制数据
79 |
80 | 可以使用dataset编辑器中的绘图工具向dataset添加新点。也可以使用数据集编辑器的绘图工具更改现有特性的几何形状、位置和属性。有关绘图工具的更多信息，请参阅[Mapbox Studio手册](https://www.mapbox.com/studio-manual/).
81 |
82 | ### 绘制新特性
83 |
84 | 1.单击编辑器右上角的**Search places**字段，搜索`Garfield Park Chicago`。
85 | 1. 使用 {{
103 | 1.在您的tileset成功上传之后，单击 _Notifications_窗格中tileset的名称打开它。
104 |
105 | 
106 |
107 | ### 关于tileset
108 |
109 | Web地图由 [地图块](/help/how-mapbox-works/web-apps/)组成。一组tile称为tileset。Mapbox将数据分割成小块，然后将这些小块添加到web地图中，并以不同的缩放级别显示。为了使Mapbox的地图性能更优异，数据集的特性在转换为tileset时得到了简化。
110 |
111 | ## 下一步
112 |
113 | 接下来，开始本教程系列的[第2部分](/help/tutorials/add-points-pt-2/)，学习如何在Mapbox Studio样式编辑器中将tileset添加到地图样式中。
114 |
--------------------------------------------------------------------------------
/How Mapbox Works/geospatial-analysis.md:
--------------------------------------------------------------------------------
1 | ---
2 | 标题: 空间分析
3 | 描述: 学习如何使用Turf进行空间分析以及如何在Web应用程序中使用Turf.
4 | 图像: /img/narrative/analysis.svg
5 | 主题:
6 | - 分析
7 | prependJs:
8 | - "import DemoIframe from '@mapbox/dr-ui/demo-iframe';"
9 | 文章类别: 教程
10 | ---
11 |
12 | 空间分析包含用于理解地理学特征的模式和关系的各种技术和过程. [Turf](http://turfjs.org/) 是一个允许你在浏览器中执行空间操作的高级地理空间JavaScript开源库. Turf 帮助你分析、聚合和转换数据，以便以新的可视化方式呈现，并解答一些高级进阶的问题. 这篇教程概述了如何使用Turf进行空间分析，如何在应用程序中使用Turf，以及相关的文档来帮助你入门.
13 |
14 |
31 | Source: John Snow - Published by C.F. Cheffins, Lith, Southhampton Buildings, London, England, 1854 in Snow, John. On the Mode of Communication of Cholera, 2nd Ed, John Churchill, New Burlington Street, London, England, 1855.
32 |对Mapbox Boundaries tilesets的使用权由Mapbox帐户令牌控制。如果您无法使用自己的帐户，请与Mapbox销售代表联系，以请求使用Boundaries tilesets。
25 | 26 | 27 | }} 28 | 29 | Mapbox Enterprise 用户可以为其地图和数据可视化添administrative, postal, 或 statistical boundaries。本指南介绍了如何使用Mapbox边界和Mapbox Tilequery API来查询多边形中的点。 30 | 31 | ## 入门 32 | 33 | Mapbox Boundaries作为 Enterprise plan 的一部分提供。如果您没有 Enterprise plan，或者您有 Enterprise plan 并且想要添加对Mapbox Boundaries的使用权限，请 [联系Mapbox销售代表](https://www.mapbox.com/contact/) 以请求权限。对 Boundaries tilesets 的使用权限由您的 Mapbox 帐户令牌控制。 34 | 35 | ## 关于 Tilequery API 36 | 37 | [Mapbox Tilequery API](https://docs.mapbox.com/api/maps/#tilequery) 允许你从 tileset 中获取数据，而不必渲染地图。您可以使用 Tilequery API 将点与多边形匹配，换句话说，您可以提供点的坐标并确定指定 tileset 中存在哪些（如果有的）多边形。 38 | 39 | 以下是使用 Boundaries tileset 的 Tilequery API 请求的形式： 40 | 41 | ``` 42 | https://api.mapbox.com/v4/mapbox.enterprise-boundaries-a0-v2/tilequery/{longitude,latitude}.json?access_token={{请务必使用有权使用 Mapbox Boundaries 的帐户令牌。
49 | 50 | 51 | }} 52 | 53 | 如果指定的点在多边形内，则 Tilequery API 响应将包含一个 GeoJSON 格式的 body，其中包含 tileset 中的所有要素。`id` 返回的第一个要素的属性值是包含查询点的 Boundaries 要素的ID。 54 | 55 | 由于要素查找表包含所有 Mapbox Boundaries 父要素，因此每个点只需要一个 API 请求来查找所有匹配的父边界。例如，您可以查询意大利某个点的 admin-2 级别 boundary，并使用查找表在 admin-1 和 admin-0 中查找父级要素。 56 | 57 | ## 查询 Mapbox Boundaries 58 | 59 | 以下是从意大利的示例查询到 admin-2 的示例 API 响应。查询URL是： 60 | 61 | ``` 62 | https://api.mapbox.com/v4/mapbox.enterprise-boundaries-a2-v2/tilequery/12.87,43.100.json?access_token={{在参考文档中找到Boundaries tilesets的完整列表。
115 | 116 | 117 | }} 118 | 119 | 此技术允许在任何 admin 级别或多个 admin 级别聚合和可视化点，直至各个点，作为API服务。 120 | 121 | ## 下一步 122 | 123 | ### 了解关于 Tilequery API 的更多信息 124 | 125 | 通过我们的 [Create a timezone finder](/help/tutorials/create-a-timezone-finder-with-mapbox-tilequery-api/) 教程，使用 Mapbox Tilequery API 和本地 HTML 地理定位API，构建一个应用程序来确定您所在的时区。 126 | 127 | ### 了解关于 Mapbox Boundaries 的更多信息 128 | 129 | 详细了解如何使用Mapbox Boundaries。 130 | 131 | - [Data-joins with Mapbox Boundaries](/help/tutorials/data-joins-with-enterprise-boundaries/)：数据连接技术涉及本地数据（如美国各州的失业率）和矢量切片要素（如 Mapbox Boundaries 中 admin boundaries），并使用数据驱动的样式表示。 132 | - [Extend Mapbox Boundaries](/help/tutorials/extend-enterprise-boundaries/): 您可以使用应用程序所需的任何自定义数据扩展 Mapbox Boundaries。这可能意味着为您的应用程序添加学区、城市、市场或属性边界——所有这些都具有与本机产品相同的性能和API功能。 133 | 134 | ### 高级用例 135 | 136 | 您还可以探索此 [端到端示例](https://www.mapbox.com/labs-sandbox-demos/vt_polygons/) ，该 [示例](https://www.mapbox.com/labs-sandbox-demos/vt_polygons/) 使用此多边形点查询教程和 [数据连接](https://docs.mapbox.com/help/tutorials/data-joins-with-enterprise-boundaries/) 教程中概述的概念来创建交互式等值图的应用程序。 137 | 138 |  139 | -------------------------------------------------------------------------------- /How Mapbox Works/access-tokens.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Access tokens 3 | description: Learn how access tokens work and how to create and manage your access tokens. 4 | image: /img/narrative/access-token.svg 5 | topics: 6 | - access tokens 7 | prependJs: 8 | - "import ChevronousText from '@mapbox/mr-ui/chevronous-text';" 9 | contentType: guide 10 | --- 11 | 12 | To use any of Mapbox's tools, APIs, or SDKs, you'll need a Mapbox [access token](/help/glossary/access-token). Mapbox uses access tokens to associate API requests with your account. You can find your access tokens, create new ones, or delete existing ones on your [Access Tokens page](https://account.mapbox.com/access-tokens) or programmatically using the [Mapbox Tokens API](https://docs.mapbox.com/api/accounts/#tokens). 13 | 14 | ## How access tokens work 15 | 16 | ### Scopes 17 | 18 | Each access token you create will have a set of permissions that allow you to make certain types of requests to Mapbox APIs -- these are called **scopes**. Some Mapbox APIs only accept requests that include tokens with a particular scope. When creating an access token, you will have the option to add additional [public or private scopes](/help/glossary/access-token) to your token. If you choose to add any secret scopes to your token, you will have only one chance to view the token. 19 | 20 | When choosing scopes, consider what you plan to do with the token. **To protect your account and your data, do not grant more scopes than necessary to each token**. For example, if you are creating a token to upload data to Mapbox with the [Mapbox Uploads API](https://docs.mapbox.com/api/maps/#uploads), you will want to make sure you select the `uploads:write` and `uploads:read` scopes. To display a map in a web or mobile application, you should create a _separate_ access token that does not include the private uploads-related scopes, but does include the public `styles:read` and `fonts:read` scopes. 21 | 22 | Our [API documentation](https://docs.mapbox.com/api/) lists the scopes required for each Mapbox API. **For a complete list of available scopes see the [Account documentation](/help/account/tokens/).** 23 | 24 | ### URL restrictions 25 | 26 | You can make your access tokens more secure by adding URL restrictions. When you add a URL restriction to a token, that token will only work for requests that originate from the URLs you specify. Tokens without restrictions will work for requests originating from any URL. 27 | 28 | **For more information on requirements and details for implementing URL restrictions, see the [Account documentation](/help/account/tokens/).** 29 | 30 | ### Token rotation 31 | 32 | Any public [access tokens](/help/glossary/access-token) you include in webpage will be visible to anyone who makes an effort to look for it. Access tokens can be deleted and rotated at any time if you suspect misuse. Secret tokens should only be used in places where they will not be visible to your users. 33 | 34 | You can create as many access tokens as you want. To rotate, [create a new access token](#creating-and-managing-access-tokens), replace it in a project, and then remove the old token. Invalidation for uncached requests will happen immediately. Cached requests can take up to an hour. 35 | 36 | 37 | ## Creating and managing access tokens 38 | 39 | There are two options for creating and managing Mapbox access tokens: use the Tokens page in your Mapbox Account to manage tokens using a UI or use the Tokens API to create, read, and update tokens programmatically. 40 | 41 | ### Mapbox Account Dashboard 42 | 43 | Access tokens can be created, deleted, and managed on your [Access Tokens page](https://account.mapbox.com/access-tokens): 44 | 45 | 1. Click **Create a token** and give your new token a name to help you remember its purpose. 46 | 2. Specify scopes. 47 | 48 |  49 | 50 | 3. Click **Create token** to create the token. You may be prompted to re-enter your password. 51 | 4. Success! Your new token will appear at the top of your list of tokens. 52 | 53 | You can click on the name of any token to see the scopes it covers and, if the token is public, you can see the token itself. 54 | 55 | If you created a secret access token, you will only be able to see the token in your account dashboard once - be sure to store it somewhere safe (like a password manager) if you need to access it later. 56 | 57 |  58 | 59 | ### Mapbox Tokens API 60 | 61 | With the [Mapbox Tokens API](https://docs.mapbox.com/api/accounts/#tokens) you can create, read, and update your access tokens. To create additional tokens using this API you will first need to create an initial token with the `tokens:write` scope and any scopes you want to add to the created token. To create this initial token visit your [Access Tokens page](https://account.mapbox.com/access-tokens), and click **Create a token**. Read more about the Tokens API on our [API documentation page](https://docs.mapbox.com/api/). 62 | -------------------------------------------------------------------------------- /Tutorials/create-a-map-in-unity.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Create a map in Unity 3 | description: Use the Mapbox Maps SDK for Unity to create a visualization of 3D buildings on top of a 3D terrain map for use in a Unity application. 4 | thumbnail: createAMapInUnity 5 | level: 1 6 | topics: 7 | - unity 8 | language: 9 | - No code 10 | prereq: Familiarity with Unity. 11 | contentType: tutorial 12 | --- 13 | 14 | This tutorial will walk you through how to create a visualization of 3D buildings on top of a 3D terrain map for use in a Unity application. You will: 15 | 16 | - Set up a Mapbox project in Unity. 17 | - Learn about the Mapbox-specific terminology, tools, and services you’ll use to build your visualization. 18 | - Add a map to your scene. 19 | - Customize your map for your specific needs. 20 | - Learn how to add buildings and other vector data. 21 | 22 | This tutorial is for versions 1.4.0 and beyond. If you are using version 1.3.0 or earlier, read the [mesh generation tutorials](/help/tutorials/unity-mesh-pt-1/) instead. 23 | 24 | ## Getting started 25 | 26 | Before getting started, you’ll need to: 27 | 28 | 1. **Install the Mapbox Maps SDK for Unity**. For full installation instructions, visit [https://www.mapbox.com/unity-sdk](https://www.mapbox.com/unity-sdk). 29 | 2. **Create an empty Unity project**. 30 | 3. **Configure your Mapbox access token in your Unity project**. For token configuration instructions, visit [http://www.mapbox.com/unity-sdk/#token](http://www.mapbox.com/unity-sdk/#token). 31 | 32 | ## Set up your project 33 | 34 | Your new, empty scene will need a Map object to display a map. We provide a Map prefab already that you can drag and drop into your scene. 35 | 36 |  37 | 38 | This Map object comes with an `Abstract Map` script, where you can adjust map settings like location, map style, elevation, and more. 39 | 40 | To see what the default Map looks like, hit **Play**. 41 | 42 |  43 | 44 | You have a map! Note that you may need to change the camera’s position to see the map properly in the Game panel, but you can see it in the Scene panel. 45 | 46 | ## Customize your map 47 | 48 | Now you’ll learn how to style two kinds of maps: one with rich satellite imagery and elevation data, and one with vector data to show buildings. You will learn how to use various settings in `Abstract Map` to change a map’s location, map style, elevation, and vector layers. 49 | 50 | ### Create a map of Mt. Hood, Oregon 51 | 52 | Select your Map object and look at the Inspector window. Under the `Abstract Map` general settings, either change the location to `45.374218, -121.688341` or search “Mt Hood”. Set the zoom level to `13`. Open the “Others” settings and toggle `Snap Map to Zero`. 53 | 54 |  55 | 56 | Now open the image settings and change the `Data Source` to “Mapbox Satellite”. Finally, open the terrain settings and change the `Elevation Layer Type` to “Terrain with Elevation”. 57 | 58 |  59 | 60 | Save your scene and hit play. Switch to your Scene panel and you’ll see something like this: 61 | 62 |  63 | 64 | Now you'll make a map of downtown Manhattan! 65 | 66 | ### Create a map of downtown Manhattan 67 | 68 | To make this map of Manhattan, you can either start over in a new scene, or change the settings in your existing scene. It’s up to you! 69 | 70 | First set the location to `40.706843, -74.011370` or search “New York Stock Exchange”, and set the zoom level to 17. Next, go to the image settings and change the `Data Source` to “Mapbox Dark”. In the terrain settings, change the `Elevation Layer Type` to “Flat Terrain”. 71 | 72 |  73 | 74 | Now open up the vector settings. Change the `Data Source` to “Mapbox Streets”. Create a new visualizer by clicking the “Add Visualizer” button. It will now show up in the vector layer visualizers list as “Untitled”. Click it and hit the `Enter` key to rename it to “Buildings”. 75 | 76 |  77 | 78 | Click your “Buildings” visualizer and find the `Extrusion Type` setting. Change it to “Property Height”. Next, look for the `Material Options` setting. Next to `Roof Material` and `Wall Material` is a small circular icon. Click it, and select ”BuildingMaterial” for both. 79 | 80 |  81 | 82 | Hit play to see Manhattan with buildings! 83 | 84 |  85 | 86 | ### Next steps 87 | 88 | To learn more about what you can do with Mapbox Maps SDK for Unity, read the [SDK documentation](https://www.mapbox.com/unity-sdk/overview/). 89 | -------------------------------------------------------------------------------- /Tutorials/mapbox-with-openlayers.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Use Mapbox with OpenLayers 3 | description: Learn how to use Mapbox with OpenLayers. 4 | thumbnail: openLayersThumb 5 | level: 2 6 | topics: 7 | - third party integration 8 | language: 9 | - JavaScript 10 | prereq: Familiarity with front-end development concepts. 11 | prependJs: 12 | - "import * as constants from '../../constants';" 13 | - "import UserAccessToken from '../../components/user-access-token';" 14 | - "import Note from '@mapbox/dr-ui/note';" 15 | - "import DemoIframe from '@mapbox/dr-ui/demo-iframe';" 16 | contentType: tutorial 17 | --- 18 | 19 | You can use [Mapbox](https://www.mapbox.com/developers/api/) styles with 20 | [OpenLayers](http://openlayers.org/two/). Choose the version of OpenLayers and Mapbox tool that you're working with to get started. 21 | 22 | {{ 23 |' + feature.properties.description + '
') 126 | .addTo(map); 127 | }); 128 | ``` 129 | 130 | ## 最后成品 131 | 132 | 您已经使用 Mapbox Studio 数据集编辑器、Mapbox Studio 样式编辑器和 Mapbox GL JS 创建了一个地图，其中包含了自定义数据和样式，并允许用户交互。 133 | 134 | {{ 135 |当你创建新 token 时，某些作用域选项是机密作用域。如果你给新的 token 增加一个或多个机密作用域，它就会是一个机密 token。只有在创建它们的时候，你才能查看一次机密 token。因此，复制新的机密 token 并将其保存在一个安全的地方很重要。
45 | 46 | }} 47 | 48 | ## 创建一个 token，它能新建其他 token 49 | 50 | 使用 Tokens API 创建 access token，你需要用的 token 需具备 `tokens:write` 作用域。在 [access tokens page](https://www.mapbox.com/account/access-tokens) 上，你可以创建一个具有 `tokens:write` 作用域的新 token。 51 | 52 | 例如, 一个具有 `uploads:read`、 `uploads:list` 、 `uploads:write` 和 `tokens:write` 这些作用域的 token，使你创建能与 [Mapbox Uploads API](https://docs.mapbox.com/api/maps/#uploads) 交互的 token。 53 | 54 | {{ 55 |每个必要的作用域都必需存在于 access token，用它来通过请求。用一个 token 创建另一个更多作用域的 token，这是不可能的。
57 | 58 | }} 59 | 60 | 现在，你有一个具有 `tokens:write` 作用域的 token，你可以使用它通过 Tokens API 创建新的 token。 61 | 62 | ## 使用命令行创建 token 63 | 64 | ### 永久 token、公共 token 65 | 66 | 永久 token 或公共 token 是仅具有公共作用域的 access token。在命令行中，你可以通过如下命令创建永久、公共 token： 67 | 68 | ```curl 69 | curl -H "Content-Type: application/json" -X POST -d '{"note": "{token_name}","scopes": ["styles:read", "fonts:read"]}' 'https://api.mapbox.com/tokens/v2/{{
13 |
14 | ## How the Mapbox Maps SDK for Unity works
15 |
16 | The [Mapbox Maps SDK for Unity](https://www.mapbox.com/unity-sdk/) is designed to help Unity developers add dynamic map data to their games and applications by providing a straightforward programmatic and graphical interface to Mapbox's web services APIs, including:
17 | - [Vector Tiles API](https://docs.mapbox.com/api/maps/#vector-tiles)
18 | - [Raster Tiles API](https://docs.mapbox.com/api/maps/#raster-tiles)
19 | - [Static Images API](https://docs.mapbox.com/api/maps/#static-images)
20 | - [Geocoding API](https://docs.mapbox.com/api/search/#geocoding)
21 | - [Directions API](https://docs.mapbox.com/api/navigation/#directions)
22 | - [Map Matching API](https://docs.mapbox.com/api/navigation/#map-matching)
23 |
24 | ### Dynamic data
25 |
26 | While some map-focused Unity plugins are designed to help developers build static game environments from map data, the Mapbox Maps SDK for Unity is designed to request and render map data at runtime. This means that applications built with the Maps SDK for Unity will always display the most recent version of spatial data. It also means that games and applications only ever request the subset of data that corresponds with the area the user is viewing, keeping games and applications lightweight.
27 |
28 | ### Mesh generation
29 |
30 | The Mapbox Maps SDK for Unity provides the ability to generate meshes to create 2D or 3D maps, with satellite imagery, custom map styles, terrain data, and points of interest. See the [mesh generation tutorial](/help/tutorials/unity-mesh-pt-1/) to get started.
31 |
32 | ### AR support
33 |
34 | The Mapbox Maps SDK for Unity provides support for augmented reality, whether you're making a tabletop AR app or the next PokemonGo.
35 |
36 | ## Using the Mapbox Maps SDK for Unity
37 |
38 | The Mapbox Maps SDK for Unity is used with the [Unity](https://unity3d.com/) desktop application.
39 |
40 | ### Installing the Mapbox Maps SDK for Unity
41 |
42 | The Mapbox Maps SDK for Unity is available [via direct download](https://www.mapbox.com/unity/). See the Mapbox Maps SDK for Unity documentation for complete [installation instructions](https://www.mapbox.com/unity-sdk/#install).
43 |
44 | ### Creating game objects
45 |
46 | The Mapbox Maps SDK for Unity can be used to build rich environments from a variety of different types of data, including terrain data, raster map tiles, and vector map tiles, among others.
47 |
48 | #### Terrain
49 |
50 | The Mapbox [terrain-rgb](https://www.mapbox.com/blog/terrain-rgb/) tileset is designed for high resolution elevation visualizations and it is especially well-suited to creating 3D meshes with Unity. See the [Mesh generation basics](https://www.mapbox.com/mapbox-unity-sdk/docs/03-examples.html#mesh-generation-basics) example for more information.
51 |
52 | 
53 |
54 | #### Features from vector tiles
55 |
56 | Whether you're using a [Mapbox tileset](https://www.mapbox.com/vector-tiles/) or a custom tileset you created via the [Mapbox Uploads API](https://docs.mapbox.com/api/maps/#uploads), the Mapbox Maps SDK for Unity can request vector tiles, convert them into game objects or meshes, and render them alongside the rest of your game data. See the [Slippy map](https://www.mapbox.com/mapbox-unity-sdk/docs/03-examples.html#slippy-vector-terrain) example for more information.
57 |
58 | 
59 |
60 | ### Accessing Mapbox web services
61 |
62 | The Mapbox Maps SDK for Unity can connect your game or application to many of Mapbox's web services APIs, including the Mapbox [Vector Tiles API](https://docs.mapbox.com/api/maps/#vector-tiles) [Raster Tiles API](https://docs.mapbox.com/api/maps/#raster-tiles), [Static Images API](https://docs.mapbox.com/api/maps/#static-images), [Geocoding API](https://docs.mapbox.com/api/search/#geocoding), [Directions API](https://docs.mapbox.com/api/navigation/#directions), and [Map Matching API](https://docs.mapbox.com/api/navigation/#map-matching). See the various [Playground](https://www.mapbox.com/mapbox-unity-sdk/docs/03-examples.html#playground) examples for more information on interacting with Mapbox APIs.
63 |
64 | ### Publishing
65 |
66 | The Mapbox Maps SDK for Unity works anywhere Unity works, including, desktop, and mobile and coming soon to the web.
67 |
68 | ### Pricing
69 |
70 | Mobile applications built with our Maps SDK for Unity track usage with [monthly active users](/help/glossary/monthly-active-users/) (MAU). This means each device using your app within a month counts as a single MAU. All other apps built with Unity are charged by tile requests. All types of applications are metered for usage of the Mapbox APIs, like Geocoding and Directions, when they surpass what’s included with the free plan.
71 |
--------------------------------------------------------------------------------
/Tutorials/unity-custom-map-style.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Custom map styles in Unity
3 | description: Use a custom map style from Mapbox Studio in a Unity application.
4 | thumbnail: unityCustomStyle
5 | level: 2
6 | topics:
7 | - unity
8 | language:
9 | - No code
10 | prereq: Familiarity with Unity.
11 | prependJs:
12 | - "import Icon from '@mapbox/mr-ui/icon';"
13 | contentType: tutorial
14 | ---
15 |
16 | Mapbox allows you to create completely custom maps that can be used across platforms. This tutorial will walk you through how to add a [Mapbox designer map](https://www.mapbox.com/designer-maps/) to your account as a custom style and use that custom style with the Mapbox Maps SDK for Unity.
17 |
18 | 
19 |
20 | ## Getting started
21 |
22 | Here are some resources you'll need to get started:
23 |
24 | - **Mapbox account and access token.** Sign up for an account at [mapbox.com/signup](https://www.mapbox.com/signup/). You can find your [access tokens](/help/how-mapbox-works/access-tokens/) on your [Account page](https://www.mapbox.com/account/).
25 | - **A Unity scene including the Mapbox Maps SDK for Unity.** You can follow our tutorial, [Mesh generation with the Maps SDK for Unity Part 1](/help/tutorials/unity-mesh-pt-1/), to add a map to a scene in Unity.
26 | - **Style URL.** You will use the [style URL](/help/glossary/style-url/) associated with your custom style to add the style to your Unity project.
27 |
28 | ## Learn about map styles
29 |
30 | A map [style](/help/glossary/style/) is a document that defines the visual appearance of a map. The style document states which data sources to use and creates style layers that specify how that data should be styled. With the Mapbox Maps SDK for Unity, you can use one of our core Mapbox styles (like Mapbox Streets, Mapbox Outdoors, and Mapbox Satellite) or a custom map style from your Mapbox account.
31 |
32 | You can create a custom style in the Mapbox Studio style editor. For more information on creating custom styles, explore the following resources:
33 |
34 | - Our [Create a custom style](/help/tutorials/create-a-custom-style/) tutorial.
35 | - The [Styles section of the Mapbox Studio manual](https://www.mapbox.com/studio-manual/reference/styles/).
36 | - Our [Map design](/help/how-mapbox-works/map-design/) guide.
37 |
38 | You can also add one of our designer map styles to your account and use it in your Unity application. In this tutorial, you'll use the designer map style, [Whaam!](https://www.mapbox.com/designer-maps/#whaam)
39 |
40 | {{Browse all designer maps and add them to your account 
27 | {datasetSample}
28 |
29 | }}
30 | />
31 | }}
32 |
33 |
34 | In this example, you can see a visual representation of a dataset inside the **Mapbox Studio dataset editor** on the left and the actual contents of the **dataset**, a GeoJSON FeatureCollection, on the right. The contents of the dataset include geometry and properties for each point that you can see on the left, but does not contain any style information. For more details on how to style the points (for example, specify the symbols, colors, and the font for labels), see the [Upload data](/help/how-mapbox-works/uploading-data/) guide, which covers converting datasets to tilesets.
35 |
36 |
37 | ## How datasets work
38 |
39 | Datasets are a hosted version of your raw data as **[GeoJSON](http://geojson.org/)**. You can access and edit your datasets with the dataset editor or the [Mapbox Datasets API](https://docs.mapbox.com/api/maps/#datasets).
40 |
41 | ### Format
42 |
43 |
45 | {
46 | "id": "{feature_id}",
47 | "type": "Feature",
48 | "geometry": {
49 | "type": "Point",
50 | "coordinates": [0, 0]
51 | },
52 | "properties": {
53 | "name": "null island"
54 | }
55 | }
56 |
57 | 
18 |
19 | ## Mapbox mobile SDKs 如何工作
20 |
21 | The Mapbox Maps SDKs for [iOS](https://docs.mapbox.com/ios/maps/overview/) 和 [Android](https://docs.mapbox.com/android/maps/overview/) 允许你将交互地图添加到你的移动应用、定义自定义及动态样式规则、处理自定义数据、并与Mapbox网页API连接。
22 |
23 | ### 用户端渲染
24 |
25 | Mapbox mobile SDK的核心是Mapbox GL：一个强大的渲染引擎，它可以阅读**raw data** 和 **style rules** 然后在设备上输出完整的渲染地图。由于传统的服务器端的渲染只能生成静态图块，而结果图块一旦到达用户则无法渲染。运用Mapbox GL，图块可以直接在用户端渲染。这样你可以创建动态可视化，且可以动态移除图层。
26 |
27 | ### 图层和运行时样式设置
28 |
29 | 许多受欢迎的地图函数库都遵守 "basemap-overlay" 的范式，即一张地图由两种独特类型的图层组成：底图（一张提供基础与上下文信息的完整地图）和覆盖图层（常是运行时加载在地图之上的交互数据）。
30 |
31 | #### 图层
32 |
33 | 底图-叠加策略在长时间内效果都很好，但也有许多缺点。叠加图层常会压盖底图的标注且叠加的大数据集很快就会变得累赘。
34 |
35 | Mapbox地图脱离底图-叠加策略并且将地图上的 _所有要素_ 都作为你可以独立设置样式与在渲染堆栈中上下移位的图层来处理。在这种显示地图的方法下，一个图层是一个 **styled representation of vector or raster data** ，它被以Mapbox的规则渲染。这个策略使得数据在被添加时不对上下文要素如注记产生压盖。
36 |
37 | #### 运行时样式设置
38 |
39 | 因为地图上的所有内容都是在设备上从矢量或栅格图块实时渲染而来，所以Mapbox地图在地图与叠加图层上没有区别。这意味着 _every element of the map_ 都可以在运行时[runtime](/help/glossary/runtime-styling/) 被添加、移除及动态设置样式，与其他制图函数库中的叠加图层一样。
40 |
41 | #### 数据驱动样式设计
42 |
43 | [Data-driven styling](/help/glossary/data-driven-styling/) 使得你可以基于数据属性来改变地图样式。例如，你可以根据十字路口通行的行人数量来设置路口的半径，或者你也可以根据每个州的人口数量来更改各个州的填充色。
44 |
45 | 
A good coffee shop
' 144 | }); 145 | 146 | marker.addListener('click', function() { 147 | infowindow.open(map, marker); 148 | }); 149 | ``` 150 | 151 | ### Mapbox GL JS 152 | 153 | In Mapbox GL JS, you can attach the popup directly to the marker and it will be displayed when the marker is clicked by default. No need to add an event listener. Here's how you add a popup and populate it with some HTML content: 154 | 155 | ```js 156 | var map = new mapboxgl.Map({ 157 | container: 'map', // HTML container id 158 | style: 'mapbox://styles/mapbox/streets-v{{constants.VERSION_STREETS_STYLE}}', // style URL 159 | center: [-21.92661562, 64.14356426], // starting position as [lng, lat] 160 | zoom: 13 161 | }); 162 | 163 | var popup = new mapboxgl.Popup() 164 | .setHTML('A good coffee shop
'); 165 | 166 | var marker = new mapboxgl.Marker() 167 | .setLngLat([-21.92661562, 64.14356426]) 168 | .setPopup(popup) 169 | .addTo(map); 170 | ``` 171 | 172 | {{ 173 |如果您有一个很大的 GeoJSON 文件，您可能希望将其作为外部文件加载而不是内联添加。您可以通过链接到其 URL（如果是远程托管），或使用 AJAX 调用在本地或从第三方 API 加载来实现。
148 | 149 | }} 150 | 151 | ## 添加 HTML 标记 152 | 153 | 现在您已经加载了数据，添加代码并为每个标记创建 HTML DOM 元素。使用 Mapbox GL JS [Marker](https://www.mapbox.com/mapbox-gl-js/api/#marker) 将其绑定到 GeoJSON 中。您将使用在本教程开头下载的图像，该图像应保存在项目文件夹中。 154 | 155 | 使用 Marker 方法添加标记时，会将空白 `div` 附加到 GeoJSON 的每个点。将标记添加到地图前，您需要指定标记的样式。 156 | 157 | ### 样式标记 158 | background-image为名为的类marker。在同一个index.html文件中，将代码复制并粘贴style到#map声明下方的代码中。 159 | 首先，添加您需要设置标记样式的 CSS 。这个案例中，请将下载的图像文件作为背景图片 `background-image` 在一个 `marker`的集合中。在同一个文件件`index.html`中，复制下方的代码并粘贴至 `style` 标签下的 `#map` 声明中。 160 | 161 | ```css 162 | .marker { 163 | background-image: url('mapbox-icon.png'); 164 | background-size: cover; 165 | width: 50px; 166 | height: 50px; 167 | border-radius: 50%; 168 | cursor: pointer; 169 | } 170 | ``` 171 | 172 | ### 将标记添加至地图中 173 | 174 | 接下来，将创建标记所需的 JavaScript 代码添加到地图中。在结束脚本标记之前，对象 `map` 声明结束，将以下代码复制并粘贴到`script` 标记中。 175 | 176 | ```js 177 | // add markers to map 178 | geojson.features.forEach(function(marker) { 179 | 180 | // create a HTML element for each feature 181 | var el = document.createElement('div'); 182 | el.className = 'marker'; 183 | 184 | // make a marker for each feature and add to the map 185 | new mapboxgl.Marker(el) 186 | .setLngLat(marker.geometry.coordinates) 187 | .addTo(map); 188 | }); 189 | ``` 190 | 191 | 保存文件并刷新浏览器。您应该看到使用自定义 HTML 标记的地图。 192 | 193 | 194 | ## 添加弹窗 195 | 196 | 最后一步，使用 Mapbox GL JS 为您的标记添加弹窗，在 `mapboxgl.Marker` 声明中这样操作。 197 | 198 | ### 弹窗样式 199 | 200 | 首先，添加需要的 CSS 代码来设置弹窗样式。在同一 index.html 文件中，复制代码并粘贴到 `.marker` 声明下方的 `style` 标记中。 201 | 202 | ```css 203 | .mapboxgl-popup { 204 | max-width: 200px; 205 | } 206 | 207 | .mapboxgl-popup-content { 208 | text-align: center; 209 | font-family: 'Open Sans', sans-serif; 210 | } 211 | ``` 212 | 213 | ### 将弹窗附在标记上 214 | 215 | 接下来，将包含每个点信息的弹窗所需的 JavaScript 添加至代码中，这样在单击标记时就能显示弹窗： 216 | 217 | 1. 复制下方的 `.setPopup` 代码，将其粘贴至 `script` 标签中，其位于 `.setLngLat()` 后和 `.addTo()` 前。 218 | -确保您使用正确的密钥来显示要在弹窗中展示的数据。在此示例中，您将显示数据 `title` 和 `description` 属性。 219 | 2. 保存文件并刷新浏览器。 220 | 3. 够单击标记并查看显示的弹窗。 221 | 222 | 223 | ```js 224 | new mapboxgl.Marker(el) 225 | .setLngLat(marker.geometry.coordinates) 226 | .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups 227 | .setHTML('' + marker.properties.description + '
')) 228 | .addTo(map); 229 | ``` 230 | 231 | 请注意，在使用该 [`mapboxgl.Popup`](https://www.mapbox.com/mapbox-gl-js/api/#popup) 方法声明弹出窗口时，您已添加了偏移值，以确保弹窗位于标记的中心。 232 | 233 | 234 | ## 最终产品 235 | 236 | 您已使用 Mapbox GL JS 制作了包含自定义数据和样式的交互式标记贴图。 237 | {{ 238 |
28 | 
95 | 
148 |
193 | 
201 | 对Mapbox Boundaries tilesets的使用权限受Mapbox账户的access token所控制。 如果你无法访问你的账户，请 联系Mapbox销售代表，以请求使用Boundaries tilesets。
23 | 24 | }} 25 | 26 | Mapbox Enterprise用户可以为其地图和数据可视化添加administrative、postal和statistical boundaries。本指南介绍了如何在Web应用程序中使用Mapbox Boundaries和要素属性表。 27 | 28 |  29 | 30 | ## 入门 31 | 32 | Mapbox Boundaries 作为 Enterprise plan 的一部分提供。如果您没有订购 Enterprise plan，或者您已经拥有Enterprise plan 想要添加 Mapbox Boundaries 的使用权限，请 联系Mapbox销售代表 以请求使用权限。对 Mapbox Boundaries tilesets 的使用权限受 Mapbox 账户的 access token 所控制。 33 | 34 | ## 添加到应用程序 35 | 36 | 倘若您拥有 Mapbox Boundaries 的使用权，您就可以在应用程序中使用它们，就像使用任何其他的 [tileset](/help/glossary/tileset/) 一样。 37 | 38 | ### 关于Mapbox Boundaries 39 | 40 | 您可以在下面找到使用Mapbox Boundaries tileset所需的一些关键信息。 41 | 42 | #### Tileset IDs 43 | 44 | Mapbox Boundaries作为矢量切片的形式存储并通过 [Mapbox Vector Tiles API](https://docs.mapbox.com/api/maps/#vector-tiles) 分发。每一个admin、stats、和 postal level 都有不同的 tileset。Boundaries tilesets的 [Tileset IDs](/help/glossary/tileset-id/) 保存在此表单中： `mapbox.enterprise-boundaries-{a|p|s}{level}-{version}`。这里有一些例子： 45 | 46 | - `mapbox.enterprise-boundaries-a0-v2`：此 tileset 是提供给 admin (`a`) level 0 (`0`) 的边界图层 （也包含了国家/地区），属于 version 2 (`v2`) 的 Mapbox Boundaries。 47 | - `mapbox.enterprise-boundaries-p1-v2`：此 tileset是提供给 postal (`p`) level 1 (`1`) 的边界图层，属于 version two (`v2`) 的 Mapbox Boundaries。 48 | - `mapbox.enterprise-boundaries-s3-v2`：此 tileset 是提供给 stats (`s`) level 3 (`3`) 的边界图层， 属于 version two (`v2`) 的 Mapbox Boundaries。 49 | 50 | **您可以在 [参考文档](https://www.mapbox.com/vector-tiles/enterprise-boundaries-v2/) 中获得Mapbox Boundaries tilesets的完整列表，并可深入阅读关于tileset层次结构的内容。** 51 | 52 | #### Feature IDs 53 | 54 | 每个 [要素（Feature）](/help/glossary/features/)也拥有唯一的ID，用以区分要素多边形。倘若您已经将 Boundaries 添加到您的账户，你即可以可以访问包含 feature IDs 和 所有标记元数据的参考文档。 55 | 56 | #### 最小缩放级别和边界框 57 | 58 | - **z_min**：每个要素的 `z_min` 值标记了 tileset 中要素可用的最小 [缩放级别（zoom level）](/help/glossary/zoom-extent/)。您可以使用该选项来设置可以查看某一要素的最小的相机缩放级别。 59 | - **centroid point**：Centroid point 要素会在缩放级别达到 `z_min` + 1时出现。Centroid point 要素可以用于在 Boundaries 要素的中心中展示标记（marker）、符号（symbol）、标签（label）。 60 | - 使用 [上述的tileset ID](#tileset-ids) 并指定 [源层（source layer）](/help/glossary/source-layer/) `points_{admin|postal|stats}_{level}` 来使用包含用于特定admin、postal或stat level的centroid points。例如，矢量切片源层 `points_postal_4` 包含了用于 `mapbox.enterprise-boundaries-p4-v2` 的centroid point 切片组。 61 | - **bounds**：要素边界（bounds） 是覆盖所有要素的最小矩形，可以通过数组 `[min_long, min_lat, max_long, max_lat]` 的形式表示。 62 | 63 | 64 | ### 示例 65 | 66 | 要在您的应用程序中使用 Mapbox Boundaries tileset，请从 Mapbox Vector Tiles API 中发出相关tileset的请求。例如，在 Mapbox GL JS 中加载 tileset 的代码如下所示： 67 | 68 | ```js 69 | // Be sure to use an access token from an account 70 | // that has access to Boundaries 71 | mapboxgl.accessToken = '{{
28 | 
125 | 
152 | 
180 |
204 | 
212 | 
如果您已经使用旧版本的适用于iOS的Mapbox地图SDK在运行时定义您数据的样式，请阅读我们的 迁移指南 来学习更多关于如何将样式函数转换为表达式的信息。
56 | 57 | }} 58 | 59 | ## 用途 60 | 有数不尽的方式来将属性表达式应用于您的程序，包括： 61 | 62 | - **数据驱动样式**：根据一个或者多个数据属性来指定样式规则，例如根据人口数量来对洲多边形进行着色。 63 | - **算术**: 对源数据进行计算，例如执行计算来动态转化单位。 64 | - **条件逻辑**: 使用if-then逻辑，例如根据要素中可用的属性或者名称的长度来决定显示标签的文本。 65 | - **字符串操作**: 接管标签文本的显示例如大写，小写，首字母大写，而无需编辑、重新准备和重新上传数据。 66 | 67 | 68 | 在本教程中，您将学习如何使用表达式来根据年龄和缩放级别来设置明尼阿波利斯市历史保护委员会地标的样式。 69 | 70 | ## 创建地图 71 | 72 | ### 初始化地图视图 73 | 74 | 在构建数据可视化之前，您需要先初始化地图视图。使用以下的代码来创建一个使用[Mapbox Light](https://www.mapbox.com/maps/light-dark/)样式的地图视图，然后以明尼苏达州明尼阿波利斯为中心： 75 | 76 | {{ 77 |
-mapView:didFinishLoadingStyle:}}中。
114 |
115 | {{
116 | 
如果您以前使用过 属性 函数， 请注意MGLInterpolationModeExponential表达式允许您实现与在数据源停止时使用`MGLStyleValue`相同的效果。
-mapView:annotationCanShowCallout: 委托函数。这就实现了地图视图在被点击时自动显示标注框的功能。完整的实现方法如下：
100 |
101 | {{
102 | 
如果您的应用是以iOS 10或者更低版本为目标的，您可能需要在您的应用中包含 `NSLocationAlwaysUsageDescription` 。注意这个密钥已经不在iOS 11中使用了。 148 |
149 | 150 | }} 151 | 152 | 一旦您设定好应用的定位许可，您就可以通过设置地图视图中的 [`showsUserLocation`](https://www.mapbox.com/ios-sdk/api/{{constants.VERSION_IOS_MAPS}}/Classes/MGLMapView.html#/c:objc(cs)MGLMapView(py)showsUserLocation) 的属性为 `true` 来显示设备的当前位置。 153 | 154 | {{ 155 |
对Mapbox Boundaries tilesets的使用权限受 Mapbox账户的access token所控制。 如果你无法访问你的账户, 请联系Mapbox销售代表，以请求使用Boundaries tilesets。
37 | 38 | }} 39 | 40 | Mapbox Enterprise 用户可以为他们的地图和数据可视化添加 administrative 和 postal 类型 boundaries。此指南包含了如何在web应用程序中使用 Mapbox Boundaries，及要素查找表、数据连接、和切片获取 API。 41 | 42 |  43 | 44 | ## 入门 45 | 46 | Mapbox Boundaries 作为 Enterprise plan 的一部分提供。如果您没有订购 Enterprise plan，或者您已经拥有Enterprise plan 想要添加 Mapbox Boundaries 的使用权限，请联系Mapbox销售代表以请求使用权限。Mapbox Boundaries tilesets 的使用权限受 Mapbox 账户的 access token 所控制。 47 | 48 | ## 添加到应用程序 49 | 50 | 倘若您拥有 Mapbox Boundaries 的使用权, 您就可以在应用程序中使用它们，就像使用任何其他的 [tileset](/help/glossary/tileset/) 一样。 51 | 52 | ### 关于Mapbox Boundaries 53 | 54 | 您可以在下面找到使用Mapbox Boundaries tileset所需的一些关键信息。 55 | 56 | #### Tileset IDs 57 | 58 | Mapbox Boundaries作为矢量切片的形式存储并通过 [Mapbox Vector Tiles API](https://docs.mapbox.com/api/maps/#vector-tiles) 分发，每一个 admin 和 postal 级别都具备独有的切片组。每个 Boundaries tilesets 的[Tileset IDs](/help/glossary/tileset-id/) 形如`mapbox.enterprise-boundaries-adminOrPostalLevel-version` 。例如，admin 的 0 级 boundaries (包含国家/地区) 的 tileset ID 为 `mapbox.enterprise-boundaries-a0-v1`。 59 | 60 | #### Feature IDs 61 | 62 | 每个[要素(Feature)](/help/glossary/features/)也拥有唯一的ID，用以区分要素多边形。倘若您已经将 Boundaries 添加到您的账户，你就可以访问包含 feature IDs 和 所有标记元数据的参考文档。 63 | 64 | #### 最小缩放级别和边界框 65 | 66 | - **z_min**：每个要素的`z_min` 值标记了 tileset 中要素可用的最小 [缩放级别(zoom level)](/help/glossary/zoom-extent/)。您可以使用该选项来设置可以查看某一要素的最小的相机缩放级别。 67 | - **centroid point**：Centroid point 要素会在缩放级别达到 `z_min` + 1时出现。Centroid point 要素可以用于在 Boundaries 要素的中心中展示标记(marker)、符号(symbol)、标签(label)。 68 | - **bounds**：要素边界(bounds) 是覆盖所有要素的最小矩形，可以通过数组 `[min_long, min_lat, max_long, max_lat]` 的形式表示。 69 | 70 | 71 | ### 示例 72 | 73 | 要在您的应用程序中使用 Mapbox Boundaries tileset，请从 Mapbox Vector Tiles API 中发出相关 tileset的请求。例如，在 Mapbox GL JS 中加载 tileset 的代码如下所示： 74 | 75 | ```js 76 | // Be sure to use an access token from an account 77 | // that has access to Boundaries 78 | mapboxgl.accessToken = '{{