vue+leaflet拖动Marker点，Polyline线跟着移动

效果展示

<template>
  <div>
    <div class="map" ref="map"></div>
  </div>
</template>
<script>
  import {
    TileLayer,
    DivIcon,
    Marker,
    Polyline,
    Map
  } from "leaflet"
  export default {
    data() {
      return {
        map: null,
        showWire: null
      }
    },
    methods: {
      loadMap() {
        this.map = new Map(this.$refs.map, {
          center: [30.65327143, 104.0754318],
          zoom: 12,
          // 是否显示左侧+-图标
          zoomControl: false,
          // worldCopyJump: true,
          // 是否双击放大
          doubleClickZoom: false,
          // 强制地图的缩放级别始终是这个的倍数
          zoomSnap: 0.5,
          zoomDelta: 0.5,
          // 最小层级
          minZoom: 9,
          // 最大层级
          maxZoom: 50,
          // 多少滚动像素  意味着一个完整缩放级别的变化。较小的值将使滚轮缩放更快
          wheelPxPerZoomLevel: 120,
        });
        new TileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}', {
          pane: 'overlayPane'
        }).addTo(this.map);
        let dotData = [{
            coordinate: [30.62535686, 104.1710222],
            mac: '44d1faacde25'
          },
          {
            coordinate: [30.62509835, 104.1715693],
            mac: '44d1fa102974'
          },
          {
            coordinate: [30.62483061, 104.1721165],
            mac: '78d38df8d748'
          },
          {
            coordinate: [30.62453518, 104.1727602],
            mac: '44d1fa8ddfe9'
          }, {
            coordinate: [30.6242859, 104.1732967],
            mac: '44d1fa8de016'
          }, {
            coordinate: [30.62405509, 104.1738653],
            mac: '44d1fa8de043'
          },

          {
            coordinate: [30.62375965, 104.174509],
            mac: '44d1fa7cfac2'
          },
          {
            coordinate: [30.6235196, 104.1751528],
            mac: '44d1fa8ddff2'
          },
          {
            coordinate: [30.62325186, 104.1758931],
            mac: '44d1fa8ddfa4'
          },
          {
            coordinate: [30.62299335, 104.1765475],
            mac: '44d1fa8ddf8c'
          }, {
            coordinate: [30.62277177, 104.1771698],
            mac: '44d1fa8ddf80'
          }, {
            coordinate: [30.62254095, 104.1777813],
            mac: '44d1fa8ddfa7'
          }, {
            coordinate: [30.6223009, 104.1784251],
            mac: '44d1fa8de019'
          }, {
            coordinate: [30.62210702, 104.1790152],
            mac: '44d1fa8df49c'
          }, {
            coordinate: [30.62188543, 104.1796803],
            mac: '44d1fa8de013'
          },
        ]
        let wireData = []
        const {
          map,
          redrawWire
        } = this
        const _this = this
        dotData.forEach((item, index) => {
          wireData.push(item.coordinate)
          // 点位样式
          let htmlStr =
            `<div class="dot-text">${item.mac}</div> <img src=${require("@/assets/dot.png")} class="dot-img"/>`
          let icon = new DivIcon({
            html: htmlStr,
            iconAnchor: [10, 28], //设置定位点的位置。默认为中心  例子中以左上角为定位参考。相当于relative
          })
          // 渲染图标点
          let marker = new Marker(item.coordinate, {
            icon: icon,
            draggable: true,
          }).addTo(map);
          // 点位拖动事件
          marker.on("dragend", function (e) {
            wireData[index] = [marker.getLatLng().lat, marker.getLatLng().lng]
            // 移动线位置
            redrawWire(_this.showWire, wireData)
          })
        })
        // 渲染线
        this.showWire = new Polyline(wireData, {
          opacity: 1, //透明度
          color: "#000"
        }).addTo(this.map)
      },
      /**
       * 线段重绘
       * @param { Object } line_obj 接收一个线对象
       * @param { Array } line_obj  重绘内容二维数组 [[30.68447113, 103.88946533]]
       */
      redrawWire(line_obj, line_list) {
        //接收一个线对象、坐标数组，重绘
        line_obj.setLatLngs(line_list) //给轨迹线设定坐标值，参数为数组
        line_obj.redraw()
      }

    },
    mounted() {
      this.loadMap()
    }
  }
</script>
<style lang="scss" scoped>
  .map {
    min-height: calc(100vh - 80px)
  }

  .map::v-deep {
    .dot-img {
      width: 15px;
      height: 15px
    }

    .dot-text {
      width: 150px;
      font-size: 12px;
      font-weight: 700;
      color: #000;
    }

    .leaflet-div-icon {
      background-color: transparent;
      border: 0;
    }
  }
</style>