leaflet讲解:vue中使用leaflet加载wmts瓦片地图（1）

哈喽大家好，很高兴在优快云博客跟大家第一次见面。前几天做了一个基于leaflet加载wmts瓦片离线地图的项目。发现由于VUE最近的兴起leafle并没有根据vue中如何使用它的教程。这对于我们这些小白很不友好所以我准备在这里分几个步骤为大家讲解。
今天我们就来先尝试使用leaflet加载瓦片地图。首页我们要在vue文件中安装leafle和leafle.wmts插件（注：leafle并不具备加载wmts功能）

npm install leaflet --save
npm install leaflet.wmts --save

等待leaflet成功安装好后我们需要在main.js中引用leaflet和leaflet.wmts

//Leaflet全局配置
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet.wmts'
Vue.use(L)

下面在vue中使用他们。本次加载的wmts是我们本地用geoserver服务器搭建的wmts地址。

<template>
	<div id="app">
		<div id="map" />
	</div>
</template>
<script>
	export default {
		data() {
			return {}
		},
		mounted() {
			this.leafletMap()
		},
		methods: {
			leafletMap() {

				//设置地图相关初始配置
				var leafletMap = L.map("map", {
					 center: [30.279751,119.727856],// 设置地图中心点
					zoom: 1, //设置当前地图显示的缩放等级
					crs: L.CRS.EPSG4326 //设置坐标系4326
				})

				//设置地图可以进行0-22的等级缩放
				var matrixIds = [];
				for (var i = 0; i < 22; ++i) {
					matrixIds[i] = {
						identifier: "" + i,
						topLeftCorner: new L.LatLng(90, -180)
					};
				}

				//设置地图wmts瓦片地图加载配置
				var urlMap= 'http://192.168.11.25:6080/arcgis/rest/services/WMTS'//瓦片地图地址
				var wmtsOptionsMap = {
					layer: 'hangzhou:MapServer',//瓦片地图名称
					tileSize: 256, //切片大小
					format: "image/png",//瓦片图格式
					matrixIds: matrixIds,//可缩放
				}
				var wmtsMap = new L.TileLayer.WMTS(urlMap, wmtsOptionsMap)
				leafletMap.addLayer(wmtsMap)
			}
		}
	}
</script>
<style>
	#map {
		width: 100%;
		height: 100vh;
	}
</style>

下面是效果图

可以看到地图已经加载完成。如果大家有什么疑问可以留言交流。