OpenLayers3基础教程——OL3之Popup

最新推荐文章于 2024-08-21 16:21:04 发布
最新推荐文章于 2024-08-21 16:21:04 发布
阅读量162 收藏
点赞数
文章标签： xhtml javascript ViewUI

概述：

本节重点讲述OpenLayers3中Popup的调用时实现，OL3改用Overlay取代OL2的Popup功能。


接口简单介绍：

overlay跟ol.control.Control一样，是一个可见的窗体，可是不和Control一样，不是固定在地图区域的某个部分，而是显示在一个地图坐标上，随着地图的移动或者缩放而移动的。其调用方式例如以下：

var popup = new ol.Overlay({
  element: document.getElementById('popup')
});
popup.setPosition(coordinate);
map.addOverlay(popup);
new ol.Overlay(options)
src/ol/overlay.js,  line 69
NameTypeDescription
options

Overlay options.

NameTypeDescription
elementElement | undefined

The overlay element.

offsetArray.<number> |undefined

Offsets in pixels used when positioning the overlay. The fist element in the array is the horizontal offset. A positive value shifts the overlay right. The second element in the array is the vertical offset. A positive value shifts the overlay down. Default is [0, 0].

positionol.Coordinate |undefined

The overlay position in map projection.

positioningol.OverlayPositioning| string | undefined

Defines how the overlay is actually positioned with respect to its position property. Possible values are'bottom-left', 'bottom-center', 'bottom-right', 'center-left', 'center-center','center-right', 'top-left', 'top-center', and 'top-right'. Default is 'top-left'.

stopEventboolean | undefined

Whether event propagation to the map viewport should be stopped. Default is true. If true the overlay is placed in the same container as that of the controls (CSS class name ol-overlaycontainer-stopevent); iffalse it is placed in the container with CSS class name ol-overlaycontainer.

insertFirstboolean | undefined

Whether the overlay is inserted first in the overlay container, or appended. Default is true. If the overlay is placed in the same container as that of the controls (see the stopEvent option) you will probably setinsertFirst to true so the overlay is displayed below the controls.

Fires:

Extends

Observable Properties

NameTypeSettableol.ObjectEvent typeDescription
elementElement | undefinedyeschange:element

The Element containing the overlay.

mapol.Map | undefinedyeschange:map

The map that the overlay is part of.

offsetArray.<number>yeschange:offset

The offset.

positionol.Coordinate | undefinedyeschange:position

The spatial point that the overlay is anchored at.

positioningol.OverlayPositioningyeschange:positioning

How the overlay is positioned relative to its point on the map.

Methods

getElement(){Element|undefined}
src/ol/overlay.js,  line 160

Get the DOM element of this overlay.

Returns:
The Element containing the overlay. 
getMap(){ol.Map|undefined}
src/ol/overlay.js,  line 176

Get the map associated with this overlay.

Returns:
The map that the overlay is part of. 
getOffset(){Array.<number>}
src/ol/overlay.js,  line 192

Get the offset of this overlay.

Returns:
The offset. 
getPosition(){ol.Coordinate|undefined}
src/ol/overlay.js,  line 209

Get the current position of this overlay.

Returns:
The spatial point that the overlay is anchored at. 
getPositioning(){ol.OverlayPositioning}
src/ol/overlay.js,  line 226

Get the current positioning of this overlay.

Returns:
How the overlay is positioned relative to its point on the map. 
on(type, listener, opt_this){goog.events.Key} inherited
src/ol/observable.js,  line 65

Listen for a certain type of event.

NameTypeDescription
typestring | Array.<string>

The event type or array of event types.

listenerfunction

The listener function.

thisObject

The object to use as this in listener.

Returns:
Unique key for the listener. 
once(type, listener, opt_this){goog.events.Key} inherited
src/ol/observable.js,  line 78

Listen once for a certain type of event.

NameTypeDescription
typestring | Array.<string>

The event type or array of event types.

listenerfunction

The listener function.

thisObject

The object to use as this in listener.

Returns:
Unique key for the listener. 
setElement(element)
src/ol/overlay.js,  line 312

Set the DOM element to be associated with this overlay.

NameTypeDescription
elementElement | undefined

The Element containing the overlay.

setMap(map)
src/ol/overlay.js,  line 327

Set the map to be associated with this overlay.

