在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'
        }
      });
    });

低变焦时无箭头

高缩放显示箭头

我已经尝试过用符号间距进行试验，但是没有用。有没有办法强制mapbox在低倍缩放时显示箭头？

jsfiddle.net/4jjmh2nb

Answer 1

请使用 minzoom 属性将图标设置为低缩放级别。也许它会对你有所帮助。您可以调整要显示箭头图标的缩放级别。

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'
        },
        minzoom: 10,
      });
    });