Leaflet地图：坐标数组出现[0,0]值时如何中断已绘制的路线线条

需求说明 #

我正在基于坐标数组绘制路线。如果数组中存在坐标为[0,0]的元素，我希望在对应位置中断路线线条，等坐标恢复非零值后再继续绘制路线。
数组结构示例：

最终预期的路线效果如下：

现有代码 #

function lineDistance(x1, y1, x2, y2) {
    var xs = 0,
        ys = 0;
    xs = x2 - x1;
    xs = xs * xs;
    ys = y2 - y1;
    ys = ys * ys;
    return Math.sqrt(xs + ys);
}


function nearest_point(lat, lng) {
    var dist = Number.POSITIVE_INFINITY;
    var it;
    for (var i = 0, e = point_locs.length; i < e; ++i) {
        var ld = lineDistance(lng.toString(), lat.toString(), point_locs[i].x, point_locs[i].y);
        if (ld < dist) {
            dist = ld
            it = point_locs[i];
        }
    }
    return it;
}


var marker = L.marker(new L.LatLng(point_locs[0][1], point_locs[0][0]), {
    icon: L.icon({
        iconUrl: 'https://tracking.dailyroads.com/dailyroads_assets/dailyroads_images/pin.png',
        iconSize: [29, 39],
    }),
    draggable: false
}).addTo(map);

marker.on('dragend', function(event) {
    var marker = event.target;
    var result = marker.getLatLng();
    video.get(0).currentTime = nearest_point(result.lat, result.lng).sec;
});


function set_marker(point) {
    const lat = parseFloat(point[1]);
    const long = parseFloat(point[0]);
    marker.setLatLng(L.latLng(lat, long));
    set_marker.now = point;
}
set_marker.now = point_locs[0];

// handle for marker location based on video time
function point_at_time(timeindex_sec) {
    var it = point_locs[0];
    var min_dt = Number.POSITIVE_INFINITY;
    const index = Math.round(timeindex_sec);
    return point_locs[index];
    var e = point_locs.length
    for (var i = 0; i < e; ++i) {
        var dt = Math.abs(i - timeindex_sec);
        if (dt < min_dt) {
            it = point_locs[i];
            min_dt = dt;
        }
    }
    return it;
}

实现路线中断的方案 #

Leaflet的折线默认会将所有传入的坐标点连为连续线条，要实现遇到[0,0]断开的效果，只需要将原坐标数组按[0,0]分割为多个独立的子坐标组，分别创建折线图层即可：

function drawSplitRoutes(point_locs, map) {
    let currentSegment = []
    point_locs.forEach(point => {
        // 检测到中断标记[0,0]
        if(point[0] === 0 && point[1] === 0) {
            // 子路线长度大于1时才渲染
            if(currentSegment.length > 1) {
                L.polyline(currentSegment.map(p => [p[1], p[0]]), {
                    color: '#2196F3',
                    weight: 3
                }).addTo(map)
            }
            currentSegment = []
        } else {
            currentSegment.push(point)
        }
    })
    // 渲染最后一段剩余路线
    if(currentSegment.length > 1) {
        L.polyline(currentSegment.map(p => [p[1], p[0]]), {
            color: '#2196F3',
            weight: 3
        }).addTo(map)
    }
}

// 调用方法即可生成中断路线
drawSplitRoutes(point_locs, map)

补充说明 #

• 现有point_at_time函数中return point_locs[index]之后的代码为无效代码，不会执行，可直接删除
• 分割后的每段路线都是独立图层，自动不会互相连接，完全符合预期的中断效果

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