OpenLayers3基础教程——OL3之Popup
来源:互联网 发布:芜湖生活频道 网络直播 编辑:程序博客网 时间:2024/05/29 16:31
概述:
本节重点讲述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)
options
Overlay options.
element
Element | undefinedThe overlay element.
offset
Array.<number> |undefinedOffsets 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 |undefinedThe overlay position in map projection.
positioning
ol.OverlayPositioning| string | undefinedDefines 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 | undefinedWhether 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 | undefinedWhether 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
element
Element | undefinedyeschange:element
The Element containing the overlay.
map
ol.Map | undefinedyeschange:map
The map that the overlay is part of.
offset
Array.<number>yeschange:offset
The offset.
position
ol.Coordinate | undefinedyeschange:position
The spatial point that the overlay is anchored at.
positioning
ol.OverlayPositioningyeschange:positioning
How the overlay is positioned relative to its point on the map.
Methods
getElement(){Element|undefined}
src/ol/overlay.js, line 160Get the DOM element of this overlay.
Returns:
The Element containing the overlay.getMap(){ol.Map|undefined}
src/ol/overlay.js, line 176Get the map associated with this overlay.
Returns:
The map that the overlay is part of.getOffset(){Array.<number>}
src/ol/overlay.js, line 192Get the offset of this overlay.
Returns:
The offset.getPosition(){ol.Coordinate|undefined}
src/ol/overlay.js, line 209Get the current position of this overlay.
Returns:
The spatial point that the overlay is anchored at.getPositioning(){ol.OverlayPositioning}
src/ol/overlay.js, line 226Get 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 65Listen for a certain type of event.
Name Type Description type
string | Array.<string>The event type or array of event types.
listener
functionThe listener function.
this
ObjectThe object to use as
this
inlistener
.Returns:
Unique key for the listener.once(type, listener, opt_this){goog.events.Key} inherited
src/ol/observable.js, line 78Listen once for a certain type of event.
Name Type Description type
string | Array.<string>The event type or array of event types.
listener
functionThe listener function.
this
ObjectThe object to use as
this
inlistener
.Returns:
Unique key for the listener.setElement(element)
src/ol/overlay.js, line 312Set the DOM element to be associated with this overlay.
Name Type Description element
Element | undefinedThe Element containing the overlay.
setMap(map)
src/ol/overlay.js, line 327Set the map to be associated with this overlay.
Name Type Description map
ol.Map | undefinedThe map that the overlay is part of.
setOffset(offset)
src/ol/overlay.js, line 342Set the offset for this overlay.
Name Type Description offset
Array.<number>Offset.
setPosition(position)
src/ol/overlay.js, line 358Set the position for this overlay.
Name Type Description position
ol.Coordinate | undefinedThe spatial point that the overlay is anchored at.
setPositioning(positioning)
src/ol/overlay.js, line 374Set the positioning for this overlay.
Name Type Description positioning
ol.OverlayPositioninghow the overlay is positioned relative to its point on the map.
un(type, listener, opt_this) inherited
src/ol/observable.js, line 91Unlisten for a certain type of event.
Name Type Description type
string | Array.<string>The event type or array of event types.
listener
functionThe listener function.
this
ObjectThe object which was used as
this
by thelistener
.unByKey(key) inherited
src/ol/observable.js, line 101Removes an event listener using the key returned by
on()
oronce()
.Name Type Description key
goog.events.KeyKey.
调用示例:
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
- OpenLayers3基础教程——OL3之Popup
- OpenLayers3基础教程——OL3基本概念
- OpenLayers3基础教程——OL3 介绍control
- OpenLayers3基础教程——OL3 介绍interaction
- OpenLayers3基础教程——加载资源
- openlayers3 ol3热力图 json
- OpenLayers3 学习心得(一)——体系结构
- OpenLayers3 学习心得(三)——绘图
- OpenLayers3 学习心得(五)——测量
- openlayers3投影转换——proj4js
- Solr之——基础教程
- OpenLayers3
- openlayers3
- openlayers3个人学习心得之Cluster
- openlayers3个人学习心得之LineString
- 基础教程之——RMI一步一步学习
- 【学习笔记之Openlayers3】初次接触openlayers3(第一篇)
- OpenLayers3 学习心得(二)——开发配置
- leetcode 010 —— Regular Expression Matching(hard)
- [华为机试真题]72.操作系统任务调度问题
- 【Java】检查字符串s2是否为s1旋转而成
- Linux 挂载iscsi存储磁盘设备
- SpringMVC 使用JSR-303进行校验 @Valid
- OpenLayers3基础教程——OL3之Popup
- BZOJ3456【分治FFT】
- 查找总结
- Warshall算法求道路矩阵
- 黑马程序员---Java概述与jdk的安装和配置(一)
- bootstrap-table(一)
- js的数组ECMAScript 5加入的方法(一)
- Java 截取字符串
- poj 2287 Tian Ji -- The Horse Racing