mapbox-gl-js - 如何在 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

虽然还不是很完美，但您可以使用 line 更接近您想要的效果。图层样式使用line-cap布局 Prop 并将您的线段长度设置为零:

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