使用 HERE API 绘制多条不同颜色的多段线

Question

我想在道路上绘制多段线，并根据特定道路速度限制以不同颜色显示多段线，如下所示：

是否可以通过 HERE 地图实现此功能 API？

var lineString = new H.geo.LineString();

        routeShape.forEach(function(point) {
            var parts = point[0].split(',');

            lineString.pushLatLngAlt(parts[0], parts[1]);

        });

        polyline = new H.map.Polyline(lineString, {
            style: {
                lineWidth: 4,
                strokeColor: 'rgba(0, 128, 255, 0.7)'
            }
        });

        map.addObject(polyline);
        map.setViewBounds(polyline.getBounds(), true);

Answer 1

你的问题有两种解释。我将尝试回答这两个问题，以便您可以选择您的意图。希望对您有所帮助！

如何绘制不同颜色段的路线 - H.geo.LineString就是用来实现这个的。请参考 https://developer.here.com/documentation/maps/topics_api/h-geo-linestring.html#h-geo-linestring. You can also read this article(https://developer.here.com/blog/who-wants-ice-cream-a-here-maps-api-for-javascript-tutorial-part-4-advanced-routing)，他们尝试使用 H.geo.Strip（已被弃用并被 H.geo.LineString 取代）来实现相同的目的。
如何获取路线中每个 link 的限速 - 使用路由 api 如下例所示。查看
中的答案
https://route.cit.api.here.com/routing/7.2/calculateroute.json?jsonAttributes=1&waypoint0=51.31854,9.51183&waypoint1=50.11208,8.68342&departure=2019-01-18T10:33:00&routeattributes=sh,lg&legattributes=li&linkattributes=nl,fc&mode=fastest;car;traffic:enabled&app_code=xxx&app_id=xxx

Answer 2

为您的路由请求使用路由属性："shape"，您可能会得到如下每个路段和关联的速度限制：

       let route = res.body.response.route[0];
        let legs = route.leg;
        let links = [];
        legs.forEach(leg => {
            Object.assign(links, leg.link);
        });
        console.log("#links", links.length);

        links.forEach(link => {
            let sl = link.speedLimit; // in m/sec
            let shape = link.shape; // shape to draw

            let style = {
                lineWidth: 4,
                strokeColor: "yellow"
            };
            if (sl < 50 * 1000 / 3600)
                style.strokeColor = "red";
            else if (sl < 90 * 1000 / 3600)
                style.strokeColor = "orange";
            else
                style.strokeColor = "green";

            let line = new H.geo.LineString();
            shape.forEach(latlng => {
                let coord = latlng.split(",");
                line.pushLatLngAlt(coord[0], coord[1]);
            });

            let polyline = new H.map.Polyline(line, {
                style: style
            });

            /* group created previously as
               group = new H.map.Group();
               map.addObject(group);
            */
            group.addObject(polyline);

        });

根据速度限制，根据自己的风格独立绘制每个形状。

使用 HERE API 绘制多条不同颜色的多段线

Drawing multiple polyline with different color using HERE API

here-api