NameTypeDescription
mapol.Map | undefined

The map that the overlay is part of.

setOffset(offset)
src/ol/overlay.js,  line 342

Set the offset for this overlay.

NameTypeDescription
offsetArray.<number>

Offset.

setPosition(position)
src/ol/overlay.js,  line 358

Set the position for this overlay.

NameTypeDescription
positionol.Coordinate | undefined

The spatial point that the overlay is anchored at.

setPositioning(positioning)
src/ol/overlay.js,  line 374

Set the positioning for this overlay.

NameTypeDescription
positioningol.OverlayPositioning

how the overlay is positioned relative to its point on the map.

un(type, listener, opt_this) inherited
src/ol/observable.js,  line 91

Unlisten for a certain type of event.

NameTypeDescription
typestring | Array.<string>

The event type or array of event types.

listenerfunction

The listener function.

thisObject

The object which was used as this by the listener.

unByKey(key) inherited
src/ol/observable.js,  line 101

Removes an event listener using the key returned by on() or once().

NameTypeDescription
keygoog.events.Key

Key.

上面的内容是OL3 的API中关于overlay的部分。


调用演示样例：

1、popup样式

		body, #map {
			border: 0px;
			margin: 0px;
			padding: 0px;
			width: 100%;
			height: 100%;
			font-size: 13px;
		}

		.ol-popup {
			display: none;
			position: absolute;
			background-color: white;
			-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
			-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));
			border: 1px solid #cccccc;
			bottom: 12px;
			left: -50px;
			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;
		}
		.popup-title{
			font-weight: bold;
			border-bottom:1px solid #cccccc;
			padding: 5px 8px;
		}
		.popup-content{
			padding: 5px 8px;
		}
		.ol-popup-closer {
			text-decoration: none;
			position: absolute;
			top: 6px;
			right: 6px;
		}
		.ol-popup-closer:after {
			content: "✖";
		}
2、popup容器 

<div id="map">
	<div id="popup" class="ol-popup">
		<a href="#" id="popup-closer" class="ol-popup-closer"></a>
		<div id="popup-title" class="popup-title"></div>
		<div id="popup-content" class="popup-content"></div>
	</div>
</div>
3、实现js 

			var container = document.getElementById('popup');
			var content = document.getElementById('popup-content');
			var title = document.getElementById('popup-title');
			var closer = document.getElementById('popup-closer');
			closer.onclick = function(){
				container.style.display = 'none';
				closer.blur();
				return false;
			};
			var overlay = new ol.Overlay({
				element: container
			});
			map.addOverlay(overlay);
			map.on('click', function(evt) {
				var coordinate = evt.coordinate;
				var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
						coordinate, 'EPSG:4326', 'EPSG:4326'));
				overlay.setPosition(coordinate);
				content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
				'</code>';
				container.style.display = 'block';
				title.innerHTML = "提示信息";
				title.style.display = 'block';
				map.getView().setCenter(coordinate);
			});

