高德地图 3d地图 轨迹回放

js yekong

wanjunshijie 2021-04-22 at 13.43.35@2x

html

    <script
            type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=your key"
    ></script>
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <div class="bodymap" id="echartmap"></div>

js

            getguiji() {
                var that = this;
                $.get("https://restapi.amap.com/v3/direction/driving?origin=125.317472,43.827952&destination=125.317472,43.897952&extensions=all&output=JSON&key=your key", function (data, status) {
                    //设置数据
                    let steps = data.route.paths[0].steps;
                    console.log(steps)
                    var path = [];
                    var path2 = [];
                    for (var i = 0; i < steps.length; i++) {
                        path.push(steps[i].polyline.split(";"))
                    }
                    for (var i = 0; i < path.length; i++) {
                        for (var s = 0; s < path[i].length; s++) {
                            path2.push(path[i][s])
                        }
                    }
                    var path3 = []
                    for (var i = 0; i < path2.length; i++) {
                        var datai = path2[i].split(",");
                        path3.push(datai)
                    }
                    marker = new AMap.Marker({
                        map: that.map,
                        position: path3[0],
                        icon: "https://webapi.amap.com/images/car.png",
                        offset: new AMap.Pixel(-26, -13),
                        autoRotation: true,
                        angle: -90,
                    });

                    // 绘制轨迹
                    var polyline = new AMap.Polyline({
                        map: that.map,
                        path: path3,
                        showDir: true,
                        strokeColor: "#28F",  //线颜色
                        // strokeOpacity: 1,     //线透明度
                        strokeWeight: 6,      //线宽
                        // strokeStyle: "solid"  //线样式
                    });

                    var passedPolyline = new AMap.Polyline({
                        map: that.map,
                        // path: lineArr,
                        strokeColor: "#AF5",  //线颜色
                        // strokeOpacity: 1,     //线透明度
                        strokeWeight: 6,      //线宽
                        // strokeStyle: "solid"  //线样式
                    });

                    marker.on('moving', function (e) {
                        passedPolyline.setPath(e.passedPath);
                    });

                    that.map.setFitView();

                    function startAnimation() {
                        marker.moveAlong(path3, 10000);
                    }

                    function pauseAnimation() {
                        marker.pauseMove();
                    }

                    function resumeAnimation() {
                        marker.resumeMove();
                    }

                    function stopAnimation() {
                        marker.stopMove();
                    }

                    startAnimation();
                });


            },
            getmap() {
                var that = this;
                that.map = new AMap.Map('echartmap', {
                    resizeEnable: true,
                    zoom: 14,
                    scrollWheel: true,
                    viewMode: '3D',
                    pitch: 50,
                    rotation: 0,
                    maxZoom: 30,
                    minZoom: 0,
                    mapStyle: 'amap://styles/blue',
                    features: ['bg', 'road', 'building'],
                    center: [125.317472, 43.827952]
                });
            },
喜欢