在 Mapboxgl 中显示线上的方向箭头

Question

尝试在mapboxgl中显示箭头作为方向指示。该箭头仅在高变焦时可见，在低变焦时不可见。

使用

'symbol-placement': 'line'

添加图像层

线层

  map.addLayer({
          'id': 'route',
          'type': 'line',
          'source': 'mapSource',
          'filter': ['==', '$type', 'LineString'],
          'layout': {
            'line-join': 'round',
            'line-cap': 'round'
          },
          'paint': {
            'line-color': '#3cb2d0',
            'line-width': {
              'base': 1.5,
              'stops': [[1, 0.5], [8, 3], [15, 6], [22, 8]]
            }
          }
        });

箭头层

const url = 'img/arrow.png'
    map.loadImage(url, (err, image) => {
      if (err) { return; }
      map.addImage('arrow', image);
      map.addLayer({
        'id': 'arrowId',
        'type': 'symbol',
        'source': 'mapSource',
        'layout': {
          'symbol-placement': 'line',
          'symbol-spacing': 1,
          'icon-allow-overlap': true,
          // 'icon-ignore-placement': true,
          'icon-image': 'arrow',
          'icon-size': 0.045,
          'visibility': 'visible'
        }
      });
    });

低变焦时没有箭头

高变焦时显示箭头

我尝试过使用符号间距进行实验，但没有成功。 有没有办法强制地图框在低缩放时显示箭头？

jsfiddle.net/4jjmh2nb

Answer 1

这个问题有更新吗？