Leaflet中沿polyline指定距离处添加单个标记的实现方法

需求背景 #

• 基于Leaflet开发地图应用，需在polyline折线的指定距离位置添加单个标记
• 已实现沿折线批量放置等距标记的效果，但无需批量渲染，仅需展示单个指定位置的标记

原有参考代码 #

//  coords (from gpx)
    var coords = 
        [
            [58.64385, -3.02631],[58.64385, -3.02631],[58.64359, -3.0291],[58.64375, -3.03169],[58.64368, -3.0321],[58.64355, -3.03239],[58.64327, -3.03267]
        ]

// polyline
    var polyline = L.polyline(coords, {
        distanceMarkers: { offset: 1600, iconSize: [20, 20] }
    });


// zoom the map to the route
    map.fitBounds(polyline.getBounds());
    map.addLayer(polyline);

实现方法 #

原有批量打点的逻辑是按固定间隔循环生成标记，仅需单个标记时不需要引入批量插件的配置，直接通过Leaflet内置的距离计算方法插值取点即可。

1. 首先移除polyline初始化时的distanceMarkers批量配置，保留基础折线渲染逻辑：

// GPX解析得到的坐标序列
var coords = [
    [58.64385, -3.02631],[58.64385, -3.02631],[58.64359, -3.0291],[58.64375, -3.03169],[58.64368, -3.0321],[58.64355, -3.03239],[58.64327, -3.03267]
]
// 初始化基础折线
var polyline = L.polyline(coords);
map.fitBounds(polyline.getBounds());
map.addLayer(polyline);

2. 定义需要放置标记的目标距离（单位：米），逐段遍历折线坐标，累加段长定位目标点所在的线段，通过线性插值计算目标点经纬度后添加标记：

// 自定义目标距离，单位：米，可根据业务需求修改
var targetDistance = 800;
var accumulatedLength = 0;
var targetLatLng = null;

for (var i = 1; i < coords.length; i++) {
    var prev = L.latLng(coords[i-1]);
    var curr = L.latLng(coords[i]);
    // 计算当前相邻两点间的线段长度
    var segmentLen = prev.distanceTo(curr);

    if (accumulatedLength + segmentLen >= targetDistance) {
        // 计算目标点在当前线段上的插值比例
        var ratio = (targetDistance - accumulatedLength) / segmentLen;
        // 插值得到目标点经纬度
        targetLatLng = L.latLng(
            prev.lat + (curr.lat - prev.lat) * ratio,
            prev.lng + (curr.lng - prev.lng) * ratio
        );
        break;
    }
    accumulatedLength += segmentLen;
}

// 成功计算出目标点后添加标记到地图
if (targetLatLng) {
    L.marker(targetLatLng).addTo(map);
}

注意事项 #

• 如果设置的目标距离超过折线总长度，上述代码不会生成标记，如有需要可自行添加边界逻辑，将标记默认放置在折线终点
• 传入的坐标序列顺序需和折线实际走向一致，否则距离计算结果会出错
• 普通民用场景下上述线性插值的精度足够，若需要厘米级高精度结果，可将经纬度转换为墨卡托投影坐标完成插值后再转回WGS84经纬度

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