openlayers6中地图覆盖物overlay怎么用

这篇文章将为大家详细讲解有关openlayers6中地图覆盖物overlay怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

overlay 实现popup弹窗

vue 页面 addPopup() 方法详解

①：实例一个 new Overlay()，设置相关的属性，element 是和页面的 最外层弹窗的dom进行绑定
②：通过 map.addOverlay(this.overlay) 把 overlay弹窗添加到页面
③：closer.onclick 添加一个 x 关闭弹窗事件
④：通过 this.map.on("singleclick", function(evt) 事件点击地图触发弹窗效果

具体代码如下：

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[xss_clean] = `        
你点击了这里：
        
经纬度：
 ${hdms}   
        
坐标：
X：${coordinate[0]}    Y: ${coordinate[1]}`;        _that.overlay.setPosition(evt.coordinate); //把 overlay 显示到指定的 x,y坐标    });}

效果

autoPan 属性为false效果

点击了屏幕最右边，可以看到不会根据鼠标点击位置进行适应地图。

overlay 实现 label标注信息

vue 页面

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

overlay 实现 text文本信息

vue 页面

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

附上完整代码

关于"openlayers6中地图覆盖物overlay怎么用"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。