Question

这里！

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

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

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

一起实现

提供样本小提琴，其中定义了带有颜色的数组

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腿的单独着色

1 个答案: