vue 使用高德地图做的轨迹回放，可调倍数

先下载

npm i @amap/amap-jsapi-loader --save

在main.js引入

import AMapLoader from '@amap/amap-jsapi-loader';

AMapLoader.load({
    key: "",              // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.PlaceSearch',
    'AMap.Geocoder', 'AMap.Driving','AMap.Scale'
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等

AMapUI: { //重点就是这个
    version: '1.1',
    plugins: ['misc/PathSimplifier', 'overlay/SimpleMarker'] //SimpleMarker设置自定义图标，PathSimplifier轨迹展示组件
}
    // Loca: {
    //     // 是否加载 Loca， 缺省不加载
    //     version: '2.0.0' // Loca 版本，缺省 1.3.2
    // }
}).then((AMap) => {
    // 挂载AMap
    Vue.prototype.$AMap = AMap;
});

代码

<template>
    <div class="modal">
    
        <div id="outer-box">
    
            <div id="containerGuiji"></div>
    
            <div id="routes-container">
    
                <div class="inputNumber-box">
    
                    倍数：
    
                    <a-input-number id="inputNumber" size="small" v-model="beishu" :min="1" :max="10" @change="onChangeNum" />
    
                </div>
    
                <div>时速：{{ beishu * sudu }} km/h</div>
    
    
    
                <div class="route-item" data-idx="0">
    
                    <!-- <button class="navigBtn" data-btnidx="0" data-act="start">
    
              开始巡航</button
    
            > -->
                    <button @click="onStart">开始巡航</button>
                    <div class="speedBox"></div>
                    <div class="msg"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import pathJson from "./../assets/json/path.json"
export default {
    name: "guiji",
    data() {
        return {
            map: null,
            marker: null,
            lineArr: null,
            beishu: 1,
            sudu: 100,
            pathNavigs: []
        };
    },
    methods: {
        onChangeNum(val) {
            this.updateSpeedTxt(val);
        },
        init() {
            let that = this
            this.map = new this.$AMap.Map('containerGuiji', {
                zoom: 16, //初始地图级别
                //center: center,//设置地图的中心点
                // features: ['bg', 'road', 'point'], //point 显示出地图的省市区名称
                // viewMode: '3D', //高德地图JS API UI组件库-海量点展示、轨迹展示不支持3D地图
            })
            AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], (PathSimplifier, $) => {

                if (!PathSimplifier.supportCanvas) {
                    alert('当前环境不支持 Canvas！');
                    return;
                }

                //just some colors
                let colors = [
                    "#3366cc"
                ];

                let pathSimplifierIns = new PathSimplifier({
                    zIndex: 100,
                    //autoSetFitView:false,
                    map: that.map, //所属的地图实例

                    getPath: (pathData, pathIndex) => {
                        return pathData.path;
                    },
                    getHoverTitle: (pathData, pathIndex, pointIndex) => {
                        return pathData.name
                    },
                    renderOptions: {
                        pathLineStyle: {
                            dirArrowStyle: true
                        },
                        getPathStyle: (pathItem, zoom) => {

                            let color = colors[pathItem.pathIndex],
                                lineWidth = Math.round(4 * Math.pow(1.1, zoom - 3));

                            return {
                                pathLineStyle: {
                                    strokeStyle: color,
                                    lineWidth: lineWidth
                                },
                                pathLineSelectedStyle: {
                                    lineWidth: lineWidth + 2
                                },
                                pathNavigatorStyle: {
                                    fillStyle: color
                                }
                            }
                        }
                    }
                });

                that.pathNavigs = [];



                window.pathSimplifierIns = pathSimplifierIns;

                const obj = {
                    name: '轨迹回放',
                    path: pathJson.path
                }
                pathSimplifierIns.setData([obj]);

                that.updateSpeedTxt(1);
                that.onStart()
            });


        },
        getNavg(pathIndex) {
            const that = this;
            if (!that.pathNavigs[pathIndex]) {
                //创建一个轨迹巡航器
                let navgtr = pathSimplifierIns.createPathNavigator(pathIndex, {
                    loop: false, //是否重复
                    speed: that.sudu * that.beishu //初始化速度
                });
                let $markerContent = $('<div class="markerInfo"></div>');
                $markerContent.html(pathSimplifierIns.getPathData(pathIndex).name);

                navgtr.marker = new that.$AMap.Marker({
                    icon: require(`./../assets/images/car1.png`),
                    // anchor: 'center',
                    offset: new that.$AMap.Pixel(-13, -26),
                    // offset: new AMap.Pixel(-15, -15),
                    map: that.map
                });


                navgtr.on('move', (e) => {
                    navgtr.marker.setPosition(navgtr.getPosition());
                    // console.log(e)
                });

                navgtr.onDestroy(() => {
                    that.pathNavigs[pathIndex] = null;
                    navgtr.marker.setMap(null);
                });
                that.pathNavigs[pathIndex] = navgtr;
            }

            return that.pathNavigs[pathIndex];
        },
        onStart() {
            let navg = this.getNavg(0);
            navg['start']();
        },
        updateSpeedTxt(val) {
            if (this.pathNavigs[0]) {
                this.pathNavigs[0].setSpeed(this.sudu * val);
            }
        }

    },
    mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                this.init();
            }, 1000)



        });
    }
};
</script>
<style lang="less">
.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.5);
}

#outer-box {
    height: 90%;
    width: 90%;
    position: relative;
    #container {
        height: 100%;
        width: 100%;
    }
    #containerGuiji {
        height: 100%;
        width: 100%;
    }
    #routes-container {
        position: absolute;
        left: 30px;
        background-color: rgb(13, 241, 165);
        padding: 10px 20px 0 20px;
        bottom: 30px;
        .inputNumber-box {
            margin: 0px 0 5px 0;
        }
    }
    .route-item pre {
        margin: 0;
    }
    .route-item h3 {
        margin: 5px 0;
        font-size: 14px;
        cursor: pointer;
    }
    .hide {
        display: none;
    }
    .speedBox {
        padding: 5px 0;
    }
    .speedRange {
        vertical-align: middle;
        margin: 0;
        padding: 0;
        width: 100px;
    }
    .markerInfo {
        background: rgba(255, 255, 255, 0.7);
        padding: 2px 5px;
        border: 1px solid #ccc;
        white-space: nowrap;
    }
}
</style>