演示样例完整代码例如以下： 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Ol3 popup</title>
	<link rel="stylesheet" type="text/css" href="http://localhost/ol3/css/ol.css"/>
	<style type="text/css">
		body, #map {
			border: 0px;
			margin: 0px;
			padding: 0px;
			width: 100%;
			height: 100%;
			font-size: 13px;
		}

		.ol-popup {
			display: none;
			position: absolute;
			background-color: white;
			-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
			-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));
			border: 1px solid #cccccc;
			bottom: 12px;
			left: -50px;
			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;
		}
		.popup-title{
			font-weight: bold;
			border-bottom:1px solid #cccccc;
			padding: 5px 8px;
		}
		.popup-content{
			padding: 5px 8px;
		}
		.ol-popup-closer {
			text-decoration: none;
			position: absolute;
			top: 6px;
			right: 6px;
		}
		.ol-popup-closer:after {
			content: "✖";
		}
	</style>
	<script type="text/javascript" src="http://localhost/ol3/build/ol.js"></script>
	<script type="text/javascript" src="http://localhost/jquery/jquery-1.8.3.js"></script>
	<script type="text/javascript">
		function init(){
			var format = 'image/png';
			var bounds = [73.4510046356223, 18.1632471876417,
				134.976797646506, 53.5319431522236];
			var untiled = new ol.layer.Image({
				source: new ol.source.ImageWMS({
					ratio: 1,
					url: 'http://localhost:8081/geoserver/lzugis/wms',
					params: {'FORMAT': format,
						'VERSION': '1.1.1',
						LAYERS: 'lzugis:capital',
						STYLES: ''
					}
				})
			});
			var projection = new ol.proj.Projection({
				code: 'EPSG:4326',
				units: 'degrees'
			});
			var container = document.getElementById('popup');
			var content = document.getElementById('popup-content');
			var title = document.getElementById('popup-title');
			var closer = document.getElementById('popup-closer');
			closer.onclick = function(){
				container.style.display = 'none';
				closer.blur();
				return false;
			};
			var overlay = new ol.Overlay({
				element: container
			});
			map.addOverlay(overlay);

			var map = new ol.Map({
				controls: ol.control.defaults({
					attribution: false
				}),
				target: 'map',
				layers: [untiled],
				overlays: [overlay],
				view: new ol.View({
					projection: projection
				})
			});
			map.getView().fitExtent(bounds, map.getSize());

			map.on('click', function(evt) {
				var coordinate = evt.coordinate;
				var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
						coordinate, 'EPSG:4326', 'EPSG:4326'));
				overlay.setPosition(coordinate);
				content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
				'</code>';
				container.style.display = 'block';
				title.innerHTML = "提示信息";
				title.style.display = 'block';
				map.getView().setCenter(coordinate);
			});
		}
	</script>
</head>
<body onLoad="init()">
<div id="map">
	<div id="popup" class="ol-popup">
		<a href="#" id="popup-closer" class="ol-popup-closer"></a>
		<div id="popup-title" class="popup-title"></div>
		<div id="popup-content" class="popup-content"></div>
	</div>
</div>
</body>
</html>

实现后的效果例如以下：



相关文章：

OpenLayers3基础教程——OL3基本概念

OpenLayers3基础教程——载入资源

OpenLayers3基础教程——OL3 介绍control








