Erkennen von benutzerinitiierten Schwenk-/Zoomoperationen auf Leaflet

Question

Ich habe eine Leaflet-Map, die für die Standortfreigabe verwendet wird. Wenn ein Benutzer seinen Standort freigibt, wird der Karte ein Marker hinzugefügt, der den Standort anzeigt, den alle anderen Benutzer sehen können. Es passt die Karte automatisch an, um alle Markierungen anzuzeigen, wenn eine hinzugefügt, verschoben oder gelöscht wird. Ich habe auch ein benutzerdefiniertes Steuerelement hinzugefügt, das das automatische Anpassungsverhalten ein- und ausschalten kann. Das funktioniert alles gut, aber ich möchte die Karte auch so intelligent machen, dass das automatische Anpassungsverhalten automatisch ausgeschaltet wird, wenn der Benutzer die Karte schwenkt oder zoomt.

Dies stellt sich als ziemlich schwierig heraus, weil ich keinen guten Weg finden kann, um zu unterscheiden, ob eine Schwenk-/Zoomoperation vom Benutzer oder durch eine automatische Anpassung ausgelöst wird. Ich lauschte zunächst auf die Panstart- und Zoomstart-Events, die aber auch durch die Auto-Fit-Funktion ausgelöst werden. Ich dachte mir, dass ich eine Markierung setzen könnte, um zu sagen, dass die automatische Anpassung nicht ausgeschaltet werden soll, wenn der Zoom/Schwenk durch automatische Anpassung verursacht wird. Ich überprüfe zuerst dieses Flag, bevor ich die automatische Anpassung als Reaktion auf Panstart und Zoomstart deaktiviere, und lösche es dann, wenn Panend und Zoommodus empfangen werden.

Dies scheint gut zu funktionieren, bis eine automatische Anpassung auftritt, die nicht zu einem Schwenken oder Zoomen führt. Nehmen wir an, wir haben einen großen, automatisch angepassten Cluster von Markern, und einer der in der Mitte ist entfernt. Da die gebundene Box unverändert ist, wird kein Schwenken oder Zoomen ausgelöst und daher wird das Flag, das besagt, dass die automatische Anpassung nicht abgeschaltet wird, niemals gelöscht. Wenn der Benutzer das nächste Mal die Karte schwenkt oder zoomt, wird die automatische Anpassung nicht wie gewünscht deaktiviert, da es sich immer noch in der Mitte einer Auto-Fit-Operation befindet.

Wie kann ich die automatische Anpassung automatisch ausschalten, wenn der Benutzer die Karte direkt schwenkt oder zoomt, sie aber beim Panning oder Zoomen auf andere Weise aktiviert bleibt? Hier

ist der entsprechende Code:

var markers = [];  // Map markers are stored in this array. 
var autoFit = true;  // Whether auto-fit is turned on 
var lockAutoFit = false; // Temporarily lock auto-fit if true 
var map;     // Leaflet map object 

function initMap() { 
    // Leaflet map initialized here 
    map.on('movestart zoomstart', function() { 
     if (!lockAutoFit) { 
      autoFit = false; 
     } 
    }); 
    map.on('moveend zoomend', function() { 
     lockAutoFit = false; 
    }); 
} 

function toggleAutoFit() { 
    autoFit = !autoFit; 

    if (autoFit) { 
     lockAutoFit = true; 
     fitMap(); 
    } 
} 

function addOrUpdateMarker(marker, coords) { 
    lockAutoFit = true; 
    // do the marker update here 
    fitMap(); 
} 

function removeMarker(marker) { 
    lockAutoFit = true; 
    // remove the marker here 
    fitMap(); 
} 

// Pans and zooms the map so that all markers fit in the map view. 
// Invoked whenever a marker is added, moved or deleted, or when 
// the user turns on auto-fit. 
function fitMap() { 
    if (!autoFit || !markers.length) { 
    return; 
    } 

    map.fitBounds(new L.featureGroup(markers).getBounds()); 
} 

Answer 1

Sie können per Drag, drag, dragend - zumindest für die Karte Panning. Für das Karten-Zoomen gibt es nicht so ein Äquivalent, denke ich.

Answer 2

Die Leaflet reference besagt, dass es zoomstart, zoomend und zoomlevelschange Ereignisse hat.

Answer 3

ich eine Flagge um meine fitBounds Einstellung beendet und setView Anrufe zB:

isProgramaticZoom = true 
map.fitBounds(new L.featureGroup(markers).getBounds()); 
isProgramaticZoom = false 

der Code dann Auto-fit zu deaktivieren:

map.on('zoomstart', function() { 
    if (!isProgramaticZoom) { 
    //turn off auto-fit 
    } 
}) 

map.on('dragstart', function() { 
    //turn off auto-fit 
}) 

Leider immer noch nicht ideal, aber tun sollten der Trick

Answer 4

Dies ist eine alte Frage, aber wie ich es vor kurzem fand, denke ich, es ist immer noch genug relevant, dass eine Lösung es wert ist, geben .

Ich folgte dieser Lösung: Leaflet User Triggered Events

, die zu benutzen ist:

map.on('dragstart', function (e) { 
    if (e.hard) { 
     // moved by bounds 
    } else { 
     // moved by drag/keyboard 
    } 
}); 

Die undokumentierten e.hard Teil der Lösung hier ist; Die Kommentare sprechen für sich.

Alternativly, möchten Sie vielleicht moveend verwenden, anstatt dragstart