Javascript 将圆捕捉到传单中的多段线

我在传单中有一条多段线，我想在其上捕捉一个圆的中心，我想用它在多段线之间移动，以便该圆始终位于多段线的中心

---

有没有一种方法可以将圆心捕捉到圆心，这样当我移动圆时，它总是以多段线为中心？

我做了一个小提琴，在

mousemove

事件：

其主要思想是创建一条线（移动鼠标时），将光标坐标从地图顶部划到底部，并检查它是否与应捕捉圆的多段线相交。如果它们相交，它们的交点应该是圆的新中心

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;
};

}))

---

我采用了检测两条直线相交的算法

如何移动圆？当您将圆（通过鼠标、触摸手势）固定在任何位置时，它应该以移动圆的方式在多段线上移动这适用于多段线上的两个点。假设我有n个多段线点，这也可能吗？对多段线的每一段（由每两个点定义）进行循环。当然，给你！检查我的答案，我已经更新了。请下次在原帖中详细说明。如果你能提供一些你已经尝试过的代码，那就更好了，但是如果你能附加一把小提琴，那就太棒了！：）我想让它在触摸设备上工作。我有一个圆圈，我想朝着与手势相反的方向移动。有没有办法做到这一点？

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));
     }
   }
 }