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

Question

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

使用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-cap图层样式更接近您想要的样式：

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