vue 集成mapbox gl并设置中文语言

最新推荐文章于 2024-08-21 08:56:45 发布

皓月星辰_w

最新推荐文章于 2024-08-21 08:56:45 发布

阅读量2.1k

点赞数 1

分类专栏： Vue

原文链接：https://www.jianshu.com/p/78029716d08f

版权

Vue 专栏收录该内容

2 篇文章 2 订阅

订阅专栏

// npm install deck.gl --save
cnpm install --save mapbox-gl
// 安装语言包
cnpm install --save mapbox-gl @mapbox/mapbox-gl-language

<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.eyJ1IjoiYW56aGlodW4iLCJhIjoiY2lsdnhjdjN5MDFvMHVia3NpYTlnbmUzaSJ9.twlExCjpR7uwH2IiFC7aDA";
// 英文标注转换为中文   
   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",
        center: [114, 38.54],
        zoom: 6
      });
      // 设置语言
      var language = new MapboxLanguage({ defaultLanguage: "zh" });
      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>