VUE中mapbox的一些操作，mapbox增加缩减控件，以及去掉mapbox的logo

//安装 mapbox-gl
npm install --save  mapbox-gl
//安装语言包（地图英文转中文，见下面）
npm install --save mapbox-gl   @mapbox/mapbox-gl-language

<template>
  <div id="leafletMapDiv"></div>
  <pre id="location"></pre>
</template>

<script>
import mapboxgl from 'mapbox-gl';
import MapboxLanguage  from '@mapbox/mapbox-gl-language'
export default {
  name: "erDmap",
  mounted() {
    this.initDemoMap();
  },
  methods: {
    initDemoMap() {
      mapboxgl.accessToken =' 这里请换成自己的token'; //这里请换成自己的token
      var leafletMap = new mapboxgl.Map({
        container: 'leafletMapDiv', // container id 绑定的组件的id
        style: "mapbox://styles/mapbox/navigation-guidance-night-v4", //地图样式，可以使用官网预定义的样式,也可以自定义
        center: [120.7921, 30.6683],
        zoom: 9,     // starting zoom 地图初始的拉伸比例
        pitch: 0,  //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
        bearing: -17.6, //地图的初始方向，值是北的逆时针度数，默认是0，即是正北
        zoomControl: true,
        antialias: true, //抗锯齿，通过false关闭提升性能
        attributionControl: false,
      });
      
      //加入缩放控件
      var nav = new mapboxgl.NavigationControl();
      leafletMap.addControl(nav, 'top-left');
      
      //去除mapbox的logo
      leafletMap._logoControl && leafletMap.removeControl(leafletMap._logoControl);
      
     //地图英文转中文
      var language = new MapboxLanguage({ defaultLanguage: "zh" });
      leafletMap.addControl(language);

//获取鼠标位置，显示经纬度
      leafletMap.on('mousemove',e=> {
        var location = leafletMap.queryRenderedFeatures(e.point);
        document.getElementById('location').innerHTML = "<p>" + e.lngLat.lng.toFixed(4) + "," + e.lngLat.lat.toFixed(4) + "</p>";

      });
      }
      }
      }
</script>

<style scoped>
#leafletMapDiv {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

#location {
  position: absolute;
  z-index: 1000;
  top: 50px;
  right: 25px;
  width: 100px;
  height: 20px;
  color: white;

}