vue amap做轨迹回放

最新推荐文章于 2023-09-18 09:35:20 发布

@搬砖工

最新推荐文章于 2023-09-18 09:35:20 发布

阅读量301

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_50867375/article/details/132343366

版权

<div class="amap-box" id="amap-box"></div>
<div class="input-card" v-if="activeMenu == 1 && wayArr && wayArr.length > 0">
  <div class="input-item" style="display: flex;justify-content: space-between;margin: 35px 20px;">
    <a-button type="primary" icon="play-circle" @click="startAnimation()">开始</a-button>
    <a-button type="primary" icon="pause-circle" @click="pauseAnimation()">暂停</a-button>
    <a-button type="primary" icon="left-square" @click="resumeAnimation()">继续</a-button>
   </div>
  </div>

js部分

initMap() {
  let scenicLonLat = JSON.parse(sessionStorage.getItem('scenicLonLat'))
  let center = scenicLonLat.longitude && scenicLonLat.latitude ? [scenicLonLat.longitude, scenicLonLat.latitude] : [104.065735, 30.659462]
  this.map = new window.AMap.Map('amap-box', {
     pitch: 0,
     viewMode: '2D',
     showLabel: true, //不显示地图文字标记
     center: center,
     zoom: 13.3,
     features: ['bg', 'road', 'building', 'point']
    })
   },
    // 绘制轨迹
        plotMap() {
            this.clearMap()
            const that = this
            this.marker = new AMap.Marker({
                map: this.map,
                position: this.lineArr[0],
                icon: 'https://webapi.amap.com/images/car.png', //配置轨迹图片
                offset: new AMap.Pixel(-26, -13),
                autoRotation: true,
                angle: -90
            })
            if (this.lineArr && this.lineArr.length > 1) {
                const routeUrl = `https://restapi.amap.com/v3/direction/walking?key=28ed3c0bafde205c90ef61bf32862d03&origin=${this.lineArr[0][0]},${this.lineArr[0][1]}&destination=${this.lineArr[1][0]},${this.lineArr[1][1]}`
                axios.get(routeUrl).then(response => {
                    if (response.data.info == 'ok' && response.data.infocode == 10000) {
                        let arr1 = []
                        response.data.route.paths[0].steps.forEach(item => {
                            let arr = item.polyline.split(';')
                            arr1.push(arr)
                        })
                        arr1.forEach(item => {
                            item.forEach(child => {
                                child = child.split(',')
                                this.wayArr.push(child)
                            })
                        })
                        that.polyline = new AMap.Polyline({
                            map: that.map,
                            path: that.wayArr, // 这里是轨迹的坐标拼成的数组
                            showDir: true,
                            strokeColor: '#28F', //线颜色
                            strokeOpacity: 1, //线透明度
                            strokeWeight: 6, //线宽
                            strokeStyle: 'solid'
                        })
                        var passedPolyline = new AMap.Polyline({
                            map: that.map,
                            strokeColor: '#AF5', //线颜色
                            strokeWeight: 6 //线宽
                        })
                        that.marker.on('moving', function(e) {
                            passedPolyline.setPath(e.passedPath)
                        })
                        that.map.setFitView() //合适的视口

                        that.marker.moveAlong(that.wayArr, 100)
                    } else {
                        this.$message.error(`该任务未执行完成，无轨迹展示！`)
                    }
                })
            } else {
                that.map.setFitView() //合适的视口
            }
        },
        startAnimation() {
            this.marker.moveAlong(this.wayArr, 100)
        },
        pauseAnimation() {
            this.marker.pauseMove()
        },
        resumeAnimation() {
            this.marker.resumeMove()
        },