Mapbox中如何在线段中点添加符号并让箭头对齐线段端点

实现代码 #

你可以直接替换原有的map.on('load')回调内的代码，以下是完整实现：

map.on('load', () => {
  // 先计算线段中点坐标
  const pointA = [-70.15810500000016,-15.469970999998012]
  const pointB = [-77.10670100000081,-12.030560999998116]
  const midPoint = [
    (pointA[0] + pointB[0]) / 2,
    (pointA[1] + pointB[1]) / 2
  ]

  // 1. 添加原有路线数据源
  map.addSource('route', {
      'type': 'geojson',
      'data': {
          'type': 'Feature',
          'properties': {},
          'geometry': {
              'type': 'LineString',
              'coordinates': [pointA, pointB]
          }
      }
  });
  // 添加中点数据源
  map.addSource('routeMidPoint', {
    'type': 'geojson',
    'data': {
      'type': 'Feature',
      'properties': {},
      'geometry': {
        'type': 'Point',
        'coordinates': midPoint
      }
    }
  })

  // 2. 原有路线虚线图层
  map.addLayer({
      'id': 'route',
      'type': 'line',
      'source': 'route',
      'layout': {
          'line-join': 'round',
          'line-cap': 'round',
          'line-miter-limit': 2
      },
      'paint': {
          'line-color': '#888',
          'line-width': 3,
          'line-dasharray':[2,2]
      }
  });

  // 3. 线段端点对齐箭头图层
  map.addLayer({
    'id': 'routeArrows',
    'type': 'symbol',
    'source': 'route',
    'layout': {
      'symbol-placement': 'line',
      'icon-image': 'arrow-right', // 可替换为自定义图标id
      'icon-size': 1,
      'icon-rotation-alignment': 'map', // 核心配置：自动匹配线段角度对齐
      'symbol-spacing': 10000, // 间隔设为远大于线段渲染像素长度，仅在两端显示箭头
      'icon-allow-overlap': true
    },
    'paint': {
      'icon-color': '#5C7F74'
    }
  })

  // 4. 线段中点图标图层
  map.addLayer({
    'id': 'routeMidIcon',
    'type': 'symbol',
    'source': 'routeMidPoint',
    'layout': {
      'icon-image': 'circle-15', // 可替换为自定义图标id
      'icon-size': 1.2,
      'icon-allow-overlap': true
    },
    'paint': {
      'icon-color': '#8BAAA1'
    }
  })
});

实现逻辑说明 #

• 端点箭头自动对齐：核心依赖icon-rotation-alignment: 'map' + symbol-placement: 'line'两个配置，Mapbox会自动根据线段的走向旋转图标，不需要手动计算线段角度。如果仅需要在单侧端点显示箭头，直接调整symbol-spacing为刚好等于线段像素长度的数值，或者单独为终点创建点数据源，手动计算线段角度赋值给icon-rotate属性即可
• 中点坐标计算：短距离场景直接对两个端点的经纬度取平均即可，如果是跨半球/跨大经度的长距离路线，可以引入turf.js的turf.center()方法计算更精准的中点
• 自定义图标替换：如果默认内置的图标不符合需求，可以先通过map.loadImage()加载自定义图标资源，再用map.addImage()给图标注册id，替换上述代码中icon-image的取值即可

内容的提问来源于stack exchange，提问作者QBilly