here-api - 如何使用Here Map JS绘制车辆图标移动动画以及传递的坐标

Question

我需要显示动画和路线。我可以通过计算路线休息呼叫来获取形状信息。想要使用形状坐标来绘制一个循环移动从起点到终点的车辆动画。如何在Here map Using Java Script module in HTML page中实现相同的功能。

我已经尝试了下面 URI 中列出的信息，但它看起来与我无关 https://developer.here.com/api-explorer/geovisualization/technology_animation/animated-markers

标签： here-apihere-maps-rest

Answer 1

这种方法将使您朝着正确的方向前进。另请参阅此操作示例：tcs.ext.here.com/examples/v3/geofencing

var Walker = function (marker /*H.map.Marker*/, path /*H.map.Polyline.getStrip()*/) {
            this.path = path;
            this.marker = marker;
            this.idx = 0;
            this.dir = -1;
            this.isWalking = false;
            var that = this;
            this.walk = function () {
                // Get the next coordinate from the route and set the marker to this coordinate
                var coord = path.extractPoint(that.idx);

                marker.setPosition(coord);

                // If we get to the end of the route reverse direction
                if (!that.idx || that.idx === path.getPointCount() - 1) {
                    that.dir *= -1;
                }

                that.idx += that.dir;

                /* Recursively call this function with time that depends on the distance to the next point
                * which makes the marker move in similar random fashion
                */
                // that.timeout = setTimeout(that.walk, Math.round(coord.distance(path.extractPoint(that.idx)) * 2.5));
                that.timeout = setTimeout(that.walk, 200);
                that.isWalking = true;
                var pixelcoord  = map.geoToScreen(coord),
                objects = map.getObjectsAt(pixelcoord.x, pixelcoord.y),
                covers = false,
                log = document.getElementById("log");

                for (var object in objects) {
                    if (objects[object] === this.circle)
                    {
                        log.innerHTML += "Object is in circle geofence <br>";
                        this.circle.setStyle({fillColor: 'rgba(255, 0, 0, 0.5'});
                        covers = true;
                    }
                    else if(objects[object] === this.polyline)
                    {
                        log.innerHTML += "Object is in route geofence <br>";
                        this.polyline.setStyle({strokeColor: 'rgba(255, 0, 0, 0.5', lineWidth: 8});
                        covers = true;
                    }
                    else if(objects[object] === this.polygon)
                    {
                        log.innerHTML += "Object is in polygon geofence <br>";
                        this.polygon.setStyle({strokeColor: 'rgba(255, 0, 0, 0.5', lineWidth: 8});
                        covers = true;
                    }
                    else if(objects[object] === this.isoline)
                    {
                        log.innerHTML += "Object is in isoline geofence <br>";
                        this.isoline.setStyle({strokeColor: 'rgba(255, 0, 0, 0.5', lineWidth: 8});
                        covers = true;
                    }
                    if(covers)
                        break;
                }

                if(!covers && (this.circle !== undefined || this.polyline !== undefined || this.isoline !== undefined || this.polygon !== undefined))
                {
                    log.innerHTML += "Object is not in geofence <br>";
                    this.circle.setStyle({fillColor: 'rgba(255, 255, 255, 0.5'});
                    this.polyline.setStyle({strokeColor: 'rgba(0,0,0,0.4)', lineWidth: 8});
                    this.polygon.setStyle({strokeColor: "#f00", lineWidth: 1});
                    this.isoline.setStyle({strokeColor: "#f00", lineWidth: 1});
                }

                log.scrollTop = log.scrollHeight;
            };

            this.stop = function () {
                clearTimeout(that.timeout);
                this.isWalking = false;
            };
        };