// npm install deck.gl --save
npm install --save mapbox-gl
// 安装语言包
npm 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>
CSS引入
在<head>标签中
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
或者
import 'mapbox-gl/dist/mapbox-gl.css'
网友评论