將圓圈對齊到小冊子中的多段線

Question

我在小冊子中有一個多段線，在該小冊子中我想要將一個圓與我想要在多段線中移動的圓中心對齊，以便圓始終位於多段線的中心。

有沒有辦法如何捕捉圓心爲中心，所以當我移動它總是在折線中心圓？

Answer 1

我做了一個小提琴，其中圓運動只是mousemove事件：http://jsfiddle.net/v0bseuqz/32/

主要的想法是創建一個筆畫光標從地圖上的座標線（當鼠標移動）到底部，並檢查它是否與圓圈應該摺疊到的多段線相交。它們相交，它們的交點應該是圓的新中心。

document.onload = loadMap(); 

function loadMap() { 
    var map = L.map('map').setView([0, 0], 12); 
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', { 
    maxZoom: 18, 
    id: 'mapbox.streets', 
    accessToken: 'pk.eyJ1IjoiZW======V6ZTdlb2V5cyJ9.3HqHQ4BMRvSPaYe8ToA7YQ' 
    }).addTo(map); 

    L.polyline([ 
      [-50, 1000], 
     [0, 0] 
     ], { 
     color: 'red', 
     weight: 1 
    }).addTo(map); 

    var circle = L.circle([0, 0], 500, { 
    color: 'red', 
    fillColor: '#f03', 
    fillOpacity: 0.5 
    }).addTo(map); 

    $("#map").mousemove(function(event) { 
    var cursorPoint = new L.Point(event.clientX, event.clientY); 
    var cursorLatLng = map.containerPointToLatLng(cursorPoint); 
    var intersection = (checkLineIntersection(0, 0, 1000, -50, cursorLatLng.lng, 1, cursorLatLng.lng, -1)); 
    if (intersection.onLine1 && intersection.onLine2) { 
     circle.setLatLng(new L.LatLng(intersection.y, intersection.x)); 
    } 
}); 

} 


function checkLineIntersection(line1StartX, line1StartY, line1EndX, line1EndY, line2StartX, line2StartY, line2EndX, line2EndY) { 
    // if the lines intersect, the result contains the x and y of the intersection (treating the lines as infinite) and booleans for whether line segment 1 or line segment 2 contain the point 
    var denominator, a, b, numerator1, numerator2, result = { 
     x: null, 
     y: null, 
     onLine1: false, 
     onLine2: false 
    }; 
    denominator = ((line2EndY - line2StartY) * (line1EndX - line1StartX)) - ((line2EndX - line2StartX) * (line1EndY - line1StartY)); 
    if (denominator == 0) { 
     return result; 
    } 
    a = line1StartY - line2StartY; 
    b = line1StartX - line2StartX; 
    numerator1 = ((line2EndX - line2StartX) * a) - ((line2EndY - line2StartY) * b); 
    numerator2 = ((line1EndX - line1StartX) * a) - ((line1EndY - line1StartY) * b); 
    a = numerator1/denominator; 
    b = numerator2/denominator; 

    // if we cast these lines infinitely in both directions, they intersect here: 
    result.x = line1StartX + (a * (line1EndX - line1StartX)); 
    result.y = line1StartY + (a * (line1EndY - line1StartY)); 
/* 
     // it is worth noting that this should be the same as: 
     x = line2StartX + (b * (line2EndX - line2StartX)); 
     y = line2StartX + (b * (line2EndY - line2StartY)); 
     */ 
    // if line1 is a segment and line2 is infinite, they intersect if: 
    if (a > 0 && a < 1) { 
     result.onLine1 = true; 
    } 
    // if line2 is a segment and line1 is infinite, they intersect if: 
    if (b > 0 && b < 1) { 
     result.onLine2 = true; 
    } 
    // if line1 and line2 are segments, they intersect if both of the above are true 
    return result; 
}; 

UPDATE

如果你有一個由兩個以上的點定義的折線，你應該檢查相交它與垂直線每一個環節。但請循環做。這裏是小提琴：

var coords = [ 
    [0.003, 0.080], 
    [-0.008, 0.041], 
    [0, 0] 
]; 
L.polyline(coords, { 
    color: 'red', 
    weight: 1 
}).addTo(map); 

var circle = L.circle([0, 0], 500, { 
    color: 'red', 
    fillColor: '#f03', 
    fillOpacity: 0.5 
}).addTo(map); 
var startY, startX, endY, endX, cursorPoint, cursorLatLng, intersection; 
$("#map").mousemove(function(event) { 
    for(i = coords.length, i >0; i--;) { 
    if (i - 1 >= 0) { 
    startY = coords[i][0]; 
    startX = coords[i][1]; 
    endY = coords[i - 1][0]; 
    endX = coords[i - 1][1]; 

    cursorPoint = new L.Point(event.clientX, event.clientY); 
    cursorLatLng = map.containerPointToLatLng(cursorPoint); 
    intersection = (checkLineIntersection(startX, startY, endX, endY, cursorLatLng.lng, 1, cursorLatLng.lng, -1)); 
    if (intersection.onLine1 && intersection.onLine2) { 
     circle.setLatLng(new L.LatLng(intersection.y, intersection.x)); 
    } 
    } 
} 

}）;

我已經採取的檢測的兩行here.