openlayers6之地图覆盖物overlay三种常用用法(popup弹窗marker标注text文本)

addPopup() {    // 使用变量存储弹窗所需的 DOM 对象    var container = document.getElementById("popup");    var closer = document.getElementById("popup-closer");    var content = document.getElementById("popup-content");    // 创建一个弹窗 Overlay 对象    this.overlay = new Overlay({        element: container, //绑定 Overlay 对象和 DOM 对象的        autoPan: true, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果        autoPanAnimation: {            duration: 250 //自动平移效果的动画时间 9毫秒）        }    });    // 将弹窗添加到 map 地图中    this.map.addOverlay(this.overlay);    let _that = this;    /**     * 为弹窗添加一个响应关闭的函数     */    closer.onclick = function() {        _that.overlay.setPosition(undefined);        closer.blur();        return false;    };    /**     * 添加单击map 响应函数来处理弹窗动作     */    this.map.on("singleclick", function(evt) {        console.log(evt.coordinate);        let coordinate = transform(            evt.coordinate,            "EPSG:3857",            "EPSG:4326"        );        // 点击尺 （这里是尺(米)，并不是经纬度）;        let hdms = toStringHDMS(toLonLat(evt.coordinate)); // 转换为经纬度显示        content.innerHTML = `        <p>你点击了这里：</p>        <p>经纬度：<p><code> ${hdms}  </code> <p>        <p>坐标：</p>X：${coordinate[0]} &nbsp;&nbsp; Y: ${coordinate[1]}`;        _that.overlay.setPosition(evt.coordinate); //把 overlay 显示到指定的 x,y坐标    });}

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">我是text文本信息</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";// 弹出窗口实现export default {    name: "dashboard",    data() {        return {            map: null,            overlay: null        };    },    methods: {        initMap() {            let target = "map"; //跟页面元素的 id 绑定来进行渲染            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", //使用这个坐标系                center: fromLonLat([104.912777, 34.730746]), //地图中心坐标                zoom: 4.5 //缩放级别            });            this.map = new Map({                target: target, //绑定dom元素进行渲染                layers: [tileLayer], //配置地图数据源                view: view //配置地图显示的options配置（坐标系，中心点，缩放级别等）            });        },        /**         * 第一种：点标记 marker         * 创建一个标注信息         */        addMarker() {            var marker = new Overlay({                position: fromLonLat([104.043505, 30.58165]),                positioning: "center-center",                element: document.getElementById("marker"),                stopEvent: false            });            this.map.addOverlay(marker);        },        /**         * 第二种：文字标签 label         * 创建一个label标注信息         */        addText() {            var textInfo = new Overlay({                position: fromLonLat([104.043505, 30.58165]),                offset: [20, -20],                element: document.getElementById("textInfo")            });            this.map.addOverlay(textInfo);        },        /**         * 第三种：弹窗式窗口 popup         * 创建一个弹窗popup信息         */        addPopup() {            // 使用变量存储弹窗所需的 DOM 对象            var container = document.getElementById("popup");            var closer = document.getElementById("popup-closer");            var content = document.getElementById("popup-content");            // 创建一个弹窗 Overlay 对象            this.overlay = new Overlay({                element: container, //绑定 Overlay 对象和 DOM 对象的                autoPan: false, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果                autoPanAnimation: {                    duration: 250 //自动平移效果的动画时间 9毫秒）                }            });            // 将弹窗添加到 map 地图中            this.map.addOverlay(this.overlay);            let _that = this;            /**             * 为弹窗添加一个响应关闭的函数             */            closer.onclick = function() {                _that.overlay.setPosition(undefined);                closer.blur();                return false;            };            /**             * 添加单击响应函数来处理弹窗动作             */            this.map.on("singleclick", function(evt) {                console.log(evt.coordinate);                let coordinate = transform(                    evt.coordinate,                    "EPSG:3857",                    "EPSG:4326"                );                // 点击尺 （这里是尺(米)，并不是经纬度）;                let hdms = toStringHDMS(toLonLat(evt.coordinate)); // 转换为经纬度显示                content.innerHTML = `                <p>你点击了这里：</p>                <p>经纬度：<p><code> ${hdms}  </code> <p>                <p>坐标：</p>X：${coordinate[0]} &nbsp;&nbsp; Y: ${coordinate[1]}`;                _that.overlay.setPosition(evt.coordinate); //把 overlay 显示到指定的 x,y坐标            });        }    },    mounted() {        this.initMap();        // 初始化弹窗方法        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>