小编vit*_*ito的帖子

在Mapboxgl中在线显示方向箭头

尝试在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]]
            }
          }
        });
Run Code Online (Sandbox Code Playgroud)

箭头层

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', …
Run Code Online (Sandbox Code Playgroud)

leaflet mapbox mapbox-gl-js

7
推荐指数
1
解决办法
2906
查看次数

标签 统计

leaflet ×1

mapbox ×1

mapbox-gl-js ×1