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

目录
  • 1. 写在前面
  • 2. overlay 实现popup弹窗
    • 2.1 vue 页面 addPopup() 方法详解
    • 2.2 autoPan 属性为false效果
  • 3. overlay 实现 label标注信息
  • 4 overlay 实现 text文本信息
  • 5. 附上完整代码

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地图覆盖物内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-09-12

vue-openlayers实现地图坐标弹框效果

本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码,供大家参考,具体内容如下 openlayers 这个效果是点击地图,弹出坐标信息. 点击地图边缘时,底图会跟着移动,使弹窗能完整显示出来. <template> <div class="vm"> <h2 class="h-title">弹窗 popup</h2> <div id="map" class="ma

Vue3 实现双盒子定位Overlay的示例

在 Vue 3 中,使用 <Teleport> 可以很优雅的把某个组件渲染到根节点之外的节点,同时使其渲染的内容不丧失响应式和对应的生命周期函数调用.那么基于此,用 <Teleport> 实现相对于某一元素的 Overlay . 实际上,这篇文章跟 Vue3 的关系不大,只是通过 Vue3 讲解一类 Overlay 的设计方法. 原理 要实现相对于某一元素的 Overlay 需要依靠两个元素,Origin 和 Panel,Origin 表示相对于的元素,而 Panel 表示 Ove

基于vue+openlayer实现地图聚合和撒点效果

目录 前言: 实现效果: 1.聚合效果: 2.撒点效果: 具体实现步骤: 1.项目中引入openlayer 2.配置(按需引入) 3.实现地图展示 4.撒点功能 5.聚合效果 前言: openlayer是目前我们gis常用的一款开源的,并且反馈都特别好的软件了,像之前的ol3, 风靡一时,地图实现也很简单,很实用,目前vue中使用地图也是非常多的,那么如果在vue中引入openlayer并且实现地图撒点效果,甚至是更深层的地图聚合效果呢,本文来分享下vue中地图的实现.目前openlayer的

基于vue实现一个禅道主页拖拽效果

效果图如下所示: 源码地址 bb两句 最近在做一个基于vue的后台管理项目.平时项目进度统计就在上禅道上进行.so~ 然后领导就感觉这个拖拽效果还行,能不能加到咱们项目里面. 既然领导发话,那就开干.. 所有技术:vue + vuedraggable 拖动的实现基于 vuedraggable 的插件开发. 主页为两栏流式布局,每一个组件可以在上下拖动,也可以左右拖动. 基本步骤 布局 这块布局为最为普通的两栏布局,这里采用flex布局.左边自适应,右边为固定宽. .layout-containe

vue使用高德地图点击下钻上浮效果的实现思路

这里给使用高德地图下钻提供一个思路 先讲下我的思路,高德地图api有一个地图绘制区域,你只要提供区码,就可以绘制该区域.以浙江省为例,我一开给浙江省的区码就可以绘制出浙江省的区域,接下来我要进入杭州市,当我点击杭州市的时候我先清空地图上的覆盖层并且能获取到'杭州市'这个字符串,通过对比这个字符串我就可以给出杭州市的区码,最后绘制出杭州市的覆盖层. 接下来看代码: 第一步 绘制地图: //创建地图 this.map = new AMap.Map("container", { cursor

基于Vue.js 2.0实现百度搜索框效果

使用Vue.js 2.0 模仿百度搜索框效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=2.0, maximum-scale=1.0, minimum

基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式

本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果.并且基于 Vue.js 2.0 全家桶.具体效果如下图所示: 最终效果可以翻到文章最后观看. 1. 背景视频 Web 页面的既有实现方式 国外有一个很好的网站 「Coverr」 ,提供了完善的教程和视频资源,帮助前端开发者构建酷炫的背景视频主页,网站效果示例如下图所示: 教程如下所示: 从图中以及我

基于vue实现一个神奇的动态按钮效果

今天我们将利用vue的条件指令来完成一个简易的动态变色功能按钮 首先我们还是要对vue进行配置,在上篇随笔中有相关下载教学. 然后我们要在html页面上搭建三个简易的按钮,颜色分别为紫,绿和蓝(颜色随意)其代码如下: <body> <div id="app"> <p> <button @click="btn_click('pg1')" :style="{background:'rebeccapurple'}&quo

使用vue引入maptalks地图及聚合效果的实现

1.安装maptalks.js npm install maptalks --save 2.安装聚合mapkercluster npm install maptalks.markercluster 3.vue页面引入 import * as maptalks from 'maptalks' import {ClusterLayer} from 'maptalks.markercluster' 4.初始化地图并添加聚合 mounted() { let that = this //--0--//地图

vue调用高德地图实例代码

一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. 按照官方提供的方法引入 1.修改webpac.base.conf.js文件 externals: { 'AMap': 'AMap' } 2.引入sdk 引入有两种方式,一种是页面直接引入 复制代码 代码如下: <script type="text/javascript" src=&q

vue 使用高德地图vue-amap组件过程解析

这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 首先 npm install -S vue-amap 然后在 main.js import VueAMap from 'vue-amap'; //注意不要和 AMap原始名称覆盖 Vue.use(VueAMap); // 初始化vue-amap VueAMap.initAMapApiLoader({ // 高德的key key: '

基于vue实现分页/翻页组件paginator示例

序言 项目需要自己写了一个基于vue的paginator分享出来,欢迎各路好汉来指教 当页数小于999(包括999)页 页数大于999页 首页或尾页disabled 10页之内显示 Usage 参数 pageCount: 整数,代表总页数 监听事件 @togglePage: 监听切换页面事件,可以获取到当前前往页的页数 父组件调用方法 index.vue <template lang="html"> <div> <paginator :pageCount=

Vue的百度地图插件尝试使用

百度地图插件 安装 CDN全局安装 <script src="https://unpkg.com/vue-baidu-map"></script> 插件的引入 Vue.use(VueBaiduMap.default, { ak: 'YOUR_APP_KEY', }) ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apico... 地图视图 BmView 是用于渲染百度地图实例可视化区域的容器 使用 Bmview 渲