概述：

本節重點講述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 69NameTypeDescription

options

Overlay options. NameTypeDescription 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); iffalse?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 setinsertFirst?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

NameTypeSettableol.ObjectEvent?typeDescription

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.

NameTypeDescription

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.

NameTypeDescription

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.

NameTypeDescription

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.

NameTypeDescription

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.

NameTypeDescription

offset	Array.<number>	Offset.

setPosition(position)

src/ol/overlay.js,?line 358

Set the position for this overlay.

NameTypeDescription

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.

NameTypeDescription

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.

NameTypeDescription

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().

NameTypeDescription

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

轉載于:https://www.cnblogs.com/blfbuaa/p/6956729.html

總結

以上是生活随笔為你收集整理的OpenLayers3基础教程——OL3之Popup的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。