OpenLayers3基础教程—

概述：

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

实现后的效果例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

相关文章：

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

OpenLayers3基础教程——载入资源

OpenLayers3基础教程——OL3 介绍control

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR0lTU2hpWGlTaGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />