1. 安装leaflet
npm install leaflet -S
2. main.js中引用leaflet
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
// 定义全局变量
Vue.prototype.$L = L
3. 创建/挂载地图实例
<template>
<div id="map"></div>
</template>
<script>
export default {
data () {
return {
map: null
}
},
methods: {
initMap () {
// 使用mapbox自定义地图样式,可自行去mapbox申请[token](https://account.mapbox.com/)和[key](https://studio.mapbox.com/)
let url = 'https://api.mapbox.com/styles/v1/key/tiles/256/{z}/{x}/{y}?access_token=token';
this.map = this.$L.map('map', {
minZoom: 2,// 地图最小缩放层级
maxZoom: 20,// 地图最大缩放层级,
maxBounds: [
[
[85, -(180 * 100)],// 西南
[-85, 180 * 100]// 东北
]
], // 最大缩放区域
crs: this.$L.CRS.EPSG3857,// 坐标系
center: [37, 120],// 地图中心
zoom: 5,// 地图默认缩放层级
fullscreenControl: false,// 是否显示全屏控件
zoomControl: false,// 是否显示缩放控件
inertia: true,// 是否开启惯性,在拖动和在某一时间段内持续朝同一方向移动建有动力的地图时,会有惯性的效果
attributionControl: false// 属性控制是否默认加载在地图上
});
// 将mapbox自定义样式添加到地图中
this.map.addLayer(this.$L.tileLayer(url));
}
},
mounted () {
this.initMap()
}
}
</script>
4. 地图事件
this.map.on('zoom', () => {// 地图缩放事件})
this.map.on('moveend', () => {// 地图移动结束事件})
其余事件
- 地图状态改变事件:load, uplaod, move, zoomed, resize等
- 交互事件:click, dbclick, mousedown, mouseup, mouseover, mouseout, mousemove等
- 弹出框事件:popupopen,poppclose等
- 图层事件:baselayerchange,overlayadd,overlayremove,layeradd,layerremove等