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

<template>
  <div style="height:100%;width:100%;">
    <div ref="basicMapbox" :style="mapSize"></div>
  </div>
</template>
<script>
import mapboxgl from "mapbox-gl";  // 引包方式二
import MapboxLanguage  from '@mapbox/mapbox-gl-language'
export default {
  props: {
    mapWidth: {
      type: String
    },
    mapHeight: {
      type: String
    }
  },
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化
    init() {
      mapboxgl.accessToken =
        "pk.eyJ1IjoiZmFuZ2xhbmsiLCJhIjoiY2lpcjc1YzQxMDA5NHZra3NpaDAyODB4eSJ9.z6uZHccXvtyVqA5zmalfGg";
      // 英文标注转换为中文   
      mapboxgl.setRTLTextPlugin(
        "https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js"
      );
      const map = new mapboxgl.Map({
        container: this.$refs.basicMapbox,
        // style: "mapbox://styles/mapbox/streets-v9",  // streets-v9 版本错误应为  streets-v11
        style: "mapbox://styles/mapbox/streets-v11",
        center: [114, 38.54],
        zoom: 6
      });
      // 设置语言
      var language = new MapboxLanguage({ defaultLanguage: "zh-Hans" });
      map.addControl(language);

      // 地图导航
      var nav = new mapboxgl.NavigationControl();
      map.addControl(nav, "top-left");
      // 比例尺
      var scale = new mapboxgl.ScaleControl({
        maxWidth: 80,
        unit: "imperial"
      });
      map.addControl(scale);
      scale.setUnit("metric");
      // 全图
      map.addControl(new mapboxgl.FullscreenControl());
      // 定位
      map.addControl(
        new mapboxgl.GeolocateControl({
          positionOptions: {
            enableHighAccuracy: true
          },
          trackUserLocation: true
        })
      );
      // console.log(map)
    }
  },
  computed: {
    mapSize() {
      let styleObj = {
        width: this.mapWidth,
        height: this.mapHeight
      };
      return styleObj;
    }
  }
};
</script>
<style>
@import url("https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css");
.mapboxgl-map {
  height: 100%;
  width: 100%;
}
</style>

效果-版本报错-streets-v9

效果-正确版本-streets-v11