Mapbox js：根据属性更改折线的不同latlng

Question

我有一个对象数组，每个对象包含坐标和不同的属性。现在我想在地图上绘制那些latlng对象的折线，它根据对象的属性改变颜色。但是因为我可以发现折线只有一个颜色对象..所以我不能为折线上的不同点定义不同的颜色.. 这有可能吗？我无法为googlemaps或这里的API找到类似的东西..

非常感谢！

Answer 1

使用HERE API时，你是正确的Polyline 只能有一种颜色。解决方法可能是绘制几条线，每条线都有自己的颜色。我们试一试。

以下示例采用带有lat / long和颜色信息的数组，并使用它来绘制一系列线条。通过将所有行添加到Group，我们就能像单个对象一样处理它们。

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']
];

var rainbowGroup = new H.map.Group();

function drawRainbow(map) {
  map.addObject(rainbowGroup);
  for (var i = 0, len = matrix.length-1; i < len; i++) {
    addRainbowSegment(matrix[i], matrix[i+1], map);
  }
}

function addRainbowSegment(point, nextPoint, map) {
  var strip = new H.geo.Strip();
  strip.pushPoint(point[0]);
  strip.pushPoint(nextPoint[0]);
  rainbowGroup.addObject(new H.map.Polyline(
    strip, { style: { lineWidth: 20, strokeColor: point[1] }}
  ));
}

最终结果应该看起来像一条连续线，每个线段都有不同的颜色。像这样：

看！一个彩虹！ （独角兽单独出售。）