单击标记并突出显示底层多段线答案

【问题标题】：Click on marker and highlight underlying polyline单击标记并突出显示底层多段线
【发布时间】：2015-04-13 03:55:39
【问题描述】：

我需要检查折线是否在标记下运行。标记和折线在该点应具有相同的 latLng。问题是我的地图上有多个标记。我似乎无法弄清楚如何选择正确的折线。

标记/折线对象：

{  
    latLng:     Array with latLng's,  
    marker:     Leaflet marker/polyline layer object,  
    selected:   boolean  
}

跨越标记的多段线包含与标记相同的纬度点，但我无法得到正确的结果。我认为这更像是一个数学问题

图片了解更多信息：

附：对不起我的英语不好

【问题讨论】：

看看 turf.js。它有简单的地理分析工具。如果使用纯 javascript，您可以循环在线图层组中的几何图形。你能做个笨蛋吗？
越过标记的折线的起点还是终点？

标签： javascript jquery html css leaflet

【解决方案1】：

你可以试试这个：

markerLatLng = marker.getLatLng()

for(var i = 0; i < latLng.length-1; i++){
    if (isBetween(latLng[i], latLng[i+1], markerLatLng)){
        // marker is between this line segment
        selected = true; //or do what you want to here 
    }
}    

def isBetween(a, b, c){
    crossproduct = (c.lng - a.lng) * (b.lat - a.lat) - (c.lat - a.lat) * (b.lng - a.lng);
    if(Math.abs(crossproduct) > epsilon) return false; //epsilon = 0 for integers, use small number operations on floating point coordinates

    dotproduct = (c.lat - a.lat) * (b.lat - a.lat) + (c.lng - a.lng)*(b.lng - a.lng);
    if(dotproduct < 0) return false;

    squaredlengthba = (b.lat - a.lat)*(b.lat - a.lat) + (b.lng - a.lng)*(b.lng - a.lng);
    if(dotproduct > squaredlengthba) return false;

    return true;
}

注意：浮点算术错误会让您感到悲痛。修改 epsilon 以增加标记被视为“在线”的线周围的缓冲区。

改编自answer by Cyrille Ka

【讨论】：