//安装 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;
}