OpenLayers基础教程——实现popup弹出框

已于 2024-04-11 20:35:43 修改
阅读量7.3k 收藏 47
点赞数 10
分类专栏： JavaScript 文章标签： openlayers
于 2021-08-20 14:39:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HerryDong/article/details/119822495
版权

1、前言

在OpenLayers中，一般使用ol.Overlay实现popup弹出框，弹出框一般用于显示地图上兴趣点的一些属性信息，如下图所示。下面开始介绍实现方法。

在这里插入图片描述

2、实现popup弹出框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>popup弹出框</title>
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .ol-popup {
            position: absolute;
            background-color: #012456;
            padding: 15px;
            border: 1px solid #012456;
            bottom: 12px;
            left: -50px;
            min-width: 200px;
        }

        .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;
            color: white;
        }

        .ol-popup-closer:after {
            content: "✖";
        }

        #popup-content {
            color: white;
            padding-top: 10px;
        }

        #popup-content div {
            margin-bottom: 6px;
        }

        hr {
            color: white;
        }

        span {
            font-size: 13px;
        }

        button {
            border-radius: 5px;
            color: white;
            width: 63px;
            height: 30px;
        }

        .circle {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
            position: absolute;
            left: 150px;
            top: 100px;
        }

        .circle>img {
            width: 100%;
            height: 100%;
        }
    </style>
    <link rel="stylesheet" href="libs/ol/ol.css" />
    <script src="libs/ol/ol.js"></script>
</head>
<body>
    <div id="map"></div>
    <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-content">
            <span style="margin-left: 60px;font-size: 20px;">警员信息</span>
            <hr />
            <div>
                <span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span>
                <span id="name" style="margin-left: 10px;"></span>
            </div>
            <div>
                <span>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</span>
                <span id="type" style="margin-left: 10px;"></span>
            </div>
            <div>
                <span>警&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</span>
                <span id="num" style="margin-left: 10px;"></span>
            </div>
            <div>
                <span>当前经度：</span>
                <span id="lon" style="margin-left: 10px;"></span>
            </div>
            <div>
                <span>当前纬度：</span>
                <span id="lat" style="margin-left: 10px;"></span>
            </div>
            <div>
                <span>手机号码：</span>
                <span id="tel" style="margin-left: 10px;"></span>
            </div>
            <div>
                <span>是否在线：</span>
                <span id="online" style="margin-left: 10px;"></span>
            </div>
            <hr />
            <div>
                <button style="background-color: #0d6DFD;border-color: #0d6DFD;">定位</button>
                <button style="background-color: #E6BF4D;border-color: #E6BF4D;">呼叫</button>
                <button style="background-color: #DC3546;border-color: #DC3546;">告警</button>
            </div>
        </div>
        <div class="circle">
            <img src="img/a.png" />
        </div>
    </div>

    <script>
        // 创建图层
        var layer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.0, 30.0]),
                        name: '霸王花',
                        type: '民警',
                        num: 'A0001',
                        lon: 120,
                        lat: 30,
                        tel: '123456789',
                        online: '是'
                    })
                ]
            }),
            style: new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 20,
                    fill: new ol.style.Fill({
                        color: 'red'
                    })
                })
            })
        });

        // 创建地图
        var map = new ol.Map({
            target: 'map',
            layers: [
                layer
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            })
        });

        // 获取popup的dom对象
        var container = document.getElementById('popup');
        var content = document.getElementById('popup-content');
        var closer = document.getElementById('popup-closer');

        // 创建popup
        var popup = new ol.Overlay({
            element: container,
            autoPan: true,
            positioning: 'bottom-center',
            stopEvent: true,
            autoPanAnimation: {
                duration: 250
            }
        });
        map.addOverlay(popup);

        // 关闭popup
        closer.onclick = function () {
            popup.setPosition(undefined);
            closer.blur();
            return false;
        };

        // 监听鼠标单击事件，点击feature后弹出popup
        map.on('click', function (e) {
            var coordinate = e.coordinate;
            var feature = map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
                return feature;
            });
            if (feature) {
                document.getElementById('name').innerText = feature.get('name');
                document.getElementById('type').innerText = feature.get('type');
                document.getElementById('num').innerText = feature.get('num');
                document.getElementById('lon').innerText = feature.get('lon');
                document.getElementById('lat').innerText = feature.get('lat');
                document.getElementById('tel').innerText = feature.get('tel');
                document.getElementById('online').innerText = feature.get('online');
                popup.setPosition(coordinate);
            }
        });

        // 监听鼠标移动事件，鼠标移动到feature区域时变为手形
        map.on('pointermove', function (e) {
            var pixel = map.getEventPixel(e.originalEvent);
            var hit = map.hasFeatureAtPixel(pixel);
            map.getTargetElement().style.cursor = hit ? 'pointer' : '';
        });
    </script>
