如何在Leaflet自定义地图图层绘制沿标记山地路线的线条？

要实现类似OutdoorActive的贴合山地地形的路线，核心不是单纯的线条绘制，而是基于地形高程数据生成适配地形的路径——普通插件大多只做平面路径连接，忽略地形起伏，所以达不到预期效果。以下是具体实现步骤：

1. 准备地形高程数据 #

首先需要获取目标区域的高程数据，常用公开数据源是SRTM（航天飞机雷达地形测绘任务）的GeoTIFF格式数据，可通过插件在Leaflet中加载并读取高程值：

import L from 'leaflet';
import 'leaflet-geotiff';

// 加载GeoTIFF高程数据，隐藏图层仅用于数据读取
const tiffLayer = L.leafletGeotiff('path/to/your/srtm-data.tif', {
  band: 0,
  opacity: 0,
  resolution: 64
}).addTo(map);

// 获取指定坐标的高程值
function getElevation(lat, lng) {
  return tiffLayer.getValueAtLatLng([lat, lng]);
}

2. 实现地形感知的路径规划 #

直接连接标记点的直线是平面路径，要贴合山地需用路径规划算法结合高程数据计算最优路径：

• 核心逻辑：以标记点为起点/终点，在高程网格中搜索代价最小的路径（代价可设置为「距离+坡度权重」，避免陡坡），常用算法有Dijkstra或A*。
• 简化实现：借助@turf/turf的地形分析工具，结合高程数据生成平滑且贴合地形的路径；或者改造leaflet-routing-machine，替换其默认的平面路径计算逻辑为地形适配算法。

3. 渲染适配地形的路线 #

得到地形适配后的坐标数组后，用Leaflet原生组件渲染，还可通过插件增强视觉效果：

// 假设adaptedCoords是经地形算法生成的路径坐标数组
const mountainRoute = L.polyline(adaptedCoords, {
  color: '#e63946',
  weight: 7,
  opacity: 0.9
}).addTo(map);

// 用leaflet-polylineoffset插件添加描边效果，模拟示例图中的路线样式
mountainRoute.offset(4, {
  color: '#ffffff',
  weight: 9,
  opacity: 0.7
});

4. 低成本替代方案 #

如果自己实现地形算法成本过高，可调用专业户外路径API（如OpenRouteService的徒步路线接口），这类API会直接返回贴合山地地形的路径坐标，只需在Leaflet中渲染即可。

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