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 路径跟踪等距的点、圆或可定制的模式？

谢谢！

标签： mapbox-gl-js

Answer 1

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

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