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

1. 写在前面

常见的地图覆盖物为这三种类型,如:popup弹窗label标注信息text文本信息等。
上篇讲了overlay的一些属性方法事件等,这篇主要讲overlay三种最常用的案例。更多可以参考上篇内容openlayers6【八】地图覆盖物overlay详解,这两篇会有关联。
popup弹窗 基本是经常遇到的需求案例,所有单独给大家讲下,让地图更富有生命力!!!
你需要理解:overlay 然后通过map进行绑定,承载在页面的 dom 上的元素

2. overlay 实现popup弹窗

2.1 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.innerHTML = `
        

你点击了这里:

经纬度:

${hdms}

坐标:

X:${coordinate[0]}    Y: ${coordinate[1]}`; _that.overlay.setPosition(evt.coordinate); //把 overlay 显示到指定的 x,y坐标 }); }

效果

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

2.2 autoPan 属性为false效果

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

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

3. 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);
},

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

4 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三种常用用法(popup弹窗marker标注text文本)_第4张图片

5. 附上完整代码





到此这篇关于openlayers6之地图覆盖物overlay三种常用用法(popup弹窗marker标注text文本)的文章就介绍到这了,更多相关vue openlayer popup地图覆盖物内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的