vue中，应用mapbox地图（一）——mapbox-gl地图设置中文是zh-Hans不是zh & accessToken-访问令牌 & 正确版本streets-v11

vue中，应用mapbox地图（一）——mapbox-gl地图设置中文是zh-Hans不是zh & accessToken-访问令牌 & 正确版本streets-v11

Mapbox GL JS是一个JavaScript库，使用WebGL渲染交互式矢量瓦片地图和栅格瓦片地图。WebGL渲染意味着高性能，MapboxGL能够渲染大量的地图要素，拥有流畅的交互以及动画效果、可以显示立体地图并且支持移动端，是一款十分优秀的WEB GIS开发框架。

1、开始

开始之前你需要准备:

An access token你可以在此帐户页面申请.

Android Studio 你可以从谷歌免费下载

谷歌玩开发者账户(可选) 如果你想发布您的应用程序到谷歌play,你需要一个谷歌开发者账户。即使没有,你还是可以预览应用程序在一个Android虚拟设备(AVD)或演示应用程序从一个SDK安装在一个物理设备。

必须带token使用，无论使用不使用官方数据服务。

使用会计数，超过免费额度就要收费，不使用官方用自己的不收费，但还是要token联网。2.0之后等于放弃离线内网用户。一般内网用户不能再升v2了，从1.13开始，自己扩展如地形等功能使用。

2、访问令牌（Access tokens）

使用Mapbox服务和api,如地图、方向,和地理编码,你必须有一个Mapbox访问令牌。你可以找到你的访问令牌你的帐户设置,您可以检索当前令牌并生成新的。访问令牌帮助您跟踪使用情况和最小化中断事件令牌需要撤销。

首先,进入你的帐户设置,创建一个新的访问令牌 My First Mapbox App。

在使用之前，需要先设置mapboxgl.accessToken。accesstokens(访问令牌)可以使用API提供的示例(如下)，也可以注册MapBox账号,在用户信息页查看或者创建令牌。

3、英文切换中文 第一种方式：

# 安装语言包
npm install --save mapbox-gl @mapbox/mapbox-gl-language

导入

import mapboxgl from 'mapbox-gl'
import MapboxLanguage  from '@mapbox/mapbox-gl-language'

配置

  //中文设置
  mapboxgl.setRTLTextPlugin(
        "https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js"
      );
  var language = new MapboxLanguage({ defaultLanguage: "zh-Hans" });
      map.addControl(language);

中文设置的参数是zh-Hans，才能转换为中文

第二种方式：

1、public中的index.html中引入mapbox-gl-language.js

  <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v0.10.0/mapbox-gl-language.js'></script>

使用

注意：mapbox.setRTLxxx这个代码别放在mounted中，会报错

mapboxgl.setRTLTextPlugin(
          "https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js"
        );
map.addControl( new MapboxLanguage({ defaultLanguage: "zh-Hans" }) );// 不是zh

4、实例

第一步：安包

# 地图包
npm install mapbox-gl --save
# 地图语言包
npm install --save mapbox-gl @mapbox/mapbox-gl-language

第二步：引包

src/main.js

// 引包方式一
import mapBoxGl from 'mapbox-gl'
Vue.prototype.mbgl = mapBoxGl

第三步：页面使用

map/index.vue

效果-版本报错-streets-v9

效果-正确版本-streets-v11