leaflet 可移动多边形demo

注意不能使用setview来设置中心

// src\views\MeasureDistance.vue

<template>
  <div class="map-container">
    <div id="map-container"></div>
    <!-- <MapMeasureDistance
      @polyline="measurePolyline"
      @showMeasurements="showMeasurements"
      @hideMeasurements="hideMeasurements"
    ></MapMeasureDistance> -->
  </div>
</template>

<script>
import MapMeasureDistance from "@/components/MapMeasureDistance.vue";

export default {
  name: "map-point",
  components: { MapMeasureDistance },
  data() {
    return {
      map: null,
       OSMUrl: "http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e2a7a86075fe8a7a483ccf43c0daddad",
    };
  },
  mounted() {
    this.map = this.$utils.map.createMap("map-container", {
                //参考坐标系
                crs: L.CRS.EPSG3857,
                //显示中心
                center: [30.82993, 120.92559],
                //不允许地图拖拽
                dragging: false,
                //最小显示等级
                minZoom: 1,
                //最大显示等级
                maxZoom: 18,
                //当前显示等级
                zoom: 18
            });
    // this.map.setView([51.505, -0.09], 14);
    var vecLayer = this.$utils.map.$L.tileLayer("http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=key", { noWrap: true }).addTo(this.map);;
   var cvaLayer = this.$utils.map.$L.tileLayer("http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=key", { noWrap: true }).addTo(this.map);
   let  rectangle = this.$utils.map.$L.rectangle([[30.82993, 120.92559], [30.82999, 120.92698]], {
                //颜色
                color: "#ff7800",
                //线宽
                weight: 1,
                //填充色透明度
                fillOpacity: 0.5
            }).addTo(this.map);
            console.log(rectangle,this.map);
            //图形移动      
  //  this.map.setView([30.82993, 120.92559], 18);
   this.featureMove(rectangle,this.map);
  },
  methods: {
    featureMove(rectangle,map) {
             /**矢量图层鼠标按压事件
            *  @param {string} type 事件类型（鼠标按下）
            *  @param {function} fn 事件触发后的响应函数
            */
            rectangle.once('mousedown', (e) => {
                //获取鼠标按下位置的纬经度坐标
                var coordinate1 = e.latlng;
                //监听地图移动事件，实时改变图形位置
                map.on('mousemove ', (e) => {
                    //移动位置处的坐标
                    var coordinate2 = e.latlng;
                    //计算坐标偏移
                    var dx = coordinate2.lat - coordinate1.lat;
                    var dy = coordinate2.lng - coordinate1.lng;
                    //重新设置矩形位置
                    var latlngs = [[30.82993 + dx, 120.92559 + dy], [30.82999 + dx, 120.92698 + dy]];
                    rectangle.setBounds(latlngs);
                });
            });

            /**矢量图层鼠标释放事件
            *  @param {string} type 事件类型（鼠标释放）
            *  @param {function} fn 事件触发后的响应函数
            */
            rectangle.once('mouseup', (e) => {
                //鼠标释放后，注销鼠标移动事件
                map.off('mousemove');
                alert("移动完成！");
            });
        }
  }
};
</script>
<style lang="scss">
.map-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  #map-container {
    width: 100%;
    height: 100%;
  }
}
</style>