【leaflet】动态轨迹

使用插件：leaflet.motion

https://github.com/Igor-Vladyka/leaflet.motion

    // 执行轨迹回放
    doShowTraces(latLngs) {
      latLngs = [
        [39.123595, 110.561176],
        [39.123041, 110.566147],
        [39.116309, 110.566799],
        [39.115508, 110.557799],
        [39.123595, 110.561176]
      ]
      this.traceLayers.clearLayers() // 清理图层
      if (latLngs && latLngs.length > 1) {
        this.aMarker = L.animatedMarker({ //创建动画marker
          latLngs,
          duration: latLngs.length * 1000
        }).setIcon(
          L.glyphicon({
            icon: 'fas fa-walking',
            color: 'white',
            background: '#dc3545',
            size: 38,
            borderWidth: 0
          })
        ).addTo(this.traceLayers)
        // 移动回调
        this.aMarker.on('chunkmove', ({ index, duration }) => {
           //调整视野
          this.map.panTo(latLngs[index], {
            duration: duration > 500 ? duration / 1000 : 0
          })
        })
        // 停止回调
        this.aMarker.on('stopmove', () => {
          this.aMarker.off('chunkmove')
          this.aMarker.bindPopup(L.vuePopup({
            vueInstance: popupTrace,
            props: { vm: this, latLngs },
            closeButton: false,
            offset: [0, -5],
            className: 'nice-popup bg-darkgrey'
          }))
          this.aMarker.openPopup()
          this.highLightTraceLayers(false)
        })
        // 开始移动
        this.map.setView(latLngs[0], 9)
        _.delay(() => {
          this.highLightTraceLayers(true)
          this.aMarker.startMove()
          //绘制动态轨迹
          L.motion.polyline(latLngs,{
            color: 'red'
          },{
            auto: true,
            duration:latLngs.length * 1000,
          }).addTo(this.traceLayers)
        }, 500)
      }
    }