diff --git a/Tutorials/building-a-store-locator.md b/Tutorials/building-a-store-locator.md index e1346f1..0559a63 100644 --- a/Tutorials/building-a-store-locator.md +++ b/Tutorials/building-a-store-locator.md @@ -19,57 +19,53 @@ prependJs: contentType: tutorial --- -This guide will walk you through how to create a store locator map using Mapbox GL JS. You'll be able to browse all the locations from a sidebar and select a specific store to view more information. Selecting a [marker](/help/glossary/marker/) on the map will highlight the selected store on the sidebar. + +此教程将展示如何利用Mapbix GL JS创建一个商店定位地图。您将可以通过侧边栏浏览所有的位置并选择一个位置以查看详细信息。从侧边栏中选择一个[标签](/help/glossary/marker/)可以进而标记地图上所选商店的位置。 {{ }} -You will use [Sweetgreen](http://sweetgreen.com), a local salad shop, as an example. They have a healthy number of locations, plus their salads are delicious! - -This guide shows you how to use [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/) to build an interactive web map. If you're new to Mapbox GL JS, you might want to read our guide on Mapbox [web applications](/help/how-mapbox-works/web-apps/) first. - -## Getting started - -For this project, we recommend that you create a local folder called "store-locator" to house your project files. You'll see this folder referred to as your *project folder*. - -There are a few resources you'll need before getting started: +我们将以一个当地的沙拉店，[Sweetgreen](http://sweetgreen.com)，作为示例。他们拥有一系列的连锁店位置，而且他们的沙拉非常新鲜可口！ -- [__A style URL__](/help/glossary/style-url). A style URL points to a unique map you have created with Mapbox Studio. You can either create a custom style with the [Mapbox Studio style editor](https://www.mapbox.com/studio-manual/reference/styles/) or use a [Mapbox style](https://www.mapbox.com/studio/styles). +本教程将展示如何使用[Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/)创建一个交互式的网页地图。如果您是第一次使用Mapbox GL JS，我们建议您先阅读Mapbox所提供的关于[网络应用](/help/how-mapbox-works/web-apps/)的教程。 -- [__An access token__](/help/glossary/access-token/) from your account. You will use an access token to associate a map with your account. Your access token is on the [Account page](https://www.mapbox.com/account/). +## 准备工作 -- [__Mapbox GL JS__](https://www.mapbox.com/mapbox-gl-js/). The Mapbox JavaScript library that uses WebGL to render interactive maps from Mapbox GL styles. +首先，我们建议您创建一个本地文件夹，“store-locator”，以存放您的工程文件。在之后的教程中，我们称这个文件夹为*工程文件夹*。 -- __A text editor.__ You'll be writing HTML, CSS, and JavaScript after all. +您需要以下的资源： -- __Data__. We collected some of Sweetgreen's locations and marked up the data in GeoJSON. - -- __Custom map marker__. You'll be using an image for your map marker. Save the image to your project folder. +- [__风格URL__](/help/glossary/style-url)：一个风格URL对应着您在Mapbox Studio中所创建一个地图风格。您可以在[Mapbox Studio风格编辑器](https://www.mapbox.com/studio-manual/reference/styles/)中创建一个自定义风格，或者使用[预设的风格](https://www.mapbox.com/studio/styles)。 +- 账号[__秘钥__](/help/glossary/access-token/)：您需要一个秘钥来将您的账号和您的地图关联起来。您的秘钥可以在[账号信息页](https://www.mapbox.com/account/)获取。 +- [__Mapbox GL JS__](https://www.mapbox.com/mapbox-gl-js/)：Mapbox JavaScript开发者库使用了WebGL来呈递Mapbox GL风格的交互式地图。 +- __文本编辑器__：您需要能够编写THML、CSS以及JavaScript。 +- __数据__：我们准备了一些Sweetgreen连锁店的位置信息，并编译成了GeoJSON格式的文件。 +- __自定义地图标签__：您需要一张图片来作为您的地图标签。请自行选择并保存一张图片至您的工作文件夹中。 {{ }} -## Add structure +## 页面布局设置 -In your project folder, create an `index.html` file. Set up the document by adding Mapbox GL JS and CSS to your `head`: +在您的工程文件夹中，创建一个文件并命名为`index.html`。在`head`中添加以下Mapbox GL JS和CSS代码： ```html ``` -Next, markup the page to create a map container and sidebar listing: +然后，我们需要标记此页面并创建一个地图容器和一个侧边栏： ```html
Listing
Map
``` -Then, apply some CSS to create the page layout: +接下来，我们设置一些CSS以定义页面的布局： ```css body { @@ -81,8 +77,7 @@ body { -webkit-font-smoothing: antialiased; } -/* The page is split between map and sidebar - the sidebar gets 1/3, map -gets 2/3 of the page. You can adjust this to your personal liking. */ +/*这个页面被分为了地图和侧边栏。侧边栏相对宽度为页面的三分之一，地图容器为三分之二。您可以自行调整相对宽度。*/ .sidebar { width: 33.3333%; } @@ -108,56 +103,53 @@ gets 2/3 of the page. You can adjust this to your personal liking. */ }} -## Initialize the map +## 初始化地图 -Now that you have the structure of the page, initialize the map with Mapbox GL JS. +您已经完成了页面的布局设计，我们可以通过Mapbox GL JS来初始化我们的地图。 -First, add your access token using `mapboxgl.accessToken`. Then, create a new `map` object using `new mapboxgl.Map()` and store it in a variable called `map`: +首先，在`mapboxgl.accessToken`中添加您的秘钥。然后，通过`new mapboxgl.Map()`创建一个新的`map`对象，并将其保存在变量`map`中： ```js mapboxgl.accessToken = '{{ }}'; -// This adds the map to your page +// 在页面中添加一个地图 var map = new mapboxgl.Map({ - // container id specified in the HTML + // HTML中所包含的容器ID container: 'map', - // style URL + // 风格URL style: 'mapbox://styles/mapbox/light-v{{constants.VERSION_LIGHT_STYLE}}', - // initial position in [lon, lat] format + // 初始化的位置用[x, y]格式标记 center: [-77.034084, 38.909671], - // initial zoom + // 初始的缩放程度 zoom: 14 }); ``` -As you can see above, the Mapbox GL JS map requires several options: - -- `container`: the `id` of the `
` element on the page where the map should live. In this case, the `id` for the `
` is `'map'`. - -- `style`: the [style URL](/help/glossary/style-url/) for the map style. In this case, use the {{ }} which has the style URL `mapbox://styles/mapbox/light-{{constants.VERSION_LIGHT_STYLE}}`. +如您所见，Mapbox GL JS初始化地图的时候需要以下的设置： -- `center`: the initial centerpoint of the map in [longitude, latitude] format. +- `contianer`：`
`的`id`元素标注了地图的显示位置。在上面的例子中，我们 的`id`是`map`。 +- `style`：地图所选用的[风格URL](/help/glossary/style-url/)。在我们的例子中，{{ }}包含了风格URL`mapbox://styles/mapbox/light-{{constants.VERSION_LIGHT_STYLE}}`。 +- `center`：由[x, y]所标注的初始化地图中心位置。 +- `zoom`：初始的地图缩放程度。 -- `zoom`: the initial zoom level of the map. +## 加载数据 -## Load data +在Mapbox GL JS中，地图的呈递过程在浏览器中实现。想要实现这一过程，您需要添加一个具有地理信息的图层以及对应的操作步骤。 -With Mapbox GL JS, map rendering happens in the browser. For the browser to render your map, you need to add a layer with geospatial data and instructions for how that data should be rendered. - -To add a source to the map, your code needs to access the geospatial data. Store all the GeoJSON data in `sweetgreen.geojson` in a variable called `stores`: +您的代码需要能够访问地理信息才能够添加一个源地图。将所有的`sweetgreen.geojson`GeoJSON数据保存在变量`stores`中： ```js var stores = {{ sweetgreenLocations }}; ``` -Now you can add a layer that contains this data and describes how it should be rendered. Add the data to your map once the map loads using `addLayer()`. Create a new layer, and specify `stores` as a GeoJSON data source. Then, add instructions for rendering the source. This example only adds minimal styling --- for full details on all the layer styling options, see the [Mapbox Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/): +现在您可以添加一个图层并进一步定义这个图层应该如何显示。当地图通过`addLayer()`显示的时候，向地图中添加您的数据。创建一个新的图层，并设置`stores`为您的GeoJSON数据源。然后，添加如何显示数据的操作步骤。此教程仅使用了极简风格，如果您想要了解完整的图层风格设置信息，请阅读[Mapbox风格设置文档](https://www.mapbox.com/mapbox-gl-style-spec/)： ```js map.on('load', function(e) { - // Add the data to your map as a layer + // 向地图中添加数据图层 map.addLayer({ id: 'locations', type: 'symbol', - // Add a GeoJSON source containing place coordinates and information. + // 添加包含有坐标和附加信息的GeoJSON数据源 source: { type: 'geojson', data: stores @@ -170,17 +162,17 @@ map.on('load', function(e) { }); ``` -_Note: `restaurant-15` refers to an icon in the Mapbox Light style you added earlier in the code._ +_请注意，`restaurant-15`指的是Mapbox轻风格中的一个图标。您在之前的步骤中已经添加了这个风格。_ {{ }} -## Build store listing +## 创建商店列表 -Now that the points are on your map, it's time to build the restaurant location listing by iterating through the GeoJSON and creating a list of restaurants dynamically. This means that if you need to add a location then you *only* need to update the GeoJSON. +您已经将商店的位置显示在了地图上，现在可以利用一个循环语句来自动创建包含所有商店位置信息的列表了。我们使用一个循环语句遍历所有的GeoJSON数据，这样一来，如果您需要修改或者添加商店位置信息，您**只需要**修改GeoJSON文件，而不需要改动任何的代码。 -First, update the sidebar HTML to hold the listing information and update your CSS to accommodate the layout changes: +首先，我们需要改动HTML以保证列表信息的显示，同时相应的我们需要更改CSS格式设置： ```html
@@ -310,33 +302,33 @@ a:hover { } ``` -Next, build a function to iterate through the Sweetgreen locations and add each one to the sidebar listing: +然后，我们定义一个方程。这个方程自动遍历所有的Sweetgreen位置，并且添加它们到侧边栏中： ```js function buildLocationList(data) { - // Iterate through the list of stores + // 遍历所有的商店 for (i = 0; i < data.features.length; i++) { var currentFeature = data.features[i]; - // Shorten data.feature.properties to `prop` so we're not - // writing this long form over and over again. + // 重新命名data.feature.properties为`prop` + // 以避免过长字符串的反复出现 var prop = currentFeature.properties; - // Select the listing container in the HTML and append a div - // with the class 'item' for each store + // 选择列表容器的HTML元素 + // 为每一个商店添加一个item类的div var listings = document.getElementById('listings'); var listing = listings.appendChild(document.createElement('div')); listing.className = 'item'; listing.id = 'listing-' + i; - // Create a new link with the class 'title' for each store - // and fill it with the store address + // 为每一个商店添加一个title类的链接 + // 并将其与位置相互关联 var link = listing.appendChild(document.createElement('a')); link.href = '#'; link.className = 'title'; link.dataPosition = i; link.innerHTML = prop.address; - // Create a new div with the class 'details' for each store - // and fill it with the city and phone number + // 为每一个商店创建一个details类的div + // 并添加相应的城市和电话号码 var details = listing.appendChild(document.createElement('div')); details.innerHTML = prop.city; if (prop.phone) { @@ -346,25 +338,25 @@ function buildLocationList(data) { } ``` -Then, you will need to call this function when the map loads. You can do this by adding `buildLocationList(stores);` inside your `map.on('load', ...)` function after `addLayer()`. The result will look like this: +接下来，您可以通过调用这个方程来加载地图。您可以在`addLayer()`之后的`map.on('load', ...)`方程中调用这个方程`buildLocationList(stores);`。调用结果如下： {{ }} -## Make the map interactive +## 创建可交互式地图 -When a user clicks a link in the sidebar or on a point on the map, you want three things to happen: +当用户点击地图上的某个点或者侧边栏中的一个链接的时候，我们希望以下事件的发生： -1. The map to fly to the associated store location. -2. A popup to be displayed at that point. -3. The listing to be highlighted in the sidebar. +1. 地图自动显示商店的位置。 +2. 在标签上方自动弹出一个窗口。 +3. 选中的商店在侧边栏中高亮显示。 -This will require a bit more code, but you can do it! +这看上去比较复杂，但是我们可以做到！ -### Define interactivity functions +### 定义一个可交互式的方程 -First, define two functions: one that flies the map to the correct store, and one that displays a popup at that point. These functions will be fired both when a user clicks on a link in the sidebar listing and when a user clicks on a store location in the map. (Highlighting the listing on the sidebar will be handled separately for the two different click events.) +首先，我们需要两个方程：第一个方程能够将地图设置在正确的位置，第二个方程显示一个弹出窗口。这些方程会在用户点击侧边栏中的商店或者点击一个商店位置的时候同时被调用。我们将在之后创建我们的第三个方程来完成侧边栏的高亮显示功能。 ```js function flyToStore(currentFeature) { @@ -376,7 +368,7 @@ function flyToStore(currentFeature) { function createPopUp(currentFeature) { var popUps = document.getElementsByClassName('mapboxgl-popup'); - // Check if there is already a popup on the map and if so, remove it + // 我们需要检查并移除已经存在的弹出窗口 if (popUps[0]) popUps[0].remove(); var popup = new mapboxgl.Popup({ closeOnClick: false }) @@ -387,7 +379,7 @@ function createPopUp(currentFeature) { } ``` -You can also style your popups using CSS: +您可以自定义您的弹出窗口的风格样式： ```css /* Marker tweaks */ @@ -440,7 +432,7 @@ You can also style your popups using CSS: } ``` -For the `.remove()` method to work in older browsers, you will need to include the code below at the beginning of your script: +为了`.remove()`能够后相兼容老版本的浏览器，您需要在脚本开头处添加下面的代码： ```js // This will let you use the .remove() function later on @@ -453,24 +445,24 @@ if (!('remove' in Element.prototype)) { } ``` -See the [HTML documentation](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove) for more information. +请移步[HTML文档](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove)以获得详细信息。 -### Add event listeners +### 添加时间响应机制 -Now that you've defined these two functions, you want them to fire when a user clicks on a restaurant in the sidebar listing or when a user clicks on a restaurant on the map. To do this, you will add _event listeners_ that listen for "click" events and execute some function when they happen. You will add two event listeners: one for when a link in the sidebar is clicked and one for when a location on the map is clicked. +现在我们已经定义了两个方程，但是我们希望在用户点击的时候调用这两个方程。因此，我们需要添加_时间响应机制_，一旦用户做出了点击的操作，这个响应机制会自动检测到这个操作并调用一些方程。我们需要添加两个机制：一个机制响应对于侧边栏的点击，一个机制响应对于地图位置的点击。 -Use this code for when a link is clicked: +下面的代码实现了对链接点击事件的响应： ```js -// Add an event listener for the links in the sidebar listing +// 对链接点击的响应 link.addEventListener('click', function(e) { - // Update the currentFeature to the store associated with the clicked link + // 更新currentFeature至被点击的链接 var clickedListing = data.features[this.dataPosition]; - // 1. Fly to the point associated with the clicked link + // 1. 地图重定位 flyToStore(clickedListing); - // 2. Close all other popups and display popup for clicked store + // 2. 关闭其他所有的弹出窗口并显示新的弹出窗口 createPopUp(clickedListing); - // 3. Highlight listing in sidebar (and remove highlight for all other listings) + // 3. 移除所有的高亮显示并高亮显示新的链接 var activeItem = document.getElementsByClassName('active'); if (activeItem[0]) { activeItem[0].classList.remove('active'); @@ -479,25 +471,25 @@ link.addEventListener('click', function(e) { }); ``` -Use this code for when a location on the map is clicked: +下面的代码实现了对地图位置点击事件的响应： ```js -// Add an event listener for when a user clicks on the map +// 对地图位置点击事件的响应 map.on('click', function(e) { - // Query all the rendered points in the view + // 查询在视窗中所有的位置 var features = map.queryRenderedFeatures(e.point, { layers: ['locations'] }); if (features.length) { var clickedPoint = features[0]; - // 1. Fly to the point + // 1. 地图重定位 flyToStore(clickedPoint); - // 2. Close all other popups and display popup for clicked store + // 2. 关闭其他所有的弹出窗口并显示新的弹出窗口 createPopUp(clickedPoint); - // 3. Highlight listing in sidebar (and remove highlight for all other listings) + // 3. 移除所有的高亮显示并高亮显示新的链接 var activeItem = document.getElementsByClassName('active'); if (activeItem[0]) { activeItem[0].classList.remove('active'); } - // Find the index of the store.features that corresponds to the clickedPoint that fired the event listener + // 查找store.features与接受点击事件的clickedPoint所关联的索引号 var selectedFeature = clickedPoint.properties.address; for (var i = 0; i < stores.features.length; i++) { @@ -505,7 +497,7 @@ map.on('click', function(e) { selectedFeatureIndex = i; } } - // Select the correct list item using the found index and add the active class + // 选择被选中的商店并添加到active类中 var listing = document.getElementById('listing-' + selectedFeatureIndex); listing.classList.add('active'); } @@ -516,9 +508,9 @@ map.on('click', function(e) { }} -## Add custom markers +## 添加自定义标签 -This section will walk you through how to replace the existing standard symbol layer with custom markers. First, you will need to remove the existing symbol layer and related functions. Remove the symbol layer by deleting the `.addLayer()` function from your code, and replace it with the `.addSource()` code below. Instead of styling the symbol layer with `addLayer`, you will use the Markers API to add an image to each point in the GeoJSON data: +此部分的教程将展示如何使用自定义的地图标签。首先，您需要移除已存在的图层以及关联的方程。删除`.addLayer()`方程以移除图层，并添加`.addSource()`方程。之前我们使用`addLayer`方程来定义地图标签，但是现在我们要使用标签API来向GeoJSON数据中添加我们的标签图片： ```js map.addSource('places', { @@ -527,8 +519,7 @@ map.addSource('places', { }); ``` - -You'll also want to delete the [function that listened for a click on a symbol](#symbol-click) to fly to the location, display a popup, and highlight the list item. Then, add the custom Sweetgreen icons to the map using `mapboxgl.Marker()` objects. Unlike the symbol layer, which has symbols embedded in the map, `mapboxgl.Marker()` objects are HTML DOM elements that can be styled with CSS. Add a new class to the CSS called `.marker` and set the Sweetgreen marker you [downloaded](/help/demos/store-locator/marker.png) earlier as the `background-image`: +您也需要删除[响应标签点击事件的方程](#symbol-click)。我们之前创建了这个方程来完成地图重定位、显示弹出窗口以及高亮商店信息。然后，我们需要通过`mapboxgl.Marker()`添加我们自定义的Sweetgreen图标。与图表图层不同的是，图表图层包含自己的图标，但是`mapboxgl.Marker()`仅仅是HTML DOM元素，它可以进一步通过CSS来定义样式。添加一个`.marker`CSS样式然后将`background-image`设置为您之前已经[下载](/help/demos/store-locator/marker.png)好的Sweetgreen标签。 ```css .marker { @@ -541,35 +532,34 @@ You'll also want to delete the [function that listened for a click on a symbol]( } ``` -To add the new markers to the map, iterate through all stores and add the new marker to the map at each location: +我们可以通过遍历所有的商店，向地图给每一个商店添加新的标签： ```js stores.features.forEach(function(marker) { - // Create a div element for the marker + // 给标签创建一个div var el = document.createElement('div'); // Add a class called 'marker' to each div el.className = 'marker'; - // By default the image for your custom marker will be anchored - // by its center. Adjust the position accordingly - // Create the custom markers, set their position, and add to map + // 图片默认为中心显示。您可以调整显示的中心。 + // 创建自定义标签，调整中心位置，然后添加到地图中 new mapboxgl.Marker(el, { offset: [0, -23] }) .setLngLat(marker.geometry.coordinates) .addTo(map); }); ``` -### Add new event listeners +### 添加消息响应 -Now that you have replaced your symbols with markers, you will need to re-add some code for flying to the position on the map, displaying a popup, and highlighting the `list` item in the sidebar when clicking on the marker. Within your `forEach` function from above, add an event listener: +现在您已经添加了自定义的标签，您需要重新定义点击事件的响应方程来实现地图重定位、弹出窗口的显示以及商店信息的高亮显示。在您的`forEach`方程中我们需要添加一个响应方程: ```js el.addEventListener('click', function(e) { var activeItem = document.getElementsByClassName('active'); - // 1. Fly to the point + // 1. 地图重定位 flyToStore(marker); - // 2. Close all other popups and display popup for clicked store + // 2. 关闭其他所有的弹出窗口并显示新的弹出窗口 createPopUp(marker); - // 3. Highlight listing in sidebar (and remove highlight for all other listings) + // 3. 移除所有的高亮显示并高亮显示新的链接 e.stopPropagation(); if (activeItem[0]) { activeItem[0].classList.remove('active'); @@ -580,9 +570,9 @@ el.addEventListener('click', function(e) { }); ``` -### Final tweaks +### 微调 -You will need to adjust the position of the popup to account for the added height of the marker. You can do this using CSS: +再添加了标签之后，您需要调整自动弹出窗口的位置以防止遮挡。您需要修改一下CSS代码： ```css .mapboxgl-popup { @@ -590,26 +580,26 @@ You will need to adjust the position of the popup to account for the added heigh } ``` -At this point, you can also freshen up the type with Source Sans Pro: +您也可以使用Source Sans Pro来更改您的风格： ```html ``` -You'll need to update the `font` property in `body` style: +您需要相应地修改`body`风格中`font`属性: ```css font: 400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif; ``` -## Finished product +## 成果 -You have completed the store locator. +您已经成功创建了一个商店定位地图。 {{ }} -## Next steps +## 下一步 -After following this guide, you have the tools you need to create your own store locator. Explore more Mapbox GL JS resources on our [help page](/help/tutorials/). +您已经具备了创建属于你自己的商店定位地图的能力。请前文[帮助页面](/help/tutorials/)以获取更多的Mapbox GL JS操作技巧。 \ No newline at end of file diff --git a/Tutorials/power-bi-choropleth-map.md b/Tutorials/power-bi-choropleth-map.md index 69adb07..039c87e 100644 --- a/Tutorials/power-bi-choropleth-map.md +++ b/Tutorials/power-bi-choropleth-map.md @@ -17,7 +17,7 @@ prependJs: contentType: tutorial --- -In this tutorial, you will use the Mapbox Visual in [Microsoft Power BI](https://powerbi.microsoft.com/en-us/), data with information about US wildfires by state, and a custom tileset with information about US wildfires by county to create a choropleth visualization. This choropleth will display the number of acres burned at both the state and county levels, allowing you to drill into the data at the appropriate level. You will need a Mapbox account and a Microsoft Power BI account to complete this tutorial. +此教程将展示如何在微软Power BI(https://powerbi.microsoft.com/en-us/)中使用Mapbox Visual。我们将使用来自美国各州的自然火灾数据以及一个自定义的瓦片集来创建地区分布地图。瓦片集包含了以县为单位的美国自然火灾统计数据。地区分布图可以显示每个州和县不同的受灾程度，帮助读图人更好地从不同的尺度分析问题。您将需要一个Mapbox账户以及一个微软Power BI账户。 ![A screenshot of a choropleth visualization in Power BI](/help/img/3rdparty/power-bi-choropleth-final.png) @@ -25,71 +25,70 @@ In this tutorial, you will use the Mapbox Visual in [Microsoft Power BI](https:/ } > -

This guide walks through using the Mapbox Visual in Power BI Online. The process in Power BI Desktop is similar, but the interface is different.

+

此教程将展示如何在Power BI在线版本中使用Mapbox Visual。桌面版本的操作流程基本一致，但是界面有所区别。

 }} -## Getting started +## 准备工作 -Here are a few resources you'll need before you get started: +您需要进行以下准备工作： -- **Mapbox account**. You need a [Mapbox account](https://account.mapbox.com/auth/signup/) and a Mapbox access token, which you can find on the [Account page](https://account.mapbox.com/). -- **Microsoft Power BI account**. Sign into your [Power BI account](https://app.powerbi.com/) or create a new one. -- **Mapbox Visual for Power BI**. You can either add the Mapbox Visual using the Power BI Marketplace, or you can download the latest Mapbox Visual from the open-source GitHub repository. Both of these options are explained in detail in the tutorial. -- **Geospatial data.** You will upload this GeoJSON file, which contains county-level detail about wildfires in the United States, to Mapbox Studio as a tileset. +- **Mapbox账号**：如果要将Mapbox Visual工具添加到Power BI程序中，您将需要一个Mapbox秘钥。此秘钥可以通过[免费注册](https://account.mapbox.com/auth/signup/)获取。 +- **Power BI账号**：登陆您的[Power BI账号](https://app.powerbi.com/)或者创建一个新的账号。 +- **支持微软Power BI的Mapbox Visual插件**：您可以在Power BI应用中心找到并添加Mapbox Visual，或者您也可以从[Github](https://github.com/mapbox/mapboxgl-powerbi)下载[Mapbox Visual最新版本](https://github.com/mapbox/mapboxgl-powerbi/raw/master/dist/mapboxGLMap.pbiviz)。详情请阅读本教程。 +- **地理数据**：您需要上传一个GeoJSON文件，以作为Mapbox Studio中的瓦片集。这个文件包含了县级的美国森林火灾数据。 {{ }} -- **Dataset for Power BI**. You will upload this sample dataset, a CSV file that contains historical information about wildfires in the United States, to Power BI. +- **Power BI中的数据**：您需要上传下面的CSV样本数据集文件至Power BI中，这个文件中包含了美国自然火灾的历史数据。 {{ }} -## Upload your tileset to Mapbox +## 上传瓦片集至Mapbox中 -Before you can reference the geospatial data from the downloaded GeoJSON file in a Power BI report, you need to upload it to Mapbox as a [tileset](/help/glossary/tileset/). +在您能从Power BI报告中索引您已经下载的GeoJSON文件之前，您需要将此文件作为一个[瓦片集](/help/glossary/tileset/)上传至Mapbox中。 {{ } > -

