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/

PolyLine 腿的单独着色

Individual colouring for PolyLine legs

javascript

here-api