Verwenden Sie OpenLayers3, um Karten-Rechtsklick-Menü_Javascript-Fähigkeiten hinzuzufügen

Um ein Rechtsklick-Menü hinzuzufügen, müssen wir zunächst den Rechtsklick-Ereignisnamen der Maus überwachen. Wenn sich die Maus auf dem HTML-Element befindet Wenn Sie mit der rechten Maustaste klicken, wird das Kontextmenüereignis ausgelöst. Implementieren Sie einfach die entsprechende Anzeigemenüfunktion in der Rückruffunktion des Kontextmenüereignisses.

Wo fangen wir also in Openlayern an, indem wir dieses Ereignis zur Karte hinzufügen? Zuerst müssen wir den Prozess der Initialisierung der Openlayers-Seite verstehen.

Openlayers-Initialisierungsseitenprozess

Openlayers ist auch eine Front-End-Bibliothek und daher definitiv untrennbar mit der Verwendung von HTML verbunden. Beispielsweise müssen wir zunächst ein HTML-Element, das eine Karte anzeigt, auf der Seite platzieren, ein div-Element (vorausgesetzt, sein ID-Attribut ist auf „map“ setzen, was als „map div“ bezeichnet wird) und dann dieses Element angeben, wenn die Karte initialisiert wird. Openlayers erstellt in diesem Element zunächst ein div-Element mit der Klasse ol-viewport, dessen Größe gleich bleibt das Map-Div und dann ein Div-Element im OL-Viewport-Canvas-Element erstellen, zweitens wird ein Div-Element mit der Klasse OL-Overlaycontainer hinzugefügt, um das Overlay zu platzieren; Das div-Element mit der Klasse ol-overlaycontainer-stopevent wird hauptsächlich hinzugefügt. Es handelt sich um ein Steuerelement zum Platzieren von OpenLayers. Es wurde am Anfang des vorherigen Artikels über das Hinzufügen benutzerdefinierter Erweiterungssteuerelemente erwähnt und wird hier nicht vorgestellt ausführlich.

Die endgültige HTML-Dom-Struktur ist wie folgt:

Abbildung 1 Die gebildete DOM-Struktur

Wir werden darüber nachdenken, diesem Karten-Div-Element ein Ereignis hinzuzufügen und dann mit der rechten Maustaste darauf zu klicken, um das Menü aufzurufen. Diese Idee ist natürlich und kann tatsächlich umgesetzt werden. Wir müssen jedoch über die folgenden Dinge nachdenken und dies zumindest getan haben Bevor wir beginnen, zeigen wir, dass bestimmte Vorgänge häufig anhand der Position der entsprechenden Karte ausgeführt werden. Anschließend enthält das Ereignisobjekt unseres Kontextmenüs die Bildschirmkoordinaten, an denen der Klick erfolgt ist Um die Koordinaten im entsprechenden Koordinatensystem in der Karte zu erhalten, wird der Schwierigkeitsgrad anhand der Bildschirmkoordinaten verglichen.

Was ist die Schwierigkeit? Es gibt hauptsächlich drei Punkte:

Zuallererst sind die im Ereignisobjekt enthaltenen Koordinaten relativ zum gesamten Browser-Ansichtsfenster, zur Seite oder zum gesamten Bildschirm; Zweitens haben die Elemente, die die Karte anzeigen, oft zufällige Größen und Positionen
Schließlich sind das Koordinatensystem des Bildschirms und das Koordinatensystem der Karte oft völlig unterschiedlich. Wie konvertiert man die Koordinaten relativ zu den Kartenelementen in Koordinaten im Kartenkoordinatensystem?

Mal sehen, wie man es umsetzt.

Fügen wir die Rechtsklick-Menüfunktion Schritt für Schritt hinzu. Wir unterteilen sie in drei Schritte:

Kontextmenü-Ereignis zum HTML-Element hinzufügen

aufrufen

$(map.getViewport()).on("contextmenu", function(event){
  e.preventDefault();
  // 书写事件触发后的函数
});

Erhalten Sie die entsprechenden Klickkoordinaten auf der Karte

var coordinate = map.getEventCoordinate(event);

<div id="contextmenu_container" class="contextmenu">
  <ul>
    <li><a href="#">设置中心</a></li>
    <li><a href="#">添加地标</a></li>
    <li><a href="#">距离丈量</a></li>
  </ul>
</div>

var menu_overlay = new ol.Overlay({
  element: document.getElementById("contextmenu_container"),
  positioning: 'center-center'
});
menu_overlay.setMap(map);

menu_overlay.setPosition(coordinate);

menu_overlay.setPosition(undefined);