vue + Leaflet加载天地图+加载wmts瓦片+动态绘制多边形+手摸手

喜欢的话，支持一下我把，写作不易，收藏+关注鼓励一下吧~项目要求实现下图所示的效果，底图使用天地图的卫星图，点击绘制多边形，绘制好点击运行请求都断接口，接口返回如下的data,用data的数据请求瓦片信息，然后将请求的瓦片显示在地图上，全部代码如下图所示：

青儿吖

3431人浏览 · 2023-03-16 10:51:41

青儿吖 · 2023-03-16 10:51:41 发布

创作不易，喜欢的话，收藏+关注鼓励一下我吧~

拆分解析：

npm install leaflet --save
npm 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();//初始化polygon
      let 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,//设置坐标系4326
        scrollWheelZoom: true, //默认开启鼠标滚轮缩放
        zoomControl: false, //禁用 + - 按钮
        doubleClickZoom: false, // 禁用双击放大
        attributionControl: false, // 移除右下角leaflet标识
        maxBounds: bounds,
      });
      const TK_KEY = "c3ee6607def5247760aaaee6d01b13ae";
      // 底图
      const VEC_C = 'http://t1.tianditu.com/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:200
data:"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-option
            v-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-picker
          v-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-viewer
          v-if="isShowjsonViewer"
          ref="jsonref"
          :value="resData1"
          style="width: 100%; min-width: 3.125rem"
          :expand-depth="expandVal"
          copyable
          expanded
          boxed
          sort
      ></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: '2023-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: '20230128',
        label: '20230128'
      }, {
        value: '20230120',
        label: '20230120'
      }, {
        value: '20230129',
        label: '20230129'
      }],
      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();//初始化polygon
      let 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,//设置坐标系4326
        scrollWheelZoom: true, //默认开启鼠标滚轮缩放
        zoomControl: false, //禁用 + - 按钮
        doubleClickZoom: false, // 禁用双击放大
        attributionControl: false, // 移除右下角leaflet标识
        maxBounds: bounds,
      });
      const TK_KEY = "天地图的key";
      // 底图
      const VEC_C = 'http://t1.tianditu.com/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 = false
        this.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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^