mapbox中文地图_vue 集成mapbox gl并设置中文语言

// npm install deck.gl --save

npm install --save mapbox-gl

// 安装语言包

npm install --save mapbox-gl @mapbox/mapbox-gl-language

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;

}

}

};

@import url("https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css");

.mapboxgl-map {

height: 100%;

width: 100%;

}

CSS引入

在

标签中

或者

import 'mapbox-gl/dist/mapbox-gl.css'