HERE Maps JS v3.1：如何为PolyLine各分段设置不同颜色？

当然可以实现这个需求啦！虽然H.map.PolyLine本身仅支持应用单一样式，但我们可以换个思路——把整条折线拆分成多个独立的小段折线，给每个小段单独设置颜色，拼接起来就能呈现出多色分段的效果。

具体实现步骤 #

1. 准备途经点与对应颜色数组
   先定义好你的途经点坐标数组，以及每个分段对应的颜色数组（注意颜色数组的长度要等于途经点数量减1，因为n个点对应n-1个分段）。

2. 循环创建分段折线
   遍历途经点数组，每次取相邻的两个点生成一个小的LineString，再基于这个LineString创建独立的PolyLine，并为其设置对应的颜色样式，最后添加到地图中。

代码示例 #

// 示例途经点数组（替换为你的实际坐标）
const waypoints = [
  new H.geo.Point(52.5160, 13.3779),
  new H.geo.Point(52.5206, 13.3862),
  new H.geo.Point(52.5294, 13.4025),
  new H.geo.Point(52.5383, 13.4188)
];

// 对应每个分段的颜色数组
const segmentColors = ['#ff0000', '#00ff00', '#0000ff'];

// 遍历创建每个分段的折线
for (let i = 0; i < waypoints.length - 1; i++) {
  // 创建当前分段的LineString
  const segmentLine = new H.geo.LineString();
  segmentLine.pushPoint(waypoints[i]);
  segmentLine.pushPoint(waypoints[i + 1]);
  
  // 为当前分段创建PolyLine并设置样式
  const segmentPolyline = new H.map.PolyLine(segmentLine, {
    style: {
      lineWidth: 4,
      strokeColor: segmentColors[i] || '#999999' // 容错：如果颜色数组长度不足，用默认灰色
    }
  });
  
  // 将分段折线添加到地图
  map.addObject(segmentPolyline);
}

注意事项 #

• 确保颜色数组的长度与分段数（途经点数量-1）匹配，避免出现颜色缺失的情况；
• 如果需要动态调整分段或颜色，可以在更新数据后重新创建所有分段折线（记得先移除旧的折线对象）；
• 这种方式创建的多个小段折线在视觉上和单条折线无差异，交互上也可以根据需求统一处理（比如绑定相同的点击事件）。

内容的提问来源于stack exchange，提问作者Tijo Thomas