javascript - Mapbox js : Changing the different latlng of a polyline based on properties

Question

我有一个对象数组，每个对象都包含坐标和不同的属性。现在我想在 map 上绘制这些 latlng 对象的折线，该折线根据对象的属性更改颜色。但由于我发现折线只有一种颜色对象..所以我无法为折线上的不同点定义不同的颜色..这有可能吗？我也找不到 googlemaps 或此处 API 的类似内容..

非常感谢!

Answer 1

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

以下示例采用带有纬度/经度和颜色信息的数组，并使用它来绘制一系列线条。通过将所有行添加到 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] }}
  ));
}

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

看!一个彩虹! (独 Angular 兽单独出售。)