如何在 Mapbox-gl-js 中跟踪点（不是虚线）路径？

Question

我正在使用最新版本的 Mapbox-gl-js，我想以等距圆的形式跟踪路径，就像谷歌地图在我们询问“步行”路线时所做的那样：

使用 Mapbox-gl-js，我尝试了虚线和圆形布局，但它们不能满足我的需求：

// Dash
map.addLayer({
  id: 'my-points',
  type: 'line',
  source: 'my-data',
  paint: {
    'line-color': 'gray',
    'line-width': 10,
    'line-dasharray': [1, 1],
  },
});

// Circles
map.addLayer({
  id: 'my-lines',
  type: 'circle',
  source: 'my-data',
  paint: {
    'circle-color': 'red',
    'circle-radius': 3,
  },
});

虚线样式尊重等距但不显示圆圈：

圆圈样式显示圆圈，但仅在提供的坐标处，而不是路线的所有长度。

所以我的问题是：有没有办法沿着 geojson/lineString 路径追踪等距的点、圆或可自定义的图案？

谢谢！

Answer 1

如果你使用一个symbol图层，并以某种圆形图标作为符号，它应该更接近你想要的。就像是：

{
   type: 'symbol',
   source: 'route',
   layout: {
     'icon-image': 'mycircle',
     'symbol-placement': 'line',
     'symbol-spacing': 50,
   }

https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers-symbol

我怀疑你必须大大简化你的路线才能使其渲染得很好。

Answer 2

虽然仍然不是很完美，但您可以line使用line-caplayout 道具并将线段长度设置为零，从而更接近您想要的图层样式：

    layout: {
      'line-cap': 'round'
    },
    paint: {
      'line-width': 10,
      'line-dasharray': [0, 2]
    }