Three common uses of openlayers6 map overlay (popup window marker text)

addPopup() {
    // Use variables to store the DOM object required for the popup window var container = document.getElementById("popup");
    var closer = document.getElementById("popup-closer");
    var content = document.getElementById("popup-content");

    // Create a pop-up Overlay object this.overlay = new Overlay({
        element: container, //Bind Overlay object and DOM object autoPan: true, //Define that the pop-up window may not be fully set when clicking on the edge autoPanAnimation: {
            duration: 250 //The animation time of the automatic pan effect is 9 milliseconds)
        }
    });
    // Add the pop-up window to the map this.map.addOverlay(this.overlay);

    let _that = this;
    /**
     * Add a function to respond to closing the pop-up window*/
    closer.onclick = function() {
        _that.overlay.setPosition(undefined);
        closer.blur();
        return false;
    };
    /**
     * Add a click map response function to handle pop-up actions*/
    this.map.on("singleclick", function(evt) {
        console.log(evt.coordinate);
        let coordinate = transform(
            evt.coordinate,
            "EPSG:3857",
            "EPSG:4326"
        );
        // Click on the ruler (here it is ruler (meters), not latitude and longitude);
        let hdms = toStringHDMS(toLonLat(evt.coordinate)); // Convert to longitude and latitude for display content.innerHTML = `
        <p>You clicked here:</p>
        <p>Latitude and longitude: <p><code> ${hdms} </code> <p>
        <p>Coordinates:</p>X: ${coordinate[0]} &nbsp;&nbsp; Y: ${coordinate[1]}`;
        _that.overlay.setPosition(evt.coordinate); //Display the overlay at the specified x,y coordinates});
}

addMarker() {
    var marker = new Overlay({
        position: fromLonLat([104.043505, 30.58165]),
        positioning: "center-center",
        element: document.getElementById("marker"),
        stopEvent: false
    });
    this.map.addOverlay(marker);
},

addText() {
    var textInfo = new Overlay({
        position: fromLonLat([104.043505, 30.58165]),
        offset: [20, -20],
        element: document.getElementById("textInfo")
    });
    this.map.addOverlay(textInfo);
},

<template>
    <div id="app">
        <div id="map" ref="map"></div>
        <div id="marker"></div>
        <div id="textInfo">I am text information</div>
        <div id="popup" class="ol-popup">
            <a href="#" rel="external nofollow" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content" class="popup-content"></div>
        </div>
    </div>
</template>

<script>
import "ol/ol.css";
import { Map, View, Coordinate } from "ol";
import { toStringHDMS } from "ol/coordinate";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import Overlay from "ol/Overlay";
import { fromLonLat, transform, toLonLat } from "ol/proj";

// Pop-up window implementation export default {
    name: "dashboard",
    data() {
        return {
            map: null,
            overlay: null
        };
    },
    methods: {
        initMap() {
            let target = "map"; //Bind to the id of the page element for rendering let tileLayer = new TileLayer({
                source: new XYZ({
                    url:
                        "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
                })
            });
            let view = new View({
                // projection: "EPSG:4326", //Use this coordinate system center: fromLonLat([104.912777, 34.730746]), //Map center coordinates zoom: 4.5 //Zoom level });
            this.map = new Map({
                target: target, //Bind DOM elements for rendering layers: [tileLayer], //Configure map data source view: view //Configure map display options (coordinate system, center point, zoom level, etc.)
            });
        },
        /**
         * The first type: point marker
         * Create a annotation information */
        addMarker() {
            var marker = new Overlay({
                position: fromLonLat([104.043505, 30.58165]),
                positioning: "center-center",
                element: document.getElementById("marker"),
                stopEvent: false
            });
            this.map.addOverlay(marker);
        },
        /**
         * The second type: text label label
         * Create a label annotation information */
        addText() {
            var textInfo = new Overlay({
                position: fromLonLat([104.043505, 30.58165]),
                offset: [20, -20],
                element: document.getElementById("textInfo")
            });
            this.map.addOverlay(textInfo);
        },
        /**
         * The third type: pop-up window
         * Create a pop-up message */
        addPopup() {
            // Use variables to store the DOM object required for the popup window var container = document.getElementById("popup");
            var closer = document.getElementById("popup-closer");
            var content = document.getElementById("popup-content");

            // Create a pop-up Overlay object this.overlay = new Overlay({
                element: container, //Bind Overlay object and DOM object autoPan: false, //Define that the pop-up window may not be fully set when clicking on the edge autoPanAnimation: {
                    duration: 250 //The animation time of the automatic pan effect is 9 milliseconds)
                }
            });
            // Add the pop-up window to the map this.map.addOverlay(this.overlay);

            let _that = this;
            /**
             * Add a function to respond to closing the pop-up window*/
            closer.onclick = function() {
                _that.overlay.setPosition(undefined);
                closer.blur();
                return false;
            };
            /**
             * Add a click response function to handle pop-up actions */
            this.map.on("singleclick", function(evt) {
                console.log(evt.coordinate);
                let coordinate = transform(
                    evt.coordinate,
                    "EPSG:3857",
                    "EPSG:4326"
                );
                // Click on the ruler (here it is ruler (meters), not latitude and longitude);
                let hdms = toStringHDMS(toLonLat(evt.coordinate)); // Convert to longitude and latitude for display content.innerHTML = `
                <p>You clicked here:</p>
                <p>Latitude and longitude: <p><code> ${hdms} </code> <p>
                <p>Coordinates:</p>X: ${coordinate[0]} &nbsp;&nbsp; Y: ${coordinate[1]}`;
                _that.overlay.setPosition(evt.coordinate); //Display the overlay at the specified x,y coordinates});
        }
    },
    mounted() {
        this.initMap();
        // Initialize pop-up window method this.addText();
        this.addMarker();
        this.addPopup();
    }
};
</script>
<style lang="scss" scoped>
html,
body {
    height: 100%;
}
#app {
    min-height: calc(100vh - 50px);
    width: 100%;
    position: relative;
    overflow: none;
    #map {
        height: 888px;
        min-height: calc(100vh - 50px);
    }
}
.ol-popup {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
}
.ol-popup:after,
.ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}
.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}
.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}
.popup-content {
    width: 400px;
}
.ol-popup-closer:after {
    content: "✖";
}
#marker {
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 50%;
}
#textInfo {
    width: 200px;
    height: 40px;
    line-height: 40px;
    background: burlywood;
    color: yellow;
    text-align: center;
    font-size: 20px;
}
</style>