创作不易，喜欢的话，收藏+关注鼓励一下我吧~
拆分解析：
npm install leaflet --savenpm install leaflet.wmts --save
main.js引入
//Leaflet全局配置import L from 'leaflet'import 'leaflet/dist/leaflet.css'import 'leaflet.wmts'Vue.use(L)
<div id="viewDiv4" class="viewDiv"></div>
初始化地图
initLeaftMap() {// if (this.map) this.map.remove();this.map = null;this.removePolygon();//初始化polygonlet longitude = 120.76;//经度let latitude = 30.86;//纬度let center = [latitude, longitude];//限制地图的拖动范围是正负90到正负180，这样才合理。var corner1 = L.latLng(-90, -180); //设置左上角经纬度var corner2 = L.latLng(90, 180);//设置右下点经纬度var bounds = L.latLngBounds(corner1, corner2); //构建视图限制范//设置地图相关初始配置this.map = L.map("viewDiv4", {center: center,// 地图的初始地理中心 [纬度,经度]minZoom: 1,maxZoom: 20,zoom: 15, //初始地图缩放级别crs: L.CRS.EPSG4326,//设置坐标系4326scrollWheelZoom: true, //默认开启鼠标滚轮缩放zoomControl: false, //禁用 + - 按钮doubleClickZoom: false, // 禁用双击放大attributionControl: false, // 移除右下角leaflet标识maxBounds: bounds,});const TK_KEY = "c3ee6607def5247760aaaee6d01b13ae";// 底图const VEC_C = '/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=';L.tileLayer(VEC_C + TK_KEY, {maxZoom: 20,tileSize: 256,zoomOffset: 1,}, {noWrap: true}).addTo(this.map);this.map.on('mousemove', (e) => {this.map.wrapLatLng(e.latlng)let trueLatLng = this.map.wrapLatLng(e.latlng);let currentLongitude = '';//经度let currentLatitude = '';//纬度currentLongitude = trueLatLng.lng;currentLatitude = trueLatLng.lat;this.currentLongitude = currentLongitude;this.currentLatitude = currentLatitude;});},
项目要求实现下图所示的效果，底图使用天地图的卫星图，点击绘制多边形，绘制好点击运行 请求都断接口，接口返回如下的data,用data的数据请求瓦片信息，然后将请求的瓦片显示在地图上，
{code:200data:"http://51.241.201.111:9000/geoserver/test_ydp/gwc/service/wmts?layer=test_ydp:ndviT51RTQ_20250128T023951876dbfac-8819-4489-ba25-018850812077"message:"success"}
效果如下图所示：
上图所示功能完整代码如下：
<template><div class="showslicecacheMapCtn4"><div class="txt1">在地图绘制多边形,双击结束自动生成</div><div class="showslicecacheMapCtn"><div id="viewDiv4" class="viewDiv"></div><div class="latlon" v-if="currentLongitude">经度:{{currentLongitude.toFixed(2) }},纬度:{{currentLatitude.toFixed(2)}}</div><el-select v-model="timeValue" placeholder="请选择时间"><el-optionv-for="item in timeOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select></div><div class="timediv2 runCtn"><div class="txt">时间：</div><el-date-pickerv-model="time2"type="datetime"format="yyyy-MM-dd HH:mm:ss"value-format="yyyy-MM-dd HH:mm:ss"placeholder="选择日期时间"></el-date-picker><div class="btn2"><el-button type="primary" @click="createFace">绘制多边形</el-button><el-button type="primary" @click="removePolygon">删除多边形</el-button><el-button type="primary" @click="runBtn" :loading="isRes">运行</el-button></div></div><div class="runCtn"><div class="btnctn"><div class="paddingLeft20"><el-button type="primary" @click="closeAllBtn">全部折叠</el-button></div><div class="paddingLeft20"><el-button type="primary" @click="expandBtn">全部展开</el-button></div><div class="clearCtn"><el-button type="primary" @click="clearBtn">清空</el-button></div></div></div><div><json-viewerv-if="isShowjsonViewer"ref="jsonref":value="resData1"style="width: 100%; min-width: 3.125rem":expand-depth="expandVal"copyableexpandedboxedsort></json-viewer></div></div></template><script>import eventBus from "@/plugins/eventBus";import {get_wrap_data} from "@/api/api2";import VueJsonPretty from 'vue-json-pretty/lib/vue-json-pretty.js'import 'vue-json-pretty/lib/styles.css';export default {name: "showslicecacheMap3",components: {VueJsonPretty},data() {return {isRes: false,markerpoint: [],//保存点的标记time2: '-02-02 00:00:00',//日期 给定默认时间currentLongitude: '',//经度currentLatitude: '',//纬度map: {},//地图polygonPointArr: [],//所有多边形经纬度集合TIME: '',/** 定义保存面的相关变量 **/points: [], // 画的过程中的点lines: {}, // 画的过程中生成的多边形tempLines: {}, // 鼠标移动中生成的多边形（实际是一条线段）polygonList: {}, // 双击结束生成多边形facelines: [], // 存储画的多边形facetempLines: [], // 存储移动的多边形facepolygonList: [], // 存储结束生成的多边形isShowjsonViewer: true,isAllUnfold: false,//默认不是全部展开expandVal: 2,resData1: {},timeOptions: [{value: '0128',label: '0128'}, {value: '0120',label: '0120'}, {value: '0129',label: '0129'}],timeValue: ''}},created() {eventBus.$on('emitinitLeaftMapFn4_1', () => {this.initLeaftMap();});eventBus.$on('emitinitLeaftMapFn4_2', () => {this.initPageFn();});},beforeDestroy() {eventBus.$off("emitinitLeaftMapFn4_1");},methods: {runBtn() {let polygonPointArr = this.polygonPointArr;if (polygonPointArr.length < 1) {this.$message({type: 'warning',message: '请画多边形 再请求'});return false;}let tempArrAll = [];//经纬度调换位置后存放polygonPointArr.forEach(item1 => {let tempArrSm = []item1.forEach(item2 => {tempArrSm.push([item2[1], item2[0]])});tempArrAll.push(tempArrSm);});let tempFeaturesArr = [];tempArrAll.forEach(item => {tempFeaturesArr.push({"type": "Feature","properties": {},"geometry": {"type": "Polygon","coordinates": [item]}})});let time2 = this.time2;//时间非空判断if (time2 == null || time2 == '') {this.$message({type: 'warning',message: '请选择时间'});return false;}let objs = {"type": "FeatureCollection","time": time2,"crs": {"type": "name","properties": {"name": "urn:ogc:def:crs:OGC:1.3:CRS84"}},"features": tempFeaturesArr}let tempobj = {geoJson: objs}this.isRes = true;get_wrap_data(tempobj).then(result => {this.isRes = false;if (result) {this.polygonPointArr=[];//清空之前请求所用的 所有多边形经纬度集合this.resData1 = result;const {data, code, msg} = result;if (code == 200) {this.isShowjsonViewer = true;this.isAllUnfold = false;this.expandVal = 2;this.addLayerFn(data);this.$message({type: 'info',message: '多边形保存成功' //});}}}).catch(err => {this.isRes = false;this.polygonPointArr=[];//清空之前请求所用的 所有多边形经纬度集合this.resData1 = {};});},// 2. 绘制多边形createFace() {this.$message.success('请在地图绘制多边形,双击结束自动生成')this.lines = L.polyline([], {color: '#fc6a00', fillColor: '#fc6a00', fillOpacity: 0.0001})this.tempLines = L.polyline([], {color: '#fc6a00', fillColor: '#fc6a00', fillOpacity: 0.0001})this.map.addLayer(this.lines)this.map.addLayer(this.tempLines)this.map.on('click', e => {this.points.push([e.latlng.lat, e.latlng.lng])this.lines.addLatLng(e.latlng)this.map.addLayer(this.lines)this.facelines.push(this.lines)})this.map.on('mousemove', e => {if (this.points.length > 0) {this.tempLines.setLatLngs([this.points[this.points.length - 1], [e.latlng.lat, e.latlng.lng]])this.map.addLayer(this.tempLines)this.facetempLines.push(this.tempLines)}})this.map.on('dblclick', e => {this.polygonList = L.polygon([this.points], {color: '#fc6a00',fillColor: '#fc6a00',fillOpacity: 0.0001,id: this.getUUid()}).addTo(this.map);this.map.addLayer(this.polygonList);this.facepolygonList.push(this.polygonList);let points = this.points;//数组pop方法 ， 删除数组的最后一位 并返回 会修改原数组let polygonPoint = [points.pop()].concat(points);//最少是个三角形if (polygonPoint.length > 3) {this.polygonPointArr.push(polygonPoint);}this.points = [];this.lines.setLatLngs([]);this.map.off('click');})},removePolygon() {this.points.forEach(item => {this.map.removeLayer(item);});this.facelines.forEach(item => {this.map.removeLayer(item);});this.facetempLines.forEach(item => {this.map.removeLayer(item);});this.facepolygonList.forEach(item => {this.map.removeLayer(item);});this.points = [];this.facelines = [];this.facetempLines = [];this.facepolygonList = [];this.polygonPointArr = [];},initLeaftMap() {// if (this.map) this.map.remove();this.map = null;this.removePolygon();//初始化polygonlet longitude = 120.76;//经度let latitude = 30.86;//纬度let center = [latitude, longitude];//限制地图的拖动范围是正负90到正负180，这样才合理。var corner1 = L.latLng(-90, -180); //设置左上角经纬度var corner2 = L.latLng(90, 180);//设置右下点经纬度var bounds = L.latLngBounds(corner1, corner2); //构建视图限制范//设置地图相关初始配置this.map = L.map("viewDiv4", {center: center,// 地图的初始地理中心 [纬度,经度]minZoom: 1,maxZoom: 20,zoom: 15, //初始地图缩放级别crs: L.CRS.EPSG4326,//设置坐标系4326scrollWheelZoom: true, //默认开启鼠标滚轮缩放zoomControl: false, //禁用 + - 按钮doubleClickZoom: false, // 禁用双击放大attributionControl: false, // 移除右下角leaflet标识maxBounds: bounds,});const TK_KEY = "天地图的key";// 底图const VEC_C = '/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=';L.tileLayer(VEC_C + TK_KEY, {maxZoom: 20,tileSize: 256,zoomOffset: 1,}, {noWrap: true}).addTo(this.map);this.map.on('mousemove', (e) => {this.map.wrapLatLng(e.latlng)let trueLatLng = this.map.wrapLatLng(e.latlng);let currentLongitude = '';//经度let currentLatitude = '';//纬度currentLongitude = trueLatLng.lng;currentLatitude = trueLatLng.lat;this.currentLongitude = currentLongitude;this.currentLatitude = currentLatitude;});},//增加图层addLayerFn(data) {let url = data;let idx = url.indexOf('?');let domain = url.slice(0, idx);let layer = url.slice(idx + 7);//设置地图可以进行0-22的等级缩放var matrixIds = [];for (var i = 0; i < 22; ++i) {matrixIds[i] = {identifier: "" + i,topLeftCorner: new L.LatLng(90, -180)};}//设置地图wmts瓦片地图加载配置var urlMap = domain;//瓦片地图地址var wmtsOptionsMap = {layer: layer,//瓦片地图名称tilematrixSet: "EPSG:4326",//GeoServer使用的网格名称tileSize: 256,//切片大小service: 'WMTS',format: 'image/png',//瓦片图格式matrixIds: matrixIds,//可缩放noWrap: true,//不重复}var wmtsMap = new L.TileLayer.WMTS(urlMap, wmtsOptionsMap);this.map.addLayer(wmtsMap);},initPageFn() {this.removePolygon();},//全部展开expandBtn() {if (!this.isAllUnfold) {this.isShowjsonViewer = falsethis.isAllUnfold = true;}this.expandVal = 10;this.$nextTick(() => {this.isShowjsonViewer = true})},//全部折叠closeAllBtn() {this.isAllUnfold = false;this.isShowjsonViewer = false;this.expandVal = 0;this.$nextTick(() => {this.isShowjsonViewer = true;})},clearBtn() {this.resData1 = {}},}}</script><style lang="scss">.showslicecacheMapCtn4 {.txt1 {padding-bottom: 10px;padding-top: 10px;}.showslicecacheMapCtn {position: relative;width: 750px;height: 460px;.viewDiv {z-index: 1;width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;border-radius: 2px}.leaflet-container a.leaflet-popup-close-button {display: none;}.leaflet-touch .leaflet-control-attribution {//display: none;}.leaflet-popup-content {width: 100px;}.latlon {position: absolute;bottom: 0;right: 0;z-index: 100;color: #0078A8;background: rgba(255, 255, 255, 0.8);border-radius: 2px;padding-left: 5px;padding-right: 5px;font-size: 12px;}}.el-select{position: absolute;top: 0;z-index: 2;.el-input__inner{height: 30px;line-height: 30px;width: 131px;}}}</style>
