Detaillierte Erklärung der Kartenüberlagerung in OpenLayers6

1. Overlay-Übersicht

Overlay bedeutet Überlagerung, wie der Name schon sagt, es erscheint in einer anderen Form auf der Karte. Viele Schüler verwechseln es mit Ebenen. Es wird hauptsächlich verwendet, um einige Elemente zu platzieren, die mit dem Kartenstandort in Zusammenhang stehen. Übliche Karten-Overlays gibt es in drei Typen, z. B.: popup 彈窗, label標注信息, text文本信息usw., und diese Overlays entsprechen Elementen in HTML. Das Overlay-Attributelement ist an das HTML-Element gebunden und die Koordinatenparameter werden gleichzeitig festgelegt – das HTML-Element wird auf der Karte platziert. Beim Schwenken und Zoomen bewegt sich das HTML-Element auch mit der Bewegung der Karte.

Werfen wir einen Blick auf die Beschreibung auf der offiziellen Website. Tatsächlich ist dieses Attribut standardmäßig in der Karte vorhanden. Es ist dasselbe wie die Ebenen, Steuerelemente und Interaktionen im vorherigen Artikel.默認加載地圖的情況下是允許設置默認的overlay覆蓋物. Sie können auch eine separate Abdeckung hinzufügen, wenn ein bestimmtes Ereignis oder eine bestimmte Methode ausgelöst wird. Hierzu kann auf die Beschreibung im vorherigen Artikel verwiesen werden, auf die hier nicht näher eingegangen wird.

2. Overlay-Eigenschaft

Overlay kann bei der Initialisierung viele Konfigurationsparameter akzeptieren. Diese Konfigurationsparameter sind Schlüssel-Wert-Paare, die zusammen ein Objektliteral (Optionen) bilden, das dann an seinen „Konstruktor“ übergeben wird, z. B. new ol.Overlay(options) , wobei Optionen ein Objektliteral ist, das aus Parameter-Schlüssel-Wert-Paaren besteht. Die konfigurierbaren Schlüssel-Wert-Paare sind wie folgt definiert: (Rot kennzeichnet gemeinsame Eigenschaften)

• id , legen Sie eine ID für das entsprechende Overlay fest, sodass Sie die Methode getOverlayById von ol.Map verwenden können, um das entsprechende Overlay abzurufen;
• element , das im Overlay enthaltene DOM-Element; offset , der Offset in Pixeln, der Versatz des Overlays relativ zur Platzierungsposition (Position), der Standardwert ist [0, 0], positive Werte verschieben jeweils nach rechts und nach unten; position , die Position des Overlays im Koordinatensystem der Karte;
• positioning , Overlay: Für die relative Position der Position sind folgende Werte möglich: unten links, unten Mitte, unten rechts, Mitte links, Mitte Mitte, Mitte rechts, oben links, oben Mitte, oben rechts. Der Standardwert ist oben links, was bedeutet, dass die obere linke Ecke des Elements mit der Position übereinstimmt.
• stopEvent , ob die Ereignisausbreitung der Karte gestoppt werden soll. Der Standardwert ist true, was bedeutet, dass die Ausbreitung gestoppt wird. Das ist möglicherweise nicht leicht zu verstehen. Wenn beispielsweise das Mausrad auf der Karte gedreht wird, wird das Kartenzoomereignis ausgelöst. Wenn das Rad auf der Überlagerung gedreht wird, wird das Zoomereignis nicht ausgelöst. Wenn die Maus das Zoomen auf der Überlagerung unterstützen soll, setzen Sie diese Eigenschaft einfach auf false;
• insertFirst, ob das Overlay zuerst zu seinem Container hinzugefügt werden soll. Wenn stopEvent auf true gesetzt ist, werden die Overlay- und Openlayers-Steuerelemente in einem Container platziert. Setzen Sie zu diesem Zeitpunkt insertFirst auf true, und das Overlay wird zuerst zum Container hinzugefügt. Auf diese Weise befindet sich das Overlay standardmäßig in der nächsten Ebene des Steuerelements (CSS-Z-Index). Wenn stopEvent und insertFirst beide die Standardwerte verwenden, befindet sich das Overlay daher standardmäßig in der nächsten Ebene des Steuerelements.
• autoPan , wird ausgelöst, wenn die Overlay-Methode setPosition ausgelöst wird. Wenn das Overlay die Kartengrenze überschreitet, wird die Karte automatisch verschoben, um sicherzustellen, dass das Overlay vollständig sichtbar ist.
• autoPanAnimation, legt die AutoPan-Effektanimation fest, der Parametertyp ist olx.animation.panOptions
• autoPanMargin, der Abstand zwischen dem Kartenrand und der Überlagerung beim automatischen Schwenken der Karte, in Pixeln, der Standardwert beträgt 20 Pixel;