To upload geospatial data to Mapbox as a tileset, the data must be in one of the following formats:

+

Mapbox只允许以下类型的文件上传为一个瓦片集：

  • MBTile
  • KML
  • GPX
  • GeoJSON
    • -
  • Shapefile (zipped)
    • +
  • Shapefile (压缩)
  • CSV
-

For information on upload file size limits for these formats, refer to the Uploads troubleshooting page.

+

在这里可以阅读更多的有关上传文件大小的限制。

 }} -1. Navigate to the [Tilesets page](https://www.mapbox.com/studio/tilesets/) in Mapbox Studio. -1. Click on the **New tileset** button. -![Screenshot showing the New tileset button in Mapbox Studio](/help/img/3rdparty/power-bi-new-tileset.png) -1. In the _New tileset_ window, you can either click the **Select a file** button and choose the file, or you can drag and drop the file directly into the window. -1. When you are prompted to do so, click **Confirm**. +1. 在Mapbox Studio中找到[瓦片集页面](https://www.mapbox.com/studio/tilesets/) +2. 点击**新的瓦片集**按钮。 +![Screenshot showing the New tileset button in Mapbox Studio](/help/img/3rdparty/power-bi-new-tileset.png)3. 在_新的瓦片集_窗口中，您可以点击**选择一个文件**并选择一个文件，或者您可以将您的本地文件直接拖拽到窗口中。 +4. 当您看到一个提示的时候，点击**确认**。 ![Screenshot showing the Confirm button in the New tileset window in Mapbox Studio](/help/img/3rdparty/power-bi-confirm-tileset-upload.png) -1. After the file uploads, you will see a confirmation success message. Click on the link in the confirmation message to open your new tileset’s information page. The tileset's information page includes the _tileset ID_, the layer's _name_, and the layer’s _properties_, all which you will need to reference in Power BI. +5. 当文件上传完毕之后，您将会看到一个完成消息。点击消息中的链接，您将可以直接打开新创建的瓦片集的信息页。这个信息页面包含了_瓦片集ID_，_图层名_，以及图层的_属性_。所有的这些信息您都可以在Power BI中索引。 -You will use these pieces of information in the [Add a custom tileset](#add-a-custom-tileset) section of this tutorial. For now, though, you will open Power BI. +您将会在[添加一个瓦片集](#add-a-custom-tileset)这一章中使用以上信息。现在，请打开Power BI。 -## Add data to Power BI +## 在Power BI中添加数据 -You will start by adding the wildfire data you downloaded to a new Power BI workspace. +首先，您需要将您所下载的自然火灾数据添加到一个新的Power BI工作环境中。 -1. In Power BI, click **Get Data**, which allows you to import data or connect to a data source. -1. Under the _Files_ option, click **Get**. -1. Choose **Local File** and upload the wildfire data CSV file. +1. 在Power BI中，点击**获取数据**。您将可以载入或者连接到一个数据源。 +2. 在_文件_选项中，点击**获取**。 +3. 选择**本地文件**以上传自然火灾CSV数据文件。 ![A screenshot showing how to upload a CSV to Power BI](/help/img/3rdparty/power-bi-choropleth-upload.png) @@ -98,110 +97,113 @@ You will start by adding the wildfire data you downloaded to a new Power BI work title="Notes on using a custom dataset in Power BI" imageComponent={} > -

Your dataset should be a CSV file with at least 2 columns. One column must be a unique identifier, which will be used to match a unique property from your tileset. The second column must be the value you want to connect to the unique identifier. (For the dataset in this example, the unique property is the `state_name`, which you will match to the pre-defined Power BI state tileset. The value you connect to the unique identifier will be the number of acres burned.)

+

您的CSV文件至少需要包含2列数据。一列数据是唯一的ID，这一列ID用于匹配每一个瓦片集。另一列是具体的数据值，数据值应该与每一个瓦片相互对应和关联。（此教程所使用的数据中，`state_name`是唯一识别ID，此ID将用于在Power BI中匹配美国各州的瓦片集。每个ID之后所赋予的数据值是对应的州的烧毁面积。）

}} -## Create a new report -1. Click on **My Workspace** and select the **Datasets** tab. -1. Click the **Create a report** option (the bar graph icon) next to the new dataset. This will open the report window. +## 创建一份新的报告 + +1. 点击**我的工作环境**并选择**数据集**标签。 +2. 点击新数据集旁边的**创建一份报告**选项（柱状图图标）。您将会看到一个报告结果窗口。 ![A GIF showing how to create a new report in Power BI](/help/img/3rdparty/power-bi-choropleth-new-report.gif) -## Add the Mapbox Visual to the report +## 将Mapbox Visual添加到报告中 -You can use the _Mapbox Visual for Microsoft Power BI_ with any dataset that contains geographic data values. To add the Mapbox Visual to your report: +您可以在_微软Power BI中的Mapbox Visual_中使用任何包含有地理信息的数据集。您需要以下步骤将Mapbox Visual添加到您的报告中： -1. In the _Visualizations_ pane, click the **Import a custom visual** option, represented by a three-dot icon. -1. Select **Import from marketplace**. -{{Screenshot showing how to import a visual from marketplace in Power BI}} -1. Enter "Mapbox" in the search menu and press enter. -1. Click the **Add** button next to the _Mapbox Visual_ option to add it to your Power BI report. After the Mapbox Visual is imported, it will appear as a blue Mapbox logo on the _Visualizations_ pane. +1. 在_可视化_窗格中，点击**载入一个自定义可视化**选项，此图标由三个小点组成。 +2. 选择**从工作环境载入**。 +{{如何从应用商店向Power BI中载入一个可视化}} +3. 在搜索栏中输入“Mapbox”并回车。 +4. 点击位于_Mapbox Visual_选项旁边的**添加**按钮，将一个可视化添加至您的Power BI报告中。添加完成之后，在您的_可视化_窗格中会显示一个蓝色的Mapbox图标。 -{{Screenshot showing the Mapbox Visual icon in the Visualizations pane in Power BI}} +{{Power BI可视化窗格中的Mapbox Visual图标}} {{ } > -

