地图轨迹回放

最新推荐文章于 2023-08-09 17:58:46 发布

weixin_43372631

最新推荐文章于 2023-08-09 17:58:46 发布

阅读量157

点赞数 1

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_43372631/article/details/131781186

版权

<template>
    <div>
        <div ref="mapRef" style="height: 300px;max-width: 800px;"></div>
        <el-button @click="startTrackAnim">开始动画</el-button>
        <el-button @click="pauseTrackAnim">暂停动画</el-button>
        <el-button @click="resumeTrackAnim">继续动画</el-button>
    </div>
</template>

<script>
    import AMapLoader from '@amap/amap-jsapi-loader';

    export default {
        data() {
            return {
                mapIns: null,  // 地图实例
                carMarker: null,  // 小车 marker
                lineData: [  // 轨迹路线
                    [116.478935, 39.997761],
                    [116.478939, 39.997825],
                    [116.478912, 39.998549],
                    [116.478912, 39.998549],
                    [116.478998, 39.998555],
                    [116.478998, 39.998555],
                    [116.479282, 39.99856],
                    [116.479658, 39.998528],
                    [116.480151, 39.998453],
                    [116.480784, 39.998302],
                    [116.480784, 39.998302],
                    [116.481149, 39.998184],
                    [116.481573, 39.997997],
                    [116.481863, 39.997846],
                    [116.482072, 39.997718],
                    [116.482362, 39.997718],
                    [116.483633, 39.998935],
                    [116.48367, 39.998968],
                    [116.484648, 39.999861]
                ]
            };
        },
        mounted() {
            this.renderMap();
        },
        methods: {
            /* 渲染地图 */
            renderMap() {
                AMapLoader.load({
                    key: '申请好的Web端开发者Key',
                    version: '2.0',
                    plugins: ['AMap.MoveAnimation', 'AMap.Marker', 'AMap.Polyline']
                }).then((AMap) => {
                    // 渲染地图
                    this.mapIns = new AMap.Map(this.$refs.mapRef, {
                        zoom: 17,
                        center: [116.478935, 39.997761]
                    });

                    // 创建小车 marker
                    this.carMarker = new AMap.Marker({
                        map: this.mapIns,
                        position: [116.478935, 39.997761],
                        icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
                        offset: new AMap.Pixel(-13, -26),
                    });

                    // 绘制轨迹
                    new AMap.Polyline({
                        map: this.mapIns,
                        path: this.lineData,
                        showDir: true,
                        strokeColor: '#28F', //线颜色
                        strokeOpacity: 1, //线透明度
                        strokeWeight: 6, //线宽
                        // strokeStyle: 'solid'  // 线样式
                    });

                    // 通过的轨迹
                    const passedPolyline = new AMap.Polyline({
                        map: map,
                        showDir: true,
                        strokeColor: '#4B5', // 线颜色
                        strokeOpacity: 1, // 线透明度
                        strokeWeight: 6, // 线宽
                    });

                    // 小车移动回调
                    this.carMarker.on('moving', (e) => {
                        passedPolyline.setPath(e.passedPath);
                    });

                    // 地图自适应
                    this.mapIns.setFitView();
                }).catch(e => {
                    console.error(e);
                });
            },
            /* 开始轨迹回放动画 */
            startTrackAnim() {
                if (this.carMarker) {
                    this.carMarker.stopMove();
                    this.carMarker.moveAlong(this.lineData, {
                        duration: 200,
                        autoRotation: true
                    });
                }
            },
            /* 暂停轨迹回放动画 */
            pauseTrackAnim() {
                if (this.carMarker) {
                    this.carMarker.pauseMove();
                }
            },
            /* 继续开始轨迹回放动画 */
            resumeTrackAnim() {
                if (this.carMarker) {
                    this.carMarker.resumeMove();
                }
            }
        },
        unmounted() {
            if (this.mapIns) {
                this.mapIns.destroy();
            }

        }
    }
</script>