Vue2-腾讯地图--小车路线轨迹回放

腾讯地图–小车路线轨迹回放

前期准备工作在腾讯地图–地图展示 一文中即可查看

首先是进行腾讯地图的回调函数和创建路线方法的创建

1. 在utils文件夹下面创建一个cb.js文件

/**
 * cb腾讯地图路线规划回调函数
 * @param {*} ret 
 */
export function cb(ret) {
    var coords = ret.result.routes[0].polyline,
    pl = [];
    //坐标解压（返回的点串坐标，通过前向差分进行压缩）
    var kr = 1000000;
    for (var i = 2; i < coords.length; i++) {
    coords[i] = Number(coords[i - 2]) + Number(coords[i]) / kr;
    }
    //将解压后的坐标放入点串数组pl中
    for (var n = 0; n < coords.length; n += 2) {
    pl.push(new window.TMap.LatLng(coords[n], coords[n + 1]));
    }
    display_polyline(pl); //显示路线
    //标记起终点marker
}

/**
 * display_polyline创建路线
 * @param {*} pl 
 */
export function display_polyline(pl){
    // console.log(pl);
    // // let color = ['rgba(0, 180, 0, 1)','rgba(255, 0, 0, 1)','rgba(204,153, 0, 1)','rgba(255, 0, 0, 1)','rgba(204,153, 0, 1)','rgba(0, 180, 0, 1)']
    // let geo = []
    // pl.forEach(item=>{
    //     var obj = {
    //         path: [item.lat,item.lng]
    //     }
    //     geo.push(obj)
    // })
    // var newGeo = []
    // geo.forEach(list=>{
    //     var obj = {
    //         path: list,
    //         color: 'rgba(0, 180, 0, 1)'
    //     }
    //     newGeo.push(obj)
    // })
    // console.log(newGeo);
    //创建 MultiPolyline显示折线
    new window.TMap.MultiPolyline({
        id: 'polyline-layer', //图层唯一标识
        map: window.map,// 绘制到目标地图
        //折线样式定义
        styles: {
            'style_blue': new window.TMap.PolylineStyle({
                color: '#3777FF', //线填充色
                width: 8, //折线宽度
                borderWidth: 3, //边线宽度
                borderColor: '#FFF', //边线颜色
                lineCap: 'round', //线端头方式
                showArrow: true,  // 显示箭头
                arrowOptions:{
                    width: 6,
                    height: 10,
                    space: 20,
                }
            }),
            // 彩虹线
            'caihong':new window.TMap.PolylineStyle({
                color: '#3777FF', //线填充色
                width: 8, //折线宽度
                borderWidth: 3, //边线宽度
                showArrow: true,
                arrowOptions: {
                    width: 6,
                    height: 10,
                    space: 70
                },
                lineCap: 'round',
            }),
        },
        //折线数据定义
        geometries: [
            {
                id: 'pl_1', // 折线唯一标识，删除时使用
                styleId: 'style_blue',  // 绑定样式名
                // styleId: 'caihong', 
                paths: pl,
                // rainbowPaths: newGeo,  // 彩虹线数组
            }
        ]
    });
}

2. 在main.js文件里面书写

// 引入腾讯地图路线规划
import { cb } from './utils/cb';
window.cb = cb
import { display_polyline } from './utils/cb';
window.display_polyline = display_polyline

3. 然后直接在页面中书写

<template>
    <div class="container">
        <el-button type="primary" @click="moveRoute">小车显示</el-button>
        <el-button type="primary" @click="move">小车移动路线</el-button>
        <!-- 地图容器 -->
        <div id="map-trajectory"></div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            map: null,
            carPath:null,  // 小车移动路线
            mark: null
        }
    },
    mounted(){
        this.initMap()
    },
    methods:{
        initMap(){
            this.map = new window.TMap.Map(document.getElementById('map-trajectory'), {
                center: new window.TMap.LatLng(39.984104, 116.307503),
                zoom: 15,
                pitch: 43.5,
                rotation: 45
            });
            // 标记
            new window.TMap.MultiMarker({
                map: this.map,
                styles:{
                    'myStyle': new window.TMap.MarkerStyle({
                        width: 30,
                        height: 40,
                        opacity: 0.9,
                    })
                },
                geometries:[
                    {
                        id: '1',
                        styleId: 'myStyle',
                        position: new window.TMap.LatLng(39.984104, 116.307503)
                    }
                ]
            })
        },
        // 小车移动路线
        moveRoute(){
            this.carPath = [  //小车移动路线 
                new window.TMap.LatLng(39.98481500648338, 116.30571126937866),
                new window.TMap.LatLng(39.982266575222155, 116.30596876144409),
                new window.TMap.LatLng(39.982348784165886, 116.3111400604248),
                new window.TMap.LatLng(39.978813710266024, 116.3111400604248),
                new window.TMap.LatLng(39.978813710266024, 116.31699800491333)
            ];
            this.mark =  new window.TMap.MultiMarker({
                map: this.map,
                styles:{
                    'car-down':new window.TMap.MarkerStyle({
                        width: 40,
                        height: 40,
                        anchor:{
                            'x': 20,
                            'y': 20
                        },
                        faceTo: 'map',
                        rotate: 180,
                        src: require('../../assets/tengxun/car.png')
                    })
                },
                geometries:[  //小车marker的位置信息
                    {
                        id:'car',  //因MultiMarker支持包含多个点标记，因此要给小车一个id
                        styleId: 'car-down',  // 绑定样式
                        position: new window.TMap.LatLng(39.98481500648338, 116.30571126937866)  // 初始坐标位置
                    }
                ]
            })
            new window.TMap.MultiPolyline({  // 路线的轨迹
                id: 'polyline',
                map: this.map,
                styles:{
                    'styleLine': new window.TMap.PolylineStyle({
                        color: '#3777FF', 
                        width: 6, 
                        borderWidth: 5, 
                        borderColor: '#CCC', 
                        lineCap: 'butt',
                        showArrow: true,  // 显示箭头
                        arrowOptions:{
                            width: 6,
                            height: 10,
                            space: 20,
                        }
                    })
                },
                geometries:[{
                    paths:this.carPath
                }]
            })
        },
        // 小车移动路线
        move(){
            this.mark.moveAlong({
                'car':{   //设置让"car"沿"path"移动，速度70公里/小时
                    path: this.carPath,  // 设置让"car"沿"path"移动
                    speed: 120  // 小车的速度
                }
            },{
                autoRotation: true,  // 车头始终向前(沿路线自动旋转)
            })
        }
    }
}
</script>

<style lang="less" scoped>

</style>

素材：

运行展示：