路况和轨迹播放综合效果 ​

player.on('playing',e=>{

});

//简单的经纬度数据处理
        function formatLngLats(str) {
            if (str.indexOf(';') === -1) {
                const lnglat = str.split(',').map(v => {
                    return parseFloat(v);
                });
                lnglat.push(0);
                return lnglat;
            }
            const array = str.split(';');
            return array.map(c => {
                return formatLngLats(c);
            })
        }


        function getColor(status) {
            if (status === '畅通') return;
            if (status === '缓行') return '#FFA700';
            if (status === '拥堵') return '#E94B37';
        }


        //整条路线的坐标数据
        function getWholeCoordinates(route) {
            let str = '';
            const { origin, destination, paths } = route;
            str += origin;
            const path = paths[0];
            const steps = path.steps;
            steps.forEach(step => {
                const { polyline } = step;
                str += ';';
                str += polyline;
            });
            str += ';';
            str += destination;
            return formatLngLats(str);
        }

//添加基本的路线
        function addBaseLine(route) {
            const line = new maptalks.LineString(getWholeCoordinates(route), {
                symbol: {
                    lineColor: 'green',
                    lineWidth
                }
            }).addTo(layer);
        }


        //分段路线数据
        function addLines(path) {
            const steps = path.steps;
            steps.forEach(step => {
                const tmcs = step.tmcs || [];
                tmcs.forEach(tmc => {
                    const { polyline, status } = tmc;
                    const lineColor = getColor(status);
                    if (!lineColor) {
                        return;
                    }
                    const coordinates = formatLngLats(polyline);
                    const line = new maptalks.LineString(coordinates, {
                        symbol: {
                            lineColor,
                            lineWidth
                        }
                    });
                    line.addTo(layer);
                });
            });
        }

        //起始点
        function addPoints(route) {
            const { origin, destination } = route;
            const point = new maptalks.Marker(formatLngLats(origin), {
                symbol: {
                    markerFile: './../assets/image/start.png'
                }
            }).addTo(layer);
            const point1 = new maptalks.Marker(formatLngLats(destination), {
                symbol: {
                    markerFile: './../assets/image/end.png'
                }
            }).addTo(layer);

        }

//轨迹播放
        function addRouterLine(route) {
            const coordinates = getWholeCoordinates(route).map(c => {
                return new maptalks.Coordinate(c);
            })
            const coords = [];
            //相邻点重复的去重,如果你的业务不需要可以省去改步骤
            for (let i = 0, len = coordinates.length; i < len; i++) {
                const c = coordinates[i];
                const lastC = coords[coords.length - 1];
                if (!lastC || !c.equals(lastC)) {
                    coords.push(c);
                }
            }
            //给坐标点赋值时间戳,这个值正常应该坐标数据里就携带,这里只是模拟下的
            let time = new Date().getTime();
            const path = [];
            const speed = 1 * 1000 / 3600;
            for (let i = 0, len = coords.length; i < len; i++) {
                if (i === 0) {
                    const lnglat = coords[i].toArray();
                    lnglat.push(time);
                    path.push(lnglat);
                } else {
                    const c2 = coords[i], c1 = coords[i - 1];
                    //两点之间的距离
                    const distance = map.computeLength(c2, c1);
                    //时间差
                    const offsetTime = distance / speed * 1000;
                    time += offsetTime;
                    const lnglat = c2.toArray();
                    lnglat.push(time);
                    path.push(lnglat);
                }
            }

            player = new maptalks.RoutePlayer({ path }, map, {
                maxTrailLine: 100,
                showTrail: false,
                //不显示线路
                showRoutes: false,
                // showMarker: false,
                lineSymbol: {
                    lineColor: '#f0f',
                    lineWidth: lineWidth + 2
                },
                markerSymbol: {
                    markerFile: './../assets/image/car.svg',
                    markerWidth: 40,
                    markerHeight: 40
                }
            });
            unitTime = player.getUnitTime();
        }

        function loadData() {
            fetch('./../assets/data/tripline.json').then(res => res.json()).then(json => {
                const route = json.route;
                const path = route.paths[0];
                addBaseLine(route);
                addLines(path);
                addPoints(route);
                addRouterLine(route);
            })
        }
        loadData();