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

更新时间：2021年09月15日 11:41:38 作者：@必意玲

这篇文章主要介绍了openlayers6之地图覆盖物overlay三种常用用法(popup弹窗marker标注text文本),主要讲overlay三种最常用的案例,感兴趣的朋友一起看看吧

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 = `
        <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坐标
    });
}

效果

在这里插入图片描述

2.2 autoPan 属性为false效果

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

5. 附上完整代码

<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>

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

您可能感兴趣的文章:

Vue项目中如何封装axios（统一管理http请求）
这篇文章主要给大家介绍了关于Vue项目中如何封装axios（统一管理http请求）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
Vue实现星级评价效果实例详解
这篇文章主要介绍了Vue实现星级评价效果的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-12-12
vue自定义翻页组件的方法
这篇文章主要为大家详细介绍了vue自定义翻页组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09
vue-element的select下拉框赋值实例
这篇文章主要介绍了vue-element的select下拉框赋值实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
这篇文章主要介绍了vue js获取手机系统型号、版本、浏览器类型的示例代码，代码简单易懂，非常不错具有一定的参考借鉴价值,需要的朋友可以参考下
2020-05-05
php+vue3实现点选验证码功能
这篇文章主要介绍了php+vue3实现点选验证码,本文通过实例代码给大家介绍的详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-11-11
基于vue封装一个带眼睛的密码子组件
这篇文章给大家介绍了基于vue封装一个带眼睛的密码子组件的方法,文章中有详细的代码讲解,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2023-09-09
关于vue-i18n在单文件js中的使用
这篇文章主要介绍了关于vue-i18n在单文件js中的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue中路由传参6种方式总结
这篇文章主要为大家详细介绍了vue中路由传参6种方式，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以跟随小编一起了解一下
2023-08-08
vue使用echart自定义标签以及颜色
这篇文章主要为大家详细介绍了vue使用echart自定义标签以及颜色，应用于echart 5.0以上版本，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09