如何使用Mapbox GL向指定方向延长由两点定义的直线段

前置说明 #

所有场景坐标范围在1公里以内，可忽略地球曲率影响，直接使用平面几何近似计算，精度完全满足业务需求。

核心函数实现 #

prolongLine 函数可直接返回延长后的线段坐标数组，参数约定如下：

• direction 可选值：
  • start：向第一个坐标点方向延长
  • end：向第二个坐标点方向延长
  • both：向两个方向同时延长
• length：延长总长度，单位为米，向两端延长时两端各分配总长度的1/2

/**
 * 线段延长函数
 * @param {number} x1 原线段起点经度
 * @param {number} y1 原线段起点纬度
 * @param {number} x2 原线段终点经度
 * @param {number} y2 原线段终点纬度
 * @param {string} direction 延长方向
 * @param {number} length 延长总长度（单位：米）
 * @returns {Array} 新线段的坐标数组 [[新起点x,新起点y], [新终点x,新终点y]]
 */
function prolongLine(x1, y1, x2, y2, direction, length) {
  // 计算原线段方向向量
  const dx = x2 - x1;
  const dy = y2 - y1;
  // 计算原线段平面长度（转换为米，1度约等于111319米，小范围误差可忽略）
  const originalLength = Math.sqrt(dx*dx + dy*dy) * 111319;
  // 计算米级单位方向向量
  const ux = dx / originalLength * 111319;
  const uy = dy / originalLength * 111319;

  let newX1 = x1, newY1 = y1, newX2 = x2, newY2 = y2;

  switch(direction) {
    case 'start':
      newX1 = x1 - ux * length;
      newY1 = y1 - uy * length;
      break;
    case 'end':
      newX2 = x2 + ux * length;
      newY2 = y2 + uy * length;
      break;
    case 'both':
      newX1 = x1 - ux * (length / 2);
      newY1 = y1 - uy * (length / 2);
      newX2 = x2 + ux * (length / 2);
      newY2 = y2 + uy * (length / 2);
      break;
    default:
      throw new Error('direction参数可选值为：start、end、both');
  }
  return [[newX1, newY1], [newX2, newY2]];
}

Mapbox GL 新图层添加示例 #

调用函数得到延长后的线段坐标后，直接添加到自定义图层即可：

// 示例：向两端延长200米
const prolongedLine = prolongLine(116.39, 39.9, 116.4, 39.91, 'both', 200);

// 添加数据源
map.addSource('prolonged-line-source', {
  type: 'geojson',
  data: {
    type: 'Feature',
    geometry: {
      type: 'LineString',
      coordinates: prolongedLine
    }
  }
});

// 添加新渲染图层
map.addLayer({
  id: 'prolonged-line-layer',
  type: 'line',
  source: 'prolonged-line-source',
  paint: {
    'line-color': '#ff0000',
    'line-width': 3,
    'line-opacity': 0.8
  }
});

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