Wird in den folgenden Fällen verwendet.

2. Overlay-Ereignis

Bei den unterstützten Ereignissen handelt es sich hauptsächlich um die von ol.Object geerbten change , die ausgelöst werden, wenn sich Overlay-bezogene Eigenschaften oder Objekte ändern:

• Änderung, ausgelöst, wenn der Referenzzähler steigt;
• change:element, wird ausgelöst, wenn sich das dem Overlay entsprechende Element ändert;
• change:map, wird ausgelöst, wenn sich die dem Overlay entsprechende Karte ändert;
• change:offset, wird ausgelöst, wenn sich der dem Overlay entsprechende Offset ändert;
• change:position, wird ausgelöst, wenn sich die entsprechende Position des Overlays ändert;
• Änderung: Positionierung, wird ausgelöst, wenn sich die entsprechende Positionierung des Overlays ändert;
• Eigenschaftsänderung, ausgelöst, wenn sich die entsprechende Eigenschaft des Overlays ändert;

Wie binden Sie also die entsprechenden Ereignisse ein? Openlayers-Bindungsereignisse folgen den allgemeinen DOM-Ereignisbindungsregeln, einschließlich der DOM-Ereignisbindung der Ebene 2. Das Folgende ist ein Beispiel für die Ausgabe einer Zeichenfolge in der Browserkonsole, wenn sich die Overlay-Position ändert.

var overlay = neues ol.Overlay({
    // Overlay erstellen ...ausgelassen});
// Ereignis overlay.on("change:position", function(){
    console.log("Position geändert!");
})

4. Overlay-Methode

Unterstützte Methoden Hier stellen wir nur die für Overlay spezifischen Methoden vor, nicht die geerbten Methoden. Es handelt sich hauptsächlich um get und set Methoden für Overlay-Eigenschaften und die zugehörigen Objekte.

• getElement, holt das DOM-Element, das das Overlay enthält;
• getId, hole die Overlay-ID;
• getMap, holt das mit dem Overlay verknüpfte Kartenobjekt;
• getOffset, holt das Offset-Attribut;
• getPosition, holt das Positionsattribut;
• getPositioning, holt das Positionierungsattribut;
• setElement; setze das Overlay-Element;
• setMap, setzt das Kartenobjekt mit Overlay;
• setOffset, Offset festlegen;
• setPosition, legt die Positionseigenschaft fest;
• setPositioning, legt die Positionierungseigenschaft fest.

5. Schreiben Sie bis zum Ende

Wir haben zu Beginn erwähnt, dass Overlays drei allgemeine Verwendungszwecke haben: popup 彈窗, label標注信息und text文本信息

Weitere Einzelheiten finden Sie in diesem Artikel openlayers6 [8] Karten-Overlay Drei häufige Verwendungen von Overlay-Popup-Fenstern, Markierungsanmerkungen und Texttext

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung der OpenLayers6-Kartenüberlagerung. Weitere relevante Inhalte zur OpenLayer-Überlagerungskartenabdeckung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!