很多场景需要在地图上弹出一个tooltip或者popup之类的小窗口显示一些信息,最近简单做了一下封装,方便后续调用,代码如下:
/* 刘玉峰 jjxliu306@163.com 2018-05-05 */ //点击后高亮下方的feature 并且弹出popup信息做展示 Popup = function(map ){ this.map = map ; //添加一个popup的div var div = document.createElement("div"); div.id = 'popup'; div.className='ol-popup'; div.innerHTML = ' <a href="#" id="popup_closer" class="ol-popup-closer"></a> ' + ' <div id="popup_content"></div> ' ; document.body.appendChild(div); var overlay = new ol.Overlay({ element: div, autoPan: true, autoPanAnimation: { duration: 250 }/* , offset:[0,-45]*/ }); map.addOverlay(overlay); //扔到map里 后面方便调用 this.popup = overlay ; document.getElementById('popup_closer').onclick = function() { overlay.setPosition(undefined); //$('#popup_closer').blur(); return false; }; } /** * 泡泡显示信息 * @param _info 气泡内容 * @param _position 气泡显示的位置 [lon,lat] */ Popup.prototype.tooltip = function(_info , _position) { document.getElementById('popup_content').innerHTML = _info ; //设置popup的位置 this.popup.setPosition(_position); }
需要引入一个样式文件:
.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; font: italic bold 12px ; min-width: 280px; } .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; } .ol-popup-closer:after { content: "✖"; }
2、测试,鼠标点击地图后弹出当前鼠标的点击位置信息 :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>openlayers-popup</title> <link rel="stylesheet" href="ol.css" type="text/css"> <link rel="stylesheet" href="popup.css" type="text/css"> <style> .map { height: 500px; width: 100%; } </style> <script src="ol.js" type="text/javascript"></script> <script src="popup.js" type="text/javascript"></script> </head> <body> <h2>openlayers popup 工具封装测试 </h2> <div id="map" class="map"></div> <h2>刘玉峰 jjxliu306@163.com</h2> <script type="text/javascript"> var osm = new ol.layer.Tile({ source: new ol.source.OSM() }); var map = new ol.Map({ target: 'map', layers:[osm], view: new ol.View({ center: [ 120, 30], zoom: 10, projection: 'EPSG:4326' }) }); var popup = new Popup(map); //下面对鼠标点击时间进行监听 map.on('click', function(evt) { var position = map.getEventCoordinate(evt.originalEvent); popup.tooltip(position , position); }); </script> </body> </html>
效果如图:
公网的案例:
http://47.98.238.202:8000/ol_extension/tool/popup/
码云代码地址:
https://gitee.com/jjxliu306/ol_extension/tree/master/tool/popup
相关推荐
基于 openlayer 扩展封装的信息窗口弹出控件
openlayer4 加载arcgis rest 服务(遥感影像)。本文件适用于离线环境和有网络的在线环境。包括离线open layer,ol.css和ol.js文件和代码。代码很简单,老铁替换服务地址就可以使用代码。关键是质量保证,项目验证。...
自定义工具条,继承ol.control.Control类,又定义了测量组件,进行加载
基于openlayer3、geoserver2.3.2的openlayer3访问geoserver发布的地图服务
False 多上传 弹出框可以选择多个文件 SWF文件
Openlayer地图叠加瓦片,通过传入瓦片路径或者服务,和空间范围,进行叠加显示
1、openlayer加载百度地图高德地图 2、主要js代码 ol.js ol.css 3、web 端 gis 参考学习例子
model弹出框
下载如有问题,可私信博主。下载前建议先查看博客内容,其地址为:https://blog.csdn.net/m0_60387551/article/details/123185446
openlayer 加载geoserver地图测试页面
NULL 博文链接:https://lpyyn.iteye.com/blog/2103264
基于openlayer的军事动态标绘
Openlayer 简单实例3 自定义按钮图标
实现openlayer自定义鹰眼,用于代替openlayer原来自带的鹰眼。
Javascript弹出框架,功能相当不错
geoserver与openlayer配置 步骤全面详细
最近使用layer框架来做页面弹出框操作。总是不能获取弹出框中input的值,代码如下:红色标记区域 添加js代码 //Ajax添加品牌 function addBrandWI(){ layer.open({ type: 0, title: '品牌添加', shadeClose: ...
openlayer3源代码,自定义热力图
OpenLayers 支持Open GIS 协会制定的WMS(Web Mapping Service)和WFS(Web Feature Service)等网络服务规范,可以通过远程服务的方式,将以OGC 服务形式发布的地图数据加载到基于浏览器的OpenLayers 客户端中进行...
1、openlayer3加载google地形图 2、openlayer加载谷歌影像图 3、openlayer加载谷歌交通图