पत्रक - ड्रैग और ड्रॉप पर मार्कर और पॉलीलाइन से मिलान कैसे करें

Question

मेरे पास leafletJS के साथ एक प्रोजेक्ट है। उदाहरण के लिए, मेरे पास मानचित्र में 2 अंक (ए, बी) हैं। मैं इसे 2 मार्कर के रूप में प्रदर्शित करता हूं मुझे ए से बी से पॉलीलाइन खींचना चाहिए, मैंने मार्कर ए को स्थानांतरित किया है और मैं मार्कर ए के लिए पॉलीलाइन के सिर के शीर्ष पर जाना चाहता हूं (मार्कर ए चले गए)। मैं यह कैसे कर सकता हूं? मेरी खराब अंग्रेजी के लिए खेद है। बहुत बहुत धन्यवाद।

Truong एम

Answer 1

को देखते हुए निम्नलिखित L.Latlng की, L.Marker की और L.Polyline:

var a = new L.LatLng(-45, -90), 
    b = new L.LatLng(45, 0), 
    c = new L.LatLng(-45, 90); 

var marker_a = new L.Marker(a, {draggable: true}).addTo(map), 
    marker_b = new L.Marker(b, {draggable: true}).addTo(map), 
    marker_c = new L.Marker(c, {draggable: true}).addTo(map); 

var polyline = new L.Polyline([a, b, c]).addTo(map); 

आप अपने L.Marker के लिए eventlisteners और कॉलबैक संलग्न करने की आवश्यकता होगी। आप इस को स्वचालित सकता है, लेकिन मैं इसे अब के लिए सरल रखेंगे:

marker_a 
    .on('dragstart', dragStartHandler) 
    .on('drag', dragHandler) 
    .on('dragend', dragEndHandler); 

marker_b 
    .on('dragstart', dragStartHandler) 
    .on('drag', dragHandler) 
    .on('dragend', dragEndHandler); 

marker_c 
    .on('dragstart', dragStartHandler) 
    .on('drag', dragHandler) 
    .on('dragend', dragEndHandler); 

अब dragstart पर

आप पॉलीलाइन जो अपने मार्कर के LatLng साथ मेल खाती है और यह अपने मार्कर उदाहरण में कुंजी है की दुकान से latlng को खोजने के लिए की आवश्यकता होगी ताकि आप इसे बाद में उपयोग कर सकते हैं:

function dragHandler (e) { 

    // Get the polyline's latlngs 
    var latlngs = polyline.getLatLngs(), 

     // Get the marker's current latlng 
     latlng = this.getLatLng(); 

    // Replace the old latlng with the new 
    latlngs.splice(this.polylineLatlng, 1, latlng); 

    // Update the polyline with the new latlngs 
    polyline.setLatLngs(latlngs); 
} 

:

function dragStartHandler (e) { 

    // Get the polyline's latlngs 
    var latlngs = polyline.getLatLngs(), 

     // Get the marker's start latlng 
     latlng = this.getLatLng(); 

    // Iterate the polyline's latlngs 
    for (var i = 0; i < latlngs.length; i++) { 

     // Compare each to the marker's latlng 
     if (latlng.equals(latlngs[i])) { 

      // If equals store key in marker instance 
      this.polylineLatlng = i; 
     } 
    } 
} 

अब आप latlng जब dragevent पर मार्कर खींचकर आप इसे बदल सकते पॉलीलाइन के के प्रमुख पता बस स्वच्छ और साफ होने के लिए ड्रैगएंड पर संग्रहीत कुंजी को हटाएं:

function dragEndHandler (e) { 

    // Delete key from marker instance 
    delete this.polylineLatlng; 
} 

यही है। यहां प्लंकर पर एक कामकाजी उदाहरण दिया गया है: http://embed.plnkr.co/SJRec3/preview