</body>
</html>

3、结语

需要注意的是：记得把Overlay的stopEvent属性设置为true，否则用鼠标点击popup面板时，地图会放大、面板的位置也会发生改变。

HerryDong
关注
  • 10
    点赞
  • 踩
  • 47
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
OpenLayers6扩展插件进阶之ol-ext使用：使用Notification控件来显示提示框，以鼠标点击位置经纬度弹出提示框为例
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-14 50
本章介绍OpenLayers扩展插件ol-ext的Notification控件来显示提示框，以鼠标点击位置经纬度弹出提示框为例。
OpenLayers封装popup
Moke的博客
08-03 295
OpenLayers封装popup 首先创建一个Vue文件，正常的文件即可，展示的东西以Vue语法展示 html <template> <div id="popup" class="ol-popup"> <div class="pophead" style="width: 100%; height: 20px"> <div id="popup-title" style=" font: b
（转）OpenLayers3基础教程——OL3之Popup
06-09 250
http://blog.csdn.net/gisshixisheng/article/details/46794813 概述： 本节重点讲述OpenLayers3中Popup的调用时实现，OL3改用Overlay代替OL2的Popup功能。 接口简介： overlay跟ol.control.Control一样，是一个可见的窗口，但是不和Control一样，不是固定在地图区域...
Openlayers3 实现点击不同的图标弹出不同的popup信息
英勇的博客
02-03 3689
1、 我们老师的书籍《WebGIS之Openlayers全面解析》上面有关于popup的例子，作为例子，肯定是写死的，没有查询数据库，也就是只有一个地理位置。（不要管为什么看不到地图 ）如下图： 2、 我想要的效果就是，查询数据库，找出所有的监测站点，并把这些站点显示在地图上，点击不同的站点能弹出不同的信息。如下图，是我想要的效果： 3、 先给出书本上参考例子的代码，接下来对例子的代码进行修改...
openlayers.Popup
D.調の華麗
11-04 2801
OpenLayers.Popup： fixPadding：处理边界间隙。3.0版本将废弃 initialize：初始化 destroy：销毁 draw：绘制 updatePosition：更新位置 moveTo：移动 visible：判断弹出窗口是否可见 toggle：反转可见性 show：显示弹出窗口 hide：隐藏弹出窗口 setSize：设置弹出窗口尺寸 setBac
关于WPF中Popup中的一些用法的总结
08-07 490
1.常用属性说明 IsOpen: 布尔值,指示 Popup 控件是否显示 StaysOpen: 布尔值,指示在 Popup 控件失去焦点的时候,是否关闭 Popup 控件的显示 PopupAnimation:指示显示窗口时是否使用动画,只有在 AllowsTransparency 等于true时此属性才有用，设置一些Popup的弹出时的动画效果。我们可以设置PopupAnimati...
openlayers [九] 地图覆盖物overlay三种常用用法 popup弹窗，marker标注，text文本
爱玩亚索的程序员
01-19 976
常见的地图覆盖物为这三种类型，如：popup弹窗、label标注信息、text文本信息等。
layer.open 弹出框关闭时回调方法
最新发布
猫头鹰的夜晚
04-17 447
【代码】layer.open 弹出框关闭时回调方法。
Vue + Openlayers入门教程（六）：实现信息弹窗功能
菜鸟的博客
06-29 393
信息弹窗会自动获取鼠标当前位置下的所有矢量图层信息，包括当前坐标、矢量类型与图层名称。如果同一个点击区域有不同矢量图层覆盖，可以点击切换按钮进行信息描述切换。
openlayers的popup实现
Lin00Kun11的专栏
08-29 6516
功能需求如下： 在地图 http://blog.csdn.net/lin00kun11/article/details/38865147
openlayer 设置popup窗口始终在上方显示
淘淘小窝
07-23 2650
主要一句代码 (感谢,官方旗舰群的 OL_Freshman  )
Popup.js（有用例及注释）
09-01
Popup.js 是一个很不错的javaScript 弹出窗口js库。 可修改，可括展性好。 Web编程必备的好工具啊。 下载后解压，打开Demo.html即可以看到效果了。 希望对大家有帮助！！
Popup例子 实现弹出窗口的关闭
05-02
实现弹出窗口与主界面的分离，只要点击弹出窗口的其他部分就可以关闭弹出窗口。
openlayers：实现popup（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-31 65
openlayers：实现popup（附完整源码）
openlayers：实现地图popup弹出框（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-12 205
openlayers：实现地图popup弹出框（附完整源码）
OpenLayers Popup（浮窗）的Vue组件
GIS小虫的博客
04-25 1232
根据openlayers官方的popup实例改的，使用Vue2+TS，功能比较简单 OLPopop.vue <template> <div ref="container" class="ol-popup"> <a href="#" ref="closer" class="ol-popup-closer"></a> <slot></slot> </div> </template> impo
leafLet API 中文文档翻译
YXWik的博客
12-04 1667
转载：http://blog.sina.com.cn/s/blog_5ff72f610101ku5d.html
javascript---window.createPopup
Simplicity is more complicated than you think
12-13 5778
在Web上使用菜单可以极大地节约页面的空间，同时也比较的符合用户从Windows上继承下来的UI操作体验。在以往的Web页菜单设计中，我们 普遍使用div嵌套table的方式来实现菜单，这样的菜单有个最致命的问题就是会被覆盖。我们为了解决这个问题，有时我们 干脆在显示图层菜单的同时隐藏页面上的所有下拉列表框，在菜单消失的时候，再显示他们。这个方法虽然可以解决问题，而其优化过后还可以只隐藏和下拉列表
弹窗popUp
马拉松PB
09-10 830
介绍popUp和popUpModal的简单创建
vue openlayers 弹窗 地图层级
07-12
你好！对于Vue和OpenLayers的弹窗和地图层级的问题，我可以给你一些指导。 要在Vue中使用OpenLayers，首先需要安装OpenLayers的npm包。可以通过以下命令来安装： ``` npm install ol ``` 安装完成后，可以在Vue组件中引入OpenLayers的相关代码。具体的代码可以参考OpenLayers的官方文档。 关于弹窗，OpenLayers提供了弹窗的功能。你可以使用`ol.Overlay`类来创建一个弹窗。首先，在地图上定义一个Overlay： ```javascript var overlay = new ol.Overlay({ element: document.getElementById('popup'), positioning: 'bottom-center', stopEvent: false }); ``` 然后，可以在需要显示弹窗的位置调用`overlay.setPosition()`方法来设置弹窗的位置： ```javascript overlay.setPosition(coordinate); ``` 其中，`coordinate`是一个包含弹窗位置的经纬度坐标。 最后，将Overlay添加到地图中： ```javascript map.addOverlay(overlay); ``` 关于地图层级，你可以使用`ol.View`类来设置地图的初始层级。在Vue中，你可以在`mounted`钩子函数中使用以下代码来初始化地图并设置层级： ```javascript mounted() { var map = new ol.Map({ target: 'map', view: new ol.View({ zoom: 10, center: [0, 0] }) }); } ``` 其中，`zoom`属性表示地图的层级，`center`属性表示地图的中心点。 希望这些信息能帮到你！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值