在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

- vito

---

嗯，我不知道。symbol-spacing 应该控制这个，但在大约100以下没有任何效果。我怀疑这与您的源图标太大有关。也许首先调整图像大小，而不要依赖于 icon-size。 - undefined

@SteveBennett 感谢您的反馈，图标大小是问题所在。 - undefined

@vito 你把 icon-size 改成了什么？或者说你是怎么改变图标的大小的？ - undefined

@marisbest2将图像调整为6x6像素/降低图像分辨率。 - undefined

@Alexander，这里没有预定义的箭头，需要添加一个新的img图层，请尝试使用jsfiddle并使用您的JWT令牌。 - undefined

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

- Robert S