Alternatively, you can download the latest Mapbox Visual for Power BI from Mapbox's open-source GitHub repository:

+

您也可以下从Mapbox下载最新版本的Mapbox Visual。:

    -
  1. Click the Import a custom visual icon (three dots) and select Import from file.
    2. -
  2. Upload the latest Mapbox Visual.
    3. -
  3. A new blue Mapbox logo will appear in the Visualizations pane.
    4. +
  4. 点击载入一个自定义可视化工具图标（图标为三个小点）然后选择从文件导入。
    5. +
  5. 上传您刚才下载的Mapbox Visual最新版文件。
    6. +
  6. 一个蓝色的Mapbox图标将会在可视化窗格中显现。
 }} -## Build the choropleth visualization +## 创建地区分类可视化 -### Include an access token +### 提供一个Mapbox秘钥 -1. Click on the Mapbox icon in the _Visualizations_ pane to add a new visualization to your report. -1. In the **Fields** tab, drag the `state_name` field from your data onto the _Location_ shelf. You should see the Mapbox visualization container populate with instructions on how to create your first visualization. -{{Screenshot showing the state_name field in the Location shelf}} -1. Connect your Mapbox account using your access token: - - Click the **Click here to get a free Mapbox access token** link in the visualization container. Accept the external link request if prompted. You will be forwarded to either the Mapbox sign up page or your Mapbox account page. - - Copy your Mapbox Access token from your [account page](https://www.mapbox.com/account/access-tokens). - 1. Back in Power BI, go to the **Format** tab and open the **Viz Settings** option. Paste your access token in the _Access token_ field. +1. 选择_可视化_窗格中的Mapbox图标，添加一个新的可视化至您的报告中。 +2. 在**字段**标签中，将数据中`state_name`拖拽至_位置_栏中。Mapbox容器可视化会提供如何创建您的第一个可视化的后续步骤。 +{{state_name已经被添加到位置栏中}} +3. 通过您的秘钥连接Mapbox账号： + - 点击可视化容器中的**点击此处已获得一个免费的Mapbox秘钥**链接。如有提示，请允许访问外部链接。您将会被转移到Mapbox登录界面或者您的账户信息页面。 + - 在账户信息页面(https://www.mapbox.com/account/access-tokens)复制您的Mapbox秘钥。 +4. 返回Power BI界面，选择**格式**标签以打开**可视化设置**选项。在_秘钥_字段中粘贴您的秘钥。 -{{GIF showing how to add Mapbox access token in Power BI}} +{{在Power BI中添加Mapbox秘钥}} -### Create the choropleth +### 创建地区分布图 -1. In the **Viz Settings** pane, change the _Map Style_ option to _Dark_. -1. Drag the `ACRES` field from the data options onto the _Color_ shelf. -1. Go back to the **Format** tab. Switch the **Circle** option off and turn the **Choropleth** option on. +1. 在**可视化设置**窗格中，将_地图风格_设置为_暗黑_。 +2. 将数据集中的`ACRES`字段拖拽至_颜色_栏目中。 +3. 返回**格式**标签，关闭**圆圈**选项，打开**地区分布**选项。 -You will see a choropleth that visualizes the number of acres burned per state. +您将可以看到一个地区分布图。此图展示了美国各州的受灾面积统计情况。 ![Screenshot showing the choropleth visualization in Power BI](/help/img/3rdparty/power-bi-choropleth-visualization-on.png) -### Add a custom tileset +### 添加一个瓦片集 -To drill down more deeply into data about wildfires in the United States, you will reference the custom tileset with information about wildfires at the county level that you created in the first step of this tutorial. +如果想要展示更加详细的美国自然火灾数据，您需要将之前您所创建的县级瓦片集信息与您的可视化关联起来。 -To add this data to Power BI, you will plug its identifying features into the appropriate fields in Power BI. The information that you'll need from the tileset are the _tileset ID_, the _layer name_, and the _unique identifier property name_. +为了能够将县级信息添加到Power BI中，您需要将它们的ID与Power BI中对应的字段关联起来。您需要的信息有_瓦片集ID_、_图层名_以及_唯一属性名_。 -![Screenshot showing the elements necessary to add a tileset to Power BI: the tileset ID, the layer name, and the property name](/help/img/3rdparty/power-bi-tileset-details-pt2.png) +![将瓦片集添加到Power BI时所需要的信息：瓦片集ID、图层名以及属性名](/help/img/3rdparty/power-bi-tileset-details-pt2.png) -1. In the **Format** tab, click on **Choropleth** to open the choropleth layer settings. -1. Use the _Number of levels_ dropdown menu to change the number of levels to **2**. (Having two levels will allow you to drill down from the state-level data in Level 1 into the county-level data that you are adding now.) -1. In the _Level_ dropdown, select **Level 2**. -1. Click on the _Data Level 2_ dropdown. -1. Select the _Custom Tileset_ option. -{{Screenshot showing how to add a custom tileset to a choropleth in Power BI}} -1. In the _Vector Tile URL Level 2_ field, paste the tileset ID. The tileset ID in this field must always be preceded by `mapbox://`. -1. In the _Source Layer Name Level 2_ field, paste the layer's name. -1. In the _Vector Property Level 2_ field, enter the unique identifier property name: `id`. -1. Click on the **Fields** tab again. Drag the `county_id` field from the data options onto the _Location_ shelf. +1. 在**格式**标签中，点击**地区分布图**打开一个地区分布图层的设置窗口。 +2. 在_等级数_下拉菜单中选择`2`。（设置两个等级是为了能够将州级设置为1，将您将要添加的县级数据设置为2。） +3. 在_等级_下拉菜单中选择`2`。 +4. 点击_数据等级2_下拉菜单。 +5. 选择_自定义瓦片集_选项。 +{{如何向Power BI中的地区分布图添加一个自定义的瓦片集}} +6. 在_等级2矢量瓦片URL_字段中，输入瓦片集的ID。这个字段中的瓦片集ID必须以`mapbox://`开头。 +7. 在_等级2源图层名_字段中，输入图层名。 +8. 在_等级2矢量属性_字段中，输入唯一识别的属性名：`id`。 +9. 再次点击**字段**标签。将数据选项中的`county_id`字段拖拽至_位置_栏中。 {{ - + }} {{ } > -

