Drei häufige Verwendungen von OpenLayers6-Karten-Overlays (Markierungstext im Popup-Fenster)

addPopup() {
    // Verwenden Sie Variablen, um das für das Popup-Fenster erforderliche DOM-Objekt zu speichern. var container = document.getElementById("popup");
    var closer = document.getElementById("popup-closer");
    var Inhalt = document.getElementById("Popup-Inhalt");

    // Ein Popup-Overlay-Objekt erstellen this.overlay = new Overlay({
        element: container, //Overlay-Objekt und DOM-Objekt binden autoPan: true, //Definieren, dass das Popup-Fenster beim Klicken auf die Kante möglicherweise nicht vollständig eingestellt wird autoPanAnimation: {
            Dauer: 250 //Die Animationszeit des automatischen Schwenkeffekts beträgt 9 Millisekunden)
        }
    });
    // Das Popup-Fenster zur Karte hinzufügen this.map.addOverlay(this.overlay);

    lass _das = dies;
    /**
     * Fügen Sie eine Funktion hinzu, die auf das Schließen des Popup-Fensters reagiert*/
    näher.onclick = Funktion() {
        _that.overlay.setPosition(undefiniert);
        näher.unschärfe();
        gibt false zurück;
    };
    /**
     * Fügen Sie eine Click-Map-Antwortfunktion hinzu, um Popup-Aktionen zu verarbeiten*/
    this.map.on("Einzelklick", Funktion(evt) {
        Konsole.log(evt.Koordinate);
        lass Koordinate = transformieren(
            evt.Koordinate,
            "EPSG:3857",
            „EPSG:4326“
        );
        // Klicken Sie auf das Lineal (hier ist es das Lineal (Meter), nicht Breiten- und Längengrad);
        let hdms = toStringHDMS(toLonLat(evt.coordinate)); // Zur Anzeige in Längen- und Breitengrad umwandeln content.innerHTML = `
        <p>Sie haben hier geklickt:</p>
        <p>Breitengrad und Längengrad: <p><code> ${hdms} </code> <p>
        <p>Koordinaten:</p>X: ${coordinate[0]} &nbsp;&nbsp; Y: ${coordinate[1]}`;
        _that.overlay.setPosition(evt.coordinate); //Das Overlay an den angegebenen x,y-Koordinaten anzeigen});
}

addMarker() {
    var marker = neues Overlay({
        Position: fromLonLat([104.043505, 30.58165]),
        Positionierung: "Mitte-Mitte",
        Element: document.getElementById("Markierung"),
        stopEvent: false
    });
    diese.map.addOverlay(Markierung);
},

Text hinzufügen() {
    var textInfo = neues Overlay({
        Position: fromLonLat([104.043505, 30.58165]),
        Offset: [20, -20],
        Element: document.getElementById("textInfo")
    });
    diese.map.addOverlay(textInfo);
},

<Vorlage>
    <div id="app">
        <div id="Karte" ref="Karte"></div>
        <div id="Markierung"></div>
        <div id="textInfo">Ich bin Textinformation</div>
        <div id="popup" Klasse="ol-popup">
            <a href="#" rel="external nofollow" id="popup-closer" class="ol-popup-closer"></a>
            <div id="Popup-Inhalt" Klasse="Popup-Inhalt"></div>
        </div>
    </div>
</Vorlage>

<Skript>
importiere "ol/ol.css";
importiere { Karte, Ansicht, Koordinate } von "ol";
importiere { toStringHDMS } von "ol/coordinate";
importiere TileLayer aus „ol/layer/Tile“;
importiere XYZ aus „ol/source/XYZ“;
Overlay aus „ol/Overlay“ importieren;
importiere { fromLonLat, transform, toLonLat } von "ol/proj";

// Implementierung des Popup-Fensters export default {
    Name: "Dashboard",
    Daten() {
        zurückkehren {
            Karte: null,
            Overlay: null
        };
    },
    Methoden: {
        initMap() {
            let target = "map"; //Binden an die ID des Seitenelements zum Rendern let tileLayer = new TileLayer({
                Quelle: neues XYZ({
                    URL:
                        "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
                })
            });
            let view = neue Ansicht({
                // Projektion: "EPSG:4326", //Verwende dieses Koordinatensystem als Mittelpunkt: fromLonLat([104.912777, 34.730746]), //Koordinaten des Kartenmittelpunkts zoom: 4.5 //Zoomstufe });
            diese.map = neue Map({
                Ziel: Ziel, //DOM-Elemente zum Rendern von Ebenen binden: [Kachelebene], //Datenquelle der Karte konfigurieren Ansicht: Ansicht //Anzeigeoptionen der Karte konfigurieren (Koordinatensystem, Mittelpunkt, Zoomstufe usw.)
            });
        },
        /**
         * Der erste Typ: Punktmarkierung
         * Erstellen Sie eine Anmerkungsinformation */
        addMarker() {
            var marker = neues Overlay({
                Position: fromLonLat([104.043505, 30.58165]),
                Positionierung: "Mitte-Mitte",
                Element: document.getElementById("Markierung"),
                stopEvent: false
            });
            diese.map.addOverlay(Markierung);
        },
        /**
         * Der zweite Typ: Textbeschriftung
         * Informationen zu Beschriftungsanmerkungen erstellen */
        Text hinzufügen() {
            var textInfo = neues Overlay({
                Position: fromLonLat([104.043505, 30.58165]),
                Offset: [20, -20],
                Element: document.getElementById("textInfo")
            });
            diese.map.addOverlay(textInfo);
        },
        /**
         * Der dritte Typ: Popup-Fenster
         * Eine Popup-Nachricht erstellen */
        addPopup() {
            // Verwenden Sie Variablen, um das für das Popup-Fenster erforderliche DOM-Objekt zu speichern. var container = document.getElementById("popup");
            var closer = document.getElementById("popup-closer");
            var Inhalt = document.getElementById("Popup-Inhalt");

            // Ein Popup-Overlay-Objekt erstellen this.overlay = new Overlay({
                element: container, //Overlay-Objekt und DOM-Objekt binden autoPan: false, //Definieren, dass das Popup-Fenster beim Klicken auf die Kante möglicherweise nicht vollständig eingestellt wird autoPanAnimation: {
                    Dauer: 250 //Die Animationszeit des automatischen Schwenkeffekts beträgt 9 Millisekunden)
                }
            });
            // Das Popup-Fenster zur Karte hinzufügen this.map.addOverlay(this.overlay);

            lass _das = dies;
            /**
             * Fügen Sie eine Funktion hinzu, die auf das Schließen des Popup-Fensters reagiert*/
            näher.onclick = function() {
                _that.overlay.setPosition(undefiniert);
                näher.unschärfe();
                gibt false zurück;
            };
            /**
             * Fügen Sie eine Klick-Antwortfunktion hinzu, um Popup-Aktionen zu verarbeiten */
            this.map.on("Einzelklick", Funktion(evt) {
                Konsole.log(evt.Koordinate);
                lass Koordinate = transformieren(
                    evt.Koordinate,
                    "EPSG:3857",
                    „EPSG:4326“
                );
                // Klicken Sie auf das Lineal (hier ist es das Lineal (Meter), nicht Breiten- und Längengrad);
                let hdms = toStringHDMS(toLonLat(evt.coordinate)); // Zur Anzeige in Längen- und Breitengrad umwandeln content.innerHTML = `
                <p>Sie haben hier geklickt:</p>
                <p>Breitengrad und Längengrad: <p><code> ${hdms} </code> <p>
                <p>Koordinaten:</p>X: ${coordinate[0]} &nbsp;&nbsp; Y: ${coordinate[1]}`;
                _that.overlay.setPosition(evt.coordinate); //Das Overlay an den angegebenen x,y-Koordinaten anzeigen});
        }
    },
    montiert() {
        dies.initMap();
        // Popup-Fenstermethode initialisieren this.addText();
        dies.addMarker();
        dies.addPopup();
    }
};
</Skript>
<style lang="scss" scoped>
html,
Körper {
    Höhe: 100%;
}
#app {
    Mindesthöhe: berechnet (100vh – 50px);
    Breite: 100 %;
    Position: relativ;
    Überlauf: keiner;
    #Karte {
        Höhe: 888px;
        Mindesthöhe: berechnet (100vh – 50px);
    }
}
.ol-popup {
    Position: absolut;
    Hintergrundfarbe: weiß;
    -webkit-filter: Schlagschatten(0 1px 4px rgba(0, 0, 0, 0,2));
    Filter: Schlagschatten (0 1px 4px rgba (0, 0, 0, 0,2));
    Polsterung: 15px;
    Rahmenradius: 10px;
    Rand: 1px durchgezogen #cccccc;
    unten: 12px;
    links: -50px;
}
.ol-popup:nach,
.ol-popup:vor {
    oben: 100 %;
    Rand: durchgehend transparent;
    Inhalt: " ";
    Höhe: 0;
    Breite: 0;
    Position: absolut;
    Zeigerereignisse: keine;
}
.ol-popup:nach {
    Farbe der oberen Umrandung: weiß;
    Rahmenbreite: 10px;
    links: 48px;
    Rand links: -10px;
}
.ol-popup:vor {
    Farbe des oberen Rahmens: #cccccc;
    Rahmenbreite: 11px;
    links: 48px;
    Rand links: -11px;
}
.ol-popup-closer {
    Textdekoration: keine;
    Position: absolut;
    oben: 2px;
    rechts: 8px;
}
.popup-inhalt {
    Breite: 400px;
}
.ol-popup-closer:nach {
    Inhalt: "✖";
}
#Markierung {
    Breite: 20px;
    Höhe: 20px;
    Hintergrund: rot;
    Randradius: 50 %;
}
#textInfo {
    Breite: 200px;
    Höhe: 40px;
    Zeilenhöhe: 40px;
    Hintergrund: Burlywood;
    Farbe: gelb;
    Textausrichtung: zentriert;
    Schriftgröße: 20px;
}
</Stil>