Vue中使用leaflet地图

Leaflet官方文档

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等

下一节 vue+leaflet添加单个图标和多个图标