The boundaries in a custom tileset should contain one unique identifying property key that matches the dataset you are using in Power BI. Common examples are: FIPS code, zip code, ISO code, or any unique name string.

+

瓦片集的边界必须包含一个唯一识别的属性列，这个属性列将用于与Power BI中的数据集做匹配。常用的有：FIPS码、邮编、ISO码或者任何的唯一字符串。

 }} -## Final product +## 最终成果 + +使用位于可视化窗口左上角的按钮实现在州和县级数据之间的切换。将鼠标停在一个州或者县区域可以显示此地区的受灾统计面积。 -Use the buttons on the upper left side of the visualization to drill up to the state level or down to the county level. Hover over a state or county to see the number of acres burned in that specific boundary. +![图为Power BI中一个县级的地区分布可视化](/help/img/3rdparty/power-bi-choropleth-counties.png) -![Screenshot showing a county-level choropleth visualization in Power BI](/help/img/3rdparty/power-bi-choropleth-counties.png) +至此，您已经使用微软Power BI中的Mapbox Visual创建了一个地区分布可视化。 -You have created a choropleth visualization in Microsoft Power BI using the Mapbox Visual for Power BI. +## 下一步 -## Next steps +您可以尝试更多的自定义地区分布可视化的方法。例如，您可以使用在**格式**标签中的**地区分布**设置以改变可视化的色彩设计。 -Explore ways to further customize the choropleth. For instance, you could use the **Choropleth** settings in the **Format** tab to change the color range of the visualization. +请前往[Github](https://github.com/mapbox/mapboxgl-powerbi)或者[客服](https://www.mapbox.com/contact/support/#other)寻求更多的帮助。 -For support and troubleshooting with the Mapbox Visual, open an issue in the [open source repository](https://github.com/mapbox/mapboxgl-powerbi) or [contact our support team](https://www.mapbox.com/contact/support/#other). +想要学习更多的有关Mapbox和Power BI的知识吗？请移步此处以探索更多的可能性，包括 -Want to do more with Mapbox and Power BI? [Contact Mapbox sales](https://www.mapbox.com/contact/sales) to learn what else is possible, from adding custom shapes to visualize territories, adding detailed indoor maps, or visualizing billions of data points. +想要更加深入的学习Mapbox和Power BI吗？[在这里](https://www.mapbox.com/contact/sales)您可以了解到更多的可能性，包括通过添加自定义的shapefile文件来可视化领土范围、添加详细的室内地图，或者是大型点集数据的可视化。 diff --git a/Tutorials/power-bi.md b/Tutorials/power-bi.md index f2623f0..74103b8 100644 --- a/Tutorials/power-bi.md +++ b/Tutorials/power-bi.md @@ -16,186 +16,184 @@ prependJs: contentType: tutorial --- -Create customizable heatmaps, point cluster maps, and graduated circle maps with the **Mapbox Visual for Power BI** using Microsoft Power BI Desktop and Online. The Mapbox Visual can be imported and accessed as a visualization plugin inside Power BI. This guide will walk through getting started with the Mapbox Visual and how to create a Mapbox-powered visualization in [Microsoft Power BI](https://powerbi.microsoft.com/en-us/). You will need a Mapbox account and a Microsoft Power BI account to complete this tutorial. +通过使用微软Power BI桌面版以及在线版所提供的Mapbox Visual工具，制作可定制化的热力图、点状聚类图以及可变尺寸圆圈统计图。 + +Mapbox Visual可以在Power BI程序中作为一个可视化插件使用。此教程将会展示Mapbox Visual的一些初级使用技巧以及如何使用[微软Power BI](https://powerbi.microsoft.com/en-us/)来创建一个Mapbox驱动的可视化实例。此教程要求您已经拥有一个Mapbox的账号以及一个微软Power BI的账号。 ![an interactive data visualization on a map](/help/img/3rdparty/power-bi-final-product.gif) -## Getting started +## 准备工作 -Here are a few resources you'll need before you get started: +您需要进行以下准备工作： -- **Mapbox account**. You will need a Mapbox access token to add the Mapbox Visual in Power BI. Sign up for a free account on [Mapbox](https://account.mapbox.com/auth/signup/). -- **Power BI account**. Sign into your [Power BI account](https://app.powerbi.com/) or create a new one. -- **Mapbox Visual for Microsoft Power BI**. You can either add the Mapbox Visual using the Power BI Marketplace, or you can download the latest Mapbox Visual from the open-source GitHub repository. Both of these options are explained in detail in the tutorial. -- **Data**. This guide uses a sample CSV file with US healthcare spending derived from [data.gov](https://catalog.data.gov/dataset/). +- **Mapbox账号**：如果要将Mapbox Visual工具添加到Power BI程序中，您将需要一个Mapbox秘钥。此秘钥可以通过[免费注册](https://account.mapbox.com/auth/signup/)获取。 +- **Power BI账号**：登陆您的[Power BI账号](https://app.powerbi.com/)或者创建一个新的账号。 +- **支持微软Power BI的Mapbox Visual插件**：您可以在Power BI应用中心找到并添加Mapbox Visual，或者您也可以从[Github](https://github.com/mapbox/mapboxgl-powerbi)下载[Mapbox Visual最新版本](https://github.com/mapbox/mapboxgl-powerbi/raw/master/dist/mapboxGLMap.pbiviz)。详情请阅读本教程。 +- **数据**：本教程使用的数据来自于[美国的人寿保险开销的统计数据](https://catalog.data.gov/dataset/)。 {{ }} -## Add data to Power BI - -Start by adding data to a Power BI workspace. +## 向Power BI中添加数据 +我们首先介绍如何向Power BI工作环境中添加数据。 {{}>}} -This guide walks through using the Mapbox Visual in Power BI Online. The process in Power BI Desktop is similar, but the interface is different. +这部分教程将展示如果在Power BI在线版本中使用Mapbox Visual。桌面版的操作流程基本一致，但是界面有所差别。 {{}} -### Add a new dataset - -1. Sign into your Power BI account. -1. Click **Get Data** to import or connect to a data source. -1. To import the healthcare data you downloaded earlier, choose to _Import_ a _File_. -1. Choose _Local file_ and upload the CSV file. +### 添加一个新的数据集 +1. 登陆您的Power BI账号。 +2. 点击**获取数据**以载入或者连接数据集。 +3. 选择_载入一个文件_以载入您之前已经准备好的数据集。 +4. 选择_本地文件_以上传本地的CSV格式的文件。 {{}>}} -You can use the _Mapbox Visual for Microsoft Power BI_ with any dataset that contains geographic longitude and latitude data values. +您可以在_微软Power BI中的Mapbox Visual_使用包含地理坐标信息的任何数据。 {{}} ![add a new data file to your Power BI account](/help/img/3rdparty/power-bi-add-data.png) -### Create a new report +### 创建一个新的报告 -In your Power BI workspace, navigate to the **Datasets** tab and create a new report by clicking the bar graph icon next to your new dataset. The report window will open and you will be able to edit your new report. +在您的Power BI工作环境中，点击**数据集**标签，然后点击柱状图图标以创建一个新的报告。报告结果窗口会自动弹出，您将可以在这个窗口中修改报告。 ![create a new report in your Power BI workspace](/help/img/3rdparty/power-bi-create-workspace.gif) -### Add the Mapbox Visual to your Report +### 将Mapbox Visual添加到您的报告中 -You'll add the Mapbox Visual using the _Visualizations_ pane: +您需要通过使用_可视化_窗格来添加Mapbox Visual工具。 -1. In the _Visualizations_ pane, click the **Import a custom visual** option, represented by a three-dot icon. -1. Select **Import from marketplace**. -1. Enter "Mapbox" in the search menu and press enter. -1. Click the **Add** button next to the _Mapbox visual_ option to add it to your Power BI report. It will appear as a blue Mapbox logo on the _Visualizations_ toolbar. +1. 在_可视化_窗格中，点击选项**载入自定义可视化**。选项图标由三个小点构成。 +2. 选择**从应用商店导入**。 +3. 在搜索栏中输入“Mapbox”并回车。 +4. 点击位于_Mapbox Visual_选项旁边的**添加**按钮以将其添加至您的Power BI报告中。成功添加后，Mapbox的蓝色图标会显示在_可视化_工具栏中。 {{Screenshot showing the Mapbox Visual icon in the Visualizations pane in Power BI}} {{}>}} -Alternatively, you can download the latest [Mapbox Visual for Power BI](https://github.com/mapbox/mapboxgl-powerbi/raw/master/dist/mapboxGLMap.pbiviz) from Mapbox's [open-source GitHub repository](https://github.com/mapbox/mapboxgl-powerbi): +或者你也可以从[Mapbox](https://github.com/mapbox/mapboxgl-powerbi)下载[最新版本的Mpabox Visual](https://github.com/mapbox/mapboxgl-powerbi/raw/master/dist/mapboxGLMap.pbiviz): -1. Click the **Import a custom visual** icon (three dots) and select **Import from file**. -1. Upload the [latest Mapbox Visual](https://github.com/mapbox/mapboxgl-powerbi/raw/master/dist/mapboxGLMap.pbiviz). -1. A new blue Mapbox logo will appear in the _Visualizations_ pane. +1. 点击**添加一个自定义可视化插件**按钮并选择**从文件导入**。 +2. 上传[最新版本的Mapbox Visual文件](https://github.com/mapbox/mapboxgl-powerbi/raw/master/dist/mapboxGLMap.pbiviz)。 +3. 一个蓝色的图标会在添加成功后显示在_可视化_窗格中。 {{}} -## Create a visualization +## 创建一个可视化 -Click on the Mapbox icon in the _Visualizations_ pane to add a new visualization to your report. While customizing your visualization, you'll work in both the _Fields_ and _Format_ panels within the _Visualizations_ pane: +点击_可视化_窗格中的Mapbox图标以在您的报告中添加一个新的可视化。在自定义您的可视化过程中，您将会同时使用_可视化_窗格中的_字段_和_格式_窗格： -- The _Fields_ panel is where you will specify which data fields to associate with different types of Mapbox layers (for example map styles, heatmaps, circle maps, and cluster aggregation). -- The _Format_ panel is where you will specify the visualization style for each layer, such as color and radius. +- _字段_窗格能够将数据字段和不同的Mapbox图层（例如热力图、圆圈统计图、聚类图）相互连接。 +- _格式_窗格可以用于定义每一个图层的可视化风格，例如颜色和半径范围。 -### Initialize a visualization +### 初始化一个可视化 -In the _Fields_ panel, drag the `latitude` and `longitude` fields from your data onto the _Latitude_ and _Longitude_ shelves, and make sure that the _Do not summarize_ option is checked for both fields. You should see the Mapbox visualization container populate with instructions on how to create your first visualization. +在_字段_窗格中，将数据中`latitude`和`longitude`字段分别拖拽至_Latitude_以及_Longitude_栏目中。请务必将两个字段的_无需总结_选项选中。Mapbox可视化容器会自动弹出指令以帮助您完成您的第一个可视化。 -Connect your Mapbox account using your access token: +通过秘钥连接您的Mapbox账号： -1. Click on the link, **Click here to get a free Mapbox access token**, in the visualization container. Accept the external link request if prompted. You will be forwarded to either the Mapbox sign up page or your Mapbox account page. -1. If you don’t have a Mapbox account, sign up with your email address. -1. Copy your Mapbox Access token from your [account page](https://www.mapbox.com/account/access-tokens). -1. Back in Power BI, go to the _Format_ panel and find the _Viz Settings_ option. Paste your access token in the _Access token_ field. +1. 在可视化容器中点击链接，**点击此处以获取免费Mapbox秘钥**。如有提示，请允许访问外部链接。您将会被转接到Mapbox登录界面。 +2. 如果您没有Mapbox账号，您可以使用你的邮箱注册新的账号。 +3. 在[账户页面](https://www.mapbox.com/account/access-tokens)复制您的Mapbox秘钥。 +4. 返回到Power BI，在_格式_窗格中找到_可视化设置_选项并在_秘钥_一栏中粘贴您的秘钥。 ![animated GIF illustrating the process outlined above](/help/img/3rdparty/power-bi-initiate-viz.gif) -You will see your first map visualization! +您将会看到你的第一个地图可视化！ ![the resulting data visualization: a map with uniform circles at every point from the dataset](/help/img/3rdparty/power-bi-first-visualization.png) -### Change the map style +### 修改地图风格 -With the Mapbox Visual for Power BI, you can change the map style used in your visualizations. You can use any Mapbox default style or create a custom map style with Mapbox Studio. To update the map style: +您可以利用Power BI中的Mapbox Visual来修改可视化中的地图风格。您可以使用任何Mapbox的默认设置，也可以在Mapbox Studio中自定义新风格。如果需要更新您的地图风格，您需要： -1. In the _Format_ panel, select _Viz Settings_ > _Map Style_. -1. Select from any default map style. This example uses the Mapbox Satellite style. +1. 在_字段_窗格中，选择_可视化设置_ > _地图风格_。 +2. 选择任何一个默认的地图风格。此教程使用Mapbox卫星图风格。 {{}>}} -You can use any custom map style from your Mapbox Studio account by selecting **Custom style**. This is useful for adding custom polygons, drone imagery, or finely-tuning the context and design of your Mapbox visualization to help answer your business question. +在**自定义风格**中，您可以从您的Mapbox Studio账户中选择任何一个您的自定义地图风格。这一项功能对于添加自定义多边形和无人机影像，或者对于Mapbox可视化内容以及设计格式的微调都非常重要，它能够更好的帮助您突出您的设计意图及宗旨。 -When you select **Custom style**, you will be prompted to add a _style URL_. To learn how to find your custom style URL, read about more about [style URLs](/help/glossary/style-url). +当您使用**自定义风格**的时候，系统会提示您添加一个_风格链接_。请访问[此链接](/help/glossary/style-url)以获取更多的关于自定义风格链接的信息。 +如果您想要学习更多的关于在Mapbox Studio中创建自定义地图风格的知识，请阅读[Mapbox Studio使用手册](https://docs.mapbox.com/studio-manual/)或者这篇[关于创建自定义地图风格的教程](/help/tutorials/create-a-custom-style)。如果您有任何问题，请联系[Mapbox客服](https://www.mapbox.com/contact/support)。 -To learn more about creating custom map styles in Mapbox Studio, explore the [Mapbox Studio manual](https://docs.mapbox.com/studio-manual/) or the [Create a custom map style](/help/tutorials/create-a-custom-style) tutorial. Have questions on how to implement these features? Reach out to our [support team](https://www.mapbox.com/contact/support). {{}} -Now you'll see your data on top of a satellite map. +现在，您的数据已经叠加在了卫星图层上。 ![the same data visualization as above, but with a satellite map behind the circle layer](/help/img/3rdparty/power-bi-viz-settings-map-style.png) -## Create a cluster layer - -Next, you'll adjust the visualization to illustrate where the average covered costs are lowest in the US using a cluster layer. +## 创建一个聚类图层 -In the _Fields_ panel, add the `Avg Covered Charges` field from your data to the _Cluster_ shelf. +接下来，您将通过调节可视化参数以及使用一个聚类图来展示美国平均人寿保险支出最低的区域。 -In the _Format_ panel: +在_字段_窗格中，在您的数据把`平均保险费用`字段添加到_聚类_栏目中。 -1. Turn the _Cluster_ layer **On** and the _Circle_ layer **Off**. -1. Under _Cluster_, select `maximum` from the _Aggregation type_ drop down list. +在_格式_窗格中： -![animated GIF illustrating the process outlined above to add a cluster layer](/help/img/3rdparty/power-bi-cluster.gif) +1. 显示_聚类_图层，隐层_圆圈_图层。 +2. 在_聚类_中，从_聚类算法类型_下拉菜单中选择`最大值`。 -### Style the cluster visualization +### 修改聚类可视化的风格 -In the cluster _Format_ panel: +在_格式_窗格中： -1. Change the _Min Color_ to `FEC0BF` and the _Max Color_ to `FF0027`. -1. Change the _Cluster Radius_ to `30`. -1. Set the _Blur_ to `0`. -1. Set the _Stroke Width_ to `3`. -1. Set the _Max Zoom_ to `6`. +1. 将_最小颜色值_修改为`FEC0BF`，将_最大颜色值_修改为`FF0027`。 +2. 将_聚类半径_修改为`30`。 +3. 将_模糊值_修改为`0`。 +4. 将_笔画粗细_修改为`3`。 +5. 将_最大放大倍数_修改为`6`。 ![screenshot of the Power BI UI with the properties as specified above](/help/img/3rdparty/power-bi-cluster-styled.png) -## Update layers based on zoom level +## 根据缩放度更新图层 -Sometimes you may want to visualize data differently at different zoom levels. With the Mapbox Visual for Power BI, you can use multiple layers in a single visualization and specify at which zoom levels each layer should be displayed. Here, you'll show a cluster layer at low zoom levels (zoomed further out) and a circle layer at high zoom levels (zoomed further in). +如果您想要在不同的缩放程度下显示不同的数据，您可以通过Power BI的Mapbox Visual，在同一个可视化中使用多个图层。您需要给每一个缩放度设置一个对应的显示图层。接下来这个例子展示了如何设置在缩小图层的时候显示一个聚类图，在放大图层的时候显示一个圆圈统计图。 -### Add data properties to shelves +### 将数据属性添加至栏目 -In the _Fields_ panel: +在_字段_窗格中： -1. Add the `Average covered charges` data field to both the _Color_ and _Size_ shelves. -1. Add `Provider Id` to the _Tooltip_ shelf. +1. 给`平均保险费用`添加_颜色_和_尺寸_栏目。 +2. 将`提供人ID`添加到_提示_栏目中。 ![screenshot of the Power BI UI with the properties as specified above](/help/img/3rdparty/power-bi-add-shelves.png) -### Style the circle layer +### 修改圆圈的风格 -Then, in the _Format_ panel re-enable the circle layer by toggling the _Circle_ layer **On**, and update the style properties: +在_格式_窗格中将_圆圈_图层重新设置为**显示**，并更新风格属性： -1. Set the circle _Radius_ to `1` and the _Zoom scale_ factor to `10`. -1. Set the circle _Min Color_ to `FEC0BF`, _Med Color_ to `FD817E`, and _Max Color_ to `FF0027`. -1. Set the circle _Stroke Color_ to white. -1. Set the circle _Min Zoom_ to `6`. This will hide the circle layer while the cluster visualization is being displayed. +1. 将圆圈的_半径_设置为`1`，将_缩放尺度_设置为`10`。 +2. 将圆圈的_最小颜色值_设置为`FEC0BF`，_中等颜色值_设置为`FD817E`，以及_最大颜色值_设置为`FF0027`。 +3. 将圆圈的_笔画颜色_设置为白色。 +4. 将圆圈的_最小缩放度_设置为`6`。当聚类图层显示的时候，圆圈统计图图层会隐藏。 ![screenshot of the Power BI UI with the properties as specified above](/help/img/3rdparty/power-bi-update-on-zoom.png) -## Final product +## 最终结果图 -You created a visualization in Microsoft Power BI using the Mapbox Visual for Power BI. +您已经成功使用微软Power BI中的Mapbox Visual工具制作一份可视化报告。 ![an interactive data visualization on a map](/help/img/3rdparty/power-bi-final-product.gif) -## Next steps +## 下一步 -For support and troubleshooting with the Mapbox Visual, you can open an issue in our [open source repository](https://github.com/mapbox/mapboxgl-powerbi) or [contact our support team](https://www.mapbox.com/contact/support/#other). +您可以在[Github](https://github.com/mapbox/mapboxgl-powerbi)或者[客服处](https://www.mapbox.com/contact/support/#other)寻求更多的帮助或者排查疑难杂症的经验。 -Want to do more with Mapbox and Power BI? [Contact sales](https://www.mapbox.com/contact/sales) to learn what else is possible — from adding custom shapes to visualize territories, adding detailed indoor maps, or visualizing billions of data points. +想要更加深入的学习Mapbox和Power BI吗？[在这里](https://www.mapbox.com/contact/sales)您可以了解到更多的可能性，包括通过添加自定义的shapefile文件来可视化领土范围、添加详细的室内地图，或者是大型点集数据的可视化。