weixin_34146805
关注
OpenLayers 3 介绍
沈荣荣的博客
10-11 2804
OpenLayers 3 介绍 OpenLayers 3简称ol3，它是一个开源的Web GIS引擎，使用了JavaScript、最新的HTML5技术及CSS技术，支持dom，canvas和webgl三种渲染方式。除了支持网页端，还支持移动端（目前移动端还不成熟，有待进一步完善）。在地图数据源方面，支持各种类型的瓦片地图，既支持在线的，也支持离线的。比如OSM, Bing, MapBox,
openlayers3官方教程离线版
12-25
1. **基础概念**：首先，你需要理解WebGIS（Web地理信息系统）的基本原理，以及OpenLayers 3在其中的角色。它是一个客户端库，负责在浏览器中显示、操作和管理地图数据。 2. **地图构造**：在OpenLayers 3中，你...
OpenLayers3文档
05-09
openlayers3的文档，目前都是外文的，找了个中文的资料
openlayers3 基础（常见方法，类及实现）
06-18 700
　　　　ol3接口大全1.ol.Map类：（地图容器类） 　　　　实现： ol.Map(参数) 　　参数说明：1.1 target，说明地图所在的html元素、 　　　　　　　　如果没有指定，必须调用ol.Map类的setTarget（）方法以便绘制地图； 　　　　　　1.2 layers,指定加载的图层。 　　　　　　　　如果未定义，则将呈现不包...
OpenLayers3, 缩放、平移、复位操作
最新发布
我哎GIS博客
08-21 1300
本文基于OpenLayers3实现地图缩放、平移和复位操作。
OpenLayers3的简单总结
huangzhixin1996的博客
05-06 1114
关于一些OpenLayers的概念，浅浅了解，有助于开发项目
arc engine 地图整饰的思路与流程
体验新模板
11-08 794
地图整饰的思路与流程 首先,鼠标交互选择图幅。用户在含有图幅索引图层的数据图上,用鼠标左击选择某幅图;然后系统通过空间检索,自动选定包含该图的标准图幅,据内外图廓间距扩展绘制出外图廓。同时根据左下角坐标生成方里网,并在地图上标注出方里网注记。再将接图表、图廓注记、比例尺和图号等图廓.整饰要素一一生成出来 。从而实现内外图廓、图外整饰信息的统一自动生成,完成地图的自动化整饰。对于任意范围图形整饰,主要考虑到用户的需求。用户有时需要对感兴趣的某些区域地图整饰输出.然后获取该区.域范围的四角坐标。以左下角点最小坐
ol3Echarts：ol3Echarts | echarts的openlayers扩展
02-06
支持openlayers3-4 支持openlayers5 + 下载 git clone https://github.com/sakitam-fdd/ol3Echarts.git yarn run bootstrap yarn run dev yarn run build yarn run karma.test 安装 npm安装 注意：npm下存在两个包...
2016最新openlayers-3-基础教程
08-23
在OpenLayers3中，Popup（弹出窗口）是用于在地图上显示额外信息的一种组件。通过Popup组件，可以向用户展示地图上的特定地理位置相关的详细信息。 总之，OpenLayers3作为一个强大的地图展示和交互的JavaScript库，...
OL3Demo.rar_OL3Demo_ol3 地图_openlayers 聚合_webgis_地图定位
07-15
OpenLayers 3 示例集锦，点index.htm可直接运行，基于openlayers API ，完成导航控件、地图操作、鹰眼、动画效果、多源数据叠加、图形绘制、聚合标注、投影转换、视图联动、热点图、统计图、标绘、定位导航等功能。...
openlayers3入门教程
11-25
本教程将针对初学者，介绍OpenLayers3的基本体系结构，以及如何配置和使用OL3进行基础开发。 首先，OpenLayers3的图层体系是开发者在使用OL3时最先接触的概念之一。OL3中的图层（Layer）管理了地图上的不同数据类型...
OpenLayers 3 地图框选 画多边形 获取坐标 实例
12-01
OpenLayers 3 地图框选 Draw 画多边形 Polygon 获取坐标
Openlayers3学习文档
07-10
openlayers3
openlayers3 简单示例
07-05
openlayers 3 示例代码 demo.html:基本的地图展示示例 - map-animation.html:地图动画效果示例 - map-zoom.html:地图基本缩放操作示例 - map-controls.html：地图控件显示的操作示例 - map-geojson.html: 加载geojson示例 - map-spy.html: 地图通透镜效果 - map-swipe.html:地图卷帘效果
OpenLayers 3入门教程
u013341164的博客
06-21 1040
转载《OpenLayers 3 Primer》 http://weilin.me/ol3-primer/ 介绍 这是一个关于OpenLayers 3使用的入门教程。帮助初学者逐步认识OpenLayers 3，理解地图组成，以及各个组成部分的作用。在此基础上，逐个突破，结合大量的实例，指导大家应用OpenLayers 3开发出符合业务的地图。在这个过程中，辅以对应的理论知识，学习了解OpenLaye...
openlayses开发
liuweihui521的专栏
01-10 661
OpenLayers 3 入门指南 作者 猿基地 2015.08.13 10:03 字数 1117 从使用OpenLayers 3到现在有差不多一年的时间了，OpenLayers是web端比较好的一个GIS引擎，广受大家的青睐，最开始我以为这是一个比较小众的引擎，没想到后面发现有很多人使用，并且还有很多正在学习使用的小伙伴，他们同我最开始一样，对于如何快速有
bootstrap + openlayer popup窗口样式变形
淘淘小窝
04-22 3041
使用bootstrap + openlayers2时 ,发现导入bootstrap样式后openlayers的popup窗口变形 解决：
OpenLayers 3 内置交互
大树
02-15 695
OpenLayers 3 交互 一、OpenLayers 3 内置交互类 OpenLayers 3提供了最基本的地图放大，缩小，平移等功能，以满足用户浏览地图的需要。 这些功能都是内置的，实现类都放在包ol.interaction下面，可以通过官网API查询到。 交互类 描述 旋转 ol.interaction.DragRotate 按住alt+shift键，用鼠标左键拖动地图，就能让地图旋转 ol.interaction.PinchRotate 两个手指旋转地图，针对触摸屏
openLayers3基本写法
xiaoxiangrikui的博客
08-31 378
///////////////////////////////////鼠标控件，显示当前位置经纬度。//doubleClickZoom: false,// 取消双击放大功能交互。///////////////////////////////////////定义视图。///////////////////////////创建一个矢量图层作为绘制层。//////////////////////////////////初始化地图。///////////////////////////////创建XYZ瓦片层。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值