Leaflet - So passen Sie Marker und Polylinie beim Ziehen und Ablegen an

Question

Ich habe ein Projekt mit leafletJS. Zum Beispiel habe ich 2 Punkte (A, B) in Karte. Ich zeige es als 2 Marker Ich muss eine Polylinie von A nach B zeichnen. Ich bewegte Marker A und ich möchte den Kopf der Polylinie von Marker A mit Marker A (bewegt folgen Marker A). Wie kann ich das tun? Sorry für mein schlechtes Englisch. Danke allen sehr.

Truong M.

Answer 1

folgende L.Latlng 's, L.Marker' Da s und 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); 

Sie werden Ereignis-Listenern und Rückrufe zu Ihrem L.Marker ‚s anhängen müssen. Man könnte dies automatisieren, aber ich werde es jetzt einfach halten:

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

Jetzt auf drag Sie die latlng von dem Linienzug finden müssen, die die latlng mit Ihrem Marker entspricht, und speichern Sie es in Ihrem Marker Instanz Schlüssel ist so können Sie es verwenden später:

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

Jetzt wissen Sie, den Schlüssel der Linienzug des latlng Sie können es ändern, wenn die Markierung auf der Dragevent ziehen:

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

Nur um sauber und ordentlich die gespeicherten Schlüssel auf dragend entfernen:

function dragEndHandler (e) { 

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

Das ist es. Hier ist ein funktionierendes Beispiel für Plunker: http://embed.plnkr.co/SJRec3/preview