如何在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,
  },
});

​

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

​

​

circles样式显示圆，但仅在提供的坐标处显示圆，而不是整个路线的长度。

​

​

所以我的问题是:有没有一种方法可以沿着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-cap布局道具并将线段长度设置为零，您可以使用line图层样式更接近于您想要的样式：

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

​

​