OpenLayers3基础教程——OL3之Popup

概述：

本节重点讲述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

Name Type Description

options

Overlay options.

Name	Type	Description
`element`	Element \| undefined	The overlay element.
`offset`	Array.<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]`.
`position`	ol.Coordinate \|undefined	The overlay position in map projection.
`positioning`	ol.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'`.
`stopEvent`	boolean \| 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`); if`false` it is placed in the container with CSS class name `ol-overlaycontainer`.
`insertFirst`	boolean \| 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 set`insertFirst` to `true` so the overlay is displayed below the controls.

Fires:

change:element (ol.ObjectEvent)
change:map (ol.ObjectEvent)
change:offset (ol.ObjectEvent)
change:position (ol.ObjectEvent)
change:positioning (ol.ObjectEvent)

Extends

ol.Object

Observable Properties

Name	Type	Settable	ol.ObjectEvent type	Description
`element`	Element \| undefined	yes	`change:element`	The Element containing the overlay.
`map`	ol.Map \| undefined	yes	`change:map`	The map that the overlay is part of.
`offset`	Array.<number>	yes	`change:offset`	The offset.
`position`	ol.Coordinate \| undefined	yes	`change:position`	The spatial point that the overlay is anchored at.
`positioning`	ol.OverlayPositioning	yes	`change: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.

Name	Type	Description
`type`	string \| Array.<string>	The event type or array of event types.
`listener`	function	The listener function.
`this`	Object	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.

Name	Type	Description
`type`	string \| Array.<string>	The event type or array of event types.
`listener`	function	The listener function.
`this`	Object	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.

Name	Type	Description
`element`	Element \| undefined	The Element containing the overlay.

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

Set the map to be associated with this overlay.

Name	Type	Description
`map`	ol.Map \| undefined	The map that the overlay is part of.

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

Set the offset for this overlay.

Name	Type	Description
`offset`	Array.<number>	Offset.

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

Set the position for this overlay.

Name	Type	Description
`position`	ol.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.

Name	Type	Description
`positioning`	ol.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.

Name	Type	Description
`type`	string \| Array.<string>	The event type or array of event types.
`listener`	function	The listener function.
`this`	Object	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().

Name	Type	Description
`key`	goog.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

posted on 2015-07-07 22:23 LZU-GIS 阅读(354) 评论(0) 编辑收藏举报

刷新页面返回顶部

OpenLayers3基础教程——OL3之Popup

new ol.Overlay(options)

Fires:

Extends

Observable Properties

Methods

getElement(){Element|undefined}

Returns:

getMap(){ol.Map|undefined}

Returns:

getOffset(){Array.<number>}

Returns:

getPosition(){ol.Coordinate|undefined}

Returns:

getPositioning(){ol.OverlayPositioning}

Returns:

on(type, listener, opt_this){goog.events.Key} inherited

Returns:

once(type, listener, opt_this){goog.events.Key} inherited

Returns:

setElement(element)

setMap(map)

setOffset(offset)

setPosition(position)

setPositioning(positioning)

un(type, listener, opt_this) inherited

unByKey(key) inherited

公告