Wie wir alle wissen, ist die übliche Methode zum Laden von Symbolebenen in Mapbox die Verwendung von Symbolen. Konfigurieren Sie das Symbolbild, um die Symbolebene auf der Karte anzuzeigen. Bei dieser Methode gibt es jedoch ein Problem: Da die Leinwand beim Abrufen geladen wird, tritt das Problem des Bildverlusts auf. Das heißt, das Punktelement wurde zur Karte hinzugefügt, aber das dem Punktelement entsprechende Bild wurde nicht zurück angefordert. Die diesbezügliche Verarbeitung von Mapbox besteht darin, die Anforderung zu stoppen, wenn die Anforderung nicht zurückgegeben wird, und dann einen Monitor auszulösen Sie, genannt: styleimagemissing, allerdings fand ich, dass das Schreiben von Code in diesem Listener besonders anstrengend ist. Selbst wenn Sie das fehlgeschlagene Bild in diesem Listener erneut anfordern, wird das Kartenrendering nicht erneut ausgelöst und map.repaint() muss aufgerufen werden. Wäre das nicht eine Endlosschleife? Das ist ziemlich erbärmlich. Deshalb habe ich eine andere Möglichkeit gefunden, Symbolebenen zu laden – mithilfe von Markierungen.
Wie wir im vorherigen Artikel erwähnt haben, kann Marker der Karte Dom-Elemente hinzufügen . Mit dieser Funktion können wir das img-Element von HTML auf der Karte als Markierung darstellen.
Einige Schüler machen sich möglicherweise Sorgen über die interaktiven Probleme der Markierungsmethode und befürchten, dass sie nicht klicken können? Können keine Daten übergeben werden? Sie können nicht filtern? Moment, eigentlich macht sich nicht jeder über dieses Problem Sorgen. Im Folgenden werde ich auf jedes dieser Probleme eingehen.
Zur Interaktion kann der Marker zunächst auch das Popup-Fenster festlegen. Und für die Interaktion ist das Popup dasselbe, und Sie verwenden das Symbol zum Rendern der Ebene und verwenden dieselbe Aufrufmethode, wenn Sie das Popup verwenden.
Zur Datenübertragung. Obwohl Mapbox uns nicht die Überwachung liefert, die ausgelöst wird, wenn auf die Markierung geklickt wird. Beim Klicken auf die Karte map.on('click',()=>{}) wird die aktuelle Markierung nicht abgerufen. Vergessen Sie jedoch nicht, dass wir das Click-Ereignis des img-Elements verwenden können, um Daten verfügbar zu machen. HTML-Elemente können an Klickereignisse gebunden werden! Wir klicken auf die Markierung