1.npm 安装leaflet
npm install leaflet.pmnpm install leaflet
2.在main.js中引入
import L from "leaflet";import "leaflet/dist/leaflet.css";import './components/common/leaflet-tilelayer-wmts-src';import 'leaflet.pm'import 'leaflet.pm/dist/leaflet.pm.css'Vue.L = Vue.prototype.$L = L
3.WMTS加载影像，在components文件下新建一个js文件，内容如下
L.TileLayer.WMTS = L.TileLayer.extend({defaultWmtsParams: {service: 'WMTS',request: 'GetTile',version: '1.0.0',layer: '',style: '',tilematrixset: '',format: 'image/jpeg'},initialize: function (url, options) {// (String, Object)this._url = url;var lOptions= {};var cOptions = Object.keys(options);cOptions.forEach(element=>{lOptions[element.toLowerCase()]=options[element];});var wmtsParams = L.extend({}, this.defaultWmtsParams);var tileSize = lOptions.tileSize || this.options.tileSize;if (lOptions.detectRetina && L.Browser.retina) {wmtsParams.width = wmtsParams.height = tileSize * 2;} else {wmtsParams.width = wmtsParams.height = tileSize;}for (var i in lOptions) {// all keys that are in defaultWmtsParams options go to WMTS paramsif (wmtsParams.hasOwnProperty(i) && i!="matrixIds") {wmtsParams[i] = lOptions[i];}}this.wmtsParams = wmtsParams;this.matrixIds = options.matrixIds||this.getDefaultMatrix();L.setOptions(this, options);},onAdd: function (map) {this._crs = this.options.crs || map.options.crs;L.TileLayer.prototype.onAdd.call(this, map);},getTileUrl: function (coords) {// (Point, Number) -> Stringvar tileSize = this.options.tileSize;var nwPoint = coords.multiplyBy(tileSize);nwPoint.x+=1;nwPoint.y-=1;var sePoint = nwPoint.add(new L.Point(tileSize, tileSize));var zoom = this._tileZoom;var nw = this._crs.project(this._map.unproject(nwPoint, zoom));var se = this._crs.project(this._map.unproject(sePoint, zoom));var tilewidth = se.x-nw.x;var ident = this.matrixIds[zoom].identifier;var tilematrix = this.wmtsParams.tilematrixset + ":" + ident;var X0 = this.matrixIds[zoom].topLeftCorner.lng;var Y0 = this.matrixIds[zoom].topLeftCorner.lat;var tilecol=Math.floor((nw.x-X0)/tilewidth);var tilerow=-Math.floor((nw.y-Y0)/tilewidth);var url = L.Util.template(this._url, {s: this._getSubdomain(coords)});return url + L.Util.getParamString(this.wmtsParams, url) + "&tilematrix=" + tilematrix + "&tilerow=" + tilerow +"&tilecol=" + tilecol;},setParams: function (params, noRedraw) {L.extend(this.wmtsParams, params);if (!noRedraw) {this.redraw();}return this;},getDefaultMatrix : function () {/*** the matrix3857 represents the projection * for in the IGN WMTS for the google coordinates.*/var matrixIds3857 = new Array(22);for (var i= 0; i<22; i++) {matrixIds3857[i]= {identifier : "" + i,topLeftCorner : new L.LatLng(7508.3428,-7508.3428)};}return matrixIds3857;}});L.tileLayer.wmts = function (url, options) {return new L.TileLayer.WMTS(url, options);};
4.在config文件夹的index.js中的dev ->proxyTable:{}中配置代理方法，如下：
module.exports = {dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/mapServePath': {target: 'http://192.168.0.85:8080', // 目标接口域名changeOrigin: true, // 是否启用跨域pathRewrite: {//'^/mapServePath': ''}}},
5.在vue页面中加载使用，代码如下：
<template><div id="map"></div></template><script>export default {name: "mapView",data() {return {};},mounted() {var map = L.map('map', {center: [29.827091,120.939465],//[30.759234,120.268814],zoom: 17,crs: L.CRS.EPSG4326});var matrixIds = [];for (var i = 0; i < 22; ++i) {matrixIds[i] = {identifier: "" + i,topLeftCorner: new L.LatLng(90, -180)};}var ign = new L.TileLayer.WMTS("mapServePath/geoserver/gwc/service/wmts", {layer: 'zhangCunData:zhangCunImagery', //张村图层名称tilematrixSet: 'EPSG:4326', //GeoServer使用的网格名称width: 20,height: 20,format: 'image/png',maxZoom: 22,minZoom: 10,matrixIds: matrixIds,})map.addLayer(ign);//点击地图进行打点var mypop = L.popup();map.on('click', function(e) {// this.lat = e.latlng.lat //纬度// this.lng = e.latlng.lng //经度var content = '你点击了这个点：<br>';content += e.latlng.toString();console.log(content);mypop.setLatLng(e.latlng).setContent(content).openOn(map); });}};</script><style>#map {width: 100%;height: 1000px;}</style>
以上操作之后，就可以成功加载影像图，并在地图上拾取坐标点了！
参考链接如下：
/qq_40423339/article/details/106080464
/leaflet-note-10-click-show-lan-lat.html
