GeoJSON 线

一条从北京经南京、上海到海口的路线，虚线样式， 六个节点用 circle 图层单独绘制。

说明

线与点放在同一个 FeatureCollection 里，各自用一个图层绘制， 通过 geometry-type 过滤分开。 这样只需要加一个 source，样式切换时也只需重建一次。

map.addLayer({
  id: 'route-line',
  type: 'line',
  source: 'route',
  filter: ['==', ['geometry-type'], 'LineString'],
  paint: { 'line-color': '#1f5fd0', 'line-width': 3 }
});

line-width 用 interpolate 随缩放变化。 如果固定写 3，低缩放下线会显得过粗，高缩放下又偏细。

点击节点时把 geometry.coordinates 复制一份传给弹窗， 避免弹窗与源数据共享同一个数组引用。