javascript - PolyLine 腿的单独着色

Question

这里!

有一个关于我们需要实现的功能的查询，它是将多种颜色传递到折线上的航路点 0 到 1，但我们卡在了 H.geo.Polyline 上，只能应用一种样式:

polyline = new H.map.Polyline(lineString, { style: { lineWidth: 4, strokeColor: 'red' } }); 

有什么方法可以用 core-map js v3.1

实现相同的功能

提供一个示例 fiddle ，其中定义了带有颜色的数组

http://jsfiddle.net/n3e7ohwg/88/

Answer 1

每个 SpatialStyle 对象只能有一种颜色，因此不可能将多种颜色传递给一种样式。

您可以做的是为每条腿创建具有不同样式的新折线。

这段代码应该适合你:

var matrix = [
    [new H.geo.Point(41.759876, 12.942710), 'red'],
    [new H.geo.Point(41.768711, 12.947602), 'orange'],
    [new H.geo.Point(41.772936, 12.956271), 'yellow'],
    [new H.geo.Point(41.773704, 12.964082), 'green'],
    [new H.geo.Point(41.770824, 12.975497), 'blue'],
    [new H.geo.Point(41.764230, 12.980647), 'indigo'],
    [new H.geo.Point(41.758596, 12.982965), 'violet']
  ],
  style = new H.map.SpatialStyle({
    lineWidth: 4,
    lineCap: 'butt'
  }),
  routeShape = route.shape,
  polyline,
  group = new H.map.Group();

  for (var i = 0; i < matrix.length - 1; i++) {
    var lineString = new H.geo.LineString();
    lineString.pushPoint(matrix[i][0]);
    lineString.pushPoint(matrix[i + 1][0]);
    polyline = new H.map.Polyline(lineString, {
      style: style.getCopy({strokeColor: matrix[i][1]})
    });
        group.addObject(polyline);
  }

    // Add the polyline to the map
  map.addObject(group);

或者检查这个 jsfiddle: http://jsfiddle.net/ampvqwdg/8/