地图绘制线

创建轨迹、播放、暂停轨迹播放。
LocusLayer.vue:

<template>
    <div />
</template>

<script>
export default {
  //inject接受父组件通过provide提供过来的对象：
  /*
  provide(){
    return {
      root:this
    }
  }
  */
    inject: ['root'],
    data() {
        return {
            mapView: this.root.mapView,
            locusLayer: null,
            layerId: 'locusLayer',
            temPaths: [], // 存储播放过程中路径数据
            curIndex: 0,  // 当前播放进度
            requestPath: [// 存储从后台取得的路径数据
                [120.38231107989469, 36.30461219953733],
                [120.38780424395718, 36.29752891570557],
                [120.39164944203712, 36.29133056535232],
                [120.40867824224897, 36.286460072984134],
                [120.42213649839303, 36.28928279747521]
            ]
        }
    },
    beforeDestroy() {
        this.locusLayer && this.locusLayer.destroy()
    },
    mounted() {
        this.creatGraphicPolyLine(this.requestPath)
    },
    methods: {
        // 创建图形线
        creatGraphicPolyLine(path) {
            this.locusLayer && this.locusLayer.destroy()
            this.locusLayer = new this.$esri.GraphicsLayer()
            const lineSymbol = {
                type: 'simple-line', // autocasts as new SimpleLineSymbol()
                color: '#52b9c9', // RGB color values as an array
                join: 'round',
                cap: 'square',
                // style: 'dash',
                width: 4
            }
            const polylineGraphic = new  this.$esri.Graphic({
                geometry: {
                    type: 'polyline', // autocasts as new Polyline()
                    paths: path
                },
                symbol: lineSymbol
            })
          
            this.locusLayer.add(polylineGraphic)
            this.locusLayer.id = 'pathLayer'
            this.mapView.map.add(this.locusLayer)
        },
        // 播放轨迹
        playTrack() {
            if (this.timer) {
                clearInterval(this.timer)
            }
            this.timer = setInterval(() => {
                this.temPaths.push(this.requestPath[this.curIndex])
                if (this.curIndex >= this.requestPath.length) {
                    clearInterval(this.timer)
                    this.$emit('play-finish')
                    this.curIndex = 0
                    this.temPaths = []
                    return
                }
                this.creatGraphicPolyLine(this.temPaths)
                this.curIndex++
            }, 1000)
        },
        // 暂停轨迹播放
        stopPlay() {
            if (this.timer) {
                clearInterval(this.timer)
            }
        }
    }
}
</script>