(转)OpenLayers3基础教程——OL3之Popup
http://blog.csdn.net/gisshixisheng/article/details/46794813
概述:
本节重点讲述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)
Name | Type | Description | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options |
Overlay options.
|
Fires:
change:element
(ol.ObjectEvent)change:map
(ol.ObjectEvent)change:offset
(ol.ObjectEvent)change:position
(ol.ObjectEvent)change:positioning
(ol.ObjectEvent)
Extends
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}
-
Get the DOM element of this overlay.
Returns:
The Element containing the overlay.
getMap(){ol.Map|undefined}
-
Get the map associated with this overlay.
Returns:
The map that the overlay is part of.
getOffset(){Array.<number>}
-
Get the offset of this overlay.
Returns:
The offset.
getPosition(){ol.Coordinate|undefined}
-
Get the current position of this overlay.
Returns:
The spatial point that the overlay is anchored at.
getPositioning(){ol.OverlayPositioning}
-
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
-
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
inlistener
.Returns:
Unique key for the listener.
once(type, listener, opt_this){goog.events.Key} inherited
-
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
inlistener
.Returns:
Unique key for the listener.
setElement(element)
-
Set the DOM element to be associated with this overlay.
Name Type Description element
Element | undefined The Element containing the overlay.
setMap(map)
-
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)
-
Set the offset for this overlay.
Name Type Description offset
Array.<number> Offset.
setPosition(position)
-
Set the position for this overlay.
Name Type Description position
ol.Coordinate | undefined The spatial point that the overlay is anchored at.
setPositioning(positioning)
-
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
-
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 thelistener
.
unByKey(key) inherited
-
Removes an event listener using the key returned by
on()
oronce()
.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之Popup的更多相关文章
- OpenLayers3基础教程——OL3之Popup
概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用Overlay取代OL2的Popup功能. 接口简单介绍: overlay跟ol.control.Control一样,是一 ...
- (转)OpenLayers3基础教程——OL3基本概念
http://blog.csdn.net/gisshixisheng/article/details/46756275 OpenLayers3基础教程——OL3基本概念 从本节开始,我会陆陆续续的更新 ...
- OpenLayers3基础教程——OL3 介绍control
概述: 本文讲述的是Ol3中的control的介绍和应用. OL2和OL3 control比較: 相比較Ol2的control,OL3显得特别少,下图分别为Ol2和Ol3的control: Ol2的c ...
- OpenLayers3基础教程——OL3基本概念
从本节開始,我会陆陆续续的更新有关OL3的相关文章--OpenLayers3基础教程,欢迎大家关注我的博客,同一时候也希望我的博客可以给大家带来一点帮助. 概述: OpenLayers 3对OpenL ...
- (转) OpenLayers3基础教程——OL3 介绍control
http://blog.csdn.net/gisshixisheng/article/details/46761535 概述: 本文讲述的是Ol3中的control的介绍和应用. OL2和OL3 co ...
- (转)OpenLayers3基础教程——OL3 介绍interaction
http://blog.csdn.net/gisshixisheng/article/details/46808647 概述: 本节主要讲述OL3的交互操作interaction,重点介绍draw,s ...
- (转) OpenLayers3基础教程——加载资源
概述: 本节讲述如何在Ol3中加载wms图层并显示到地图中. Ol3下载: 你可以在OL官网去下载,下载地址为http://openlayers.org/download/,也可以去我的百度云盘下载, ...
- openlayers3入门教程
...
- Chrome扩展开发基础教程(附HelloWorld)
1 概述 Chrome扩展开发的基础教程,代码基于原生JS+H5,教程内容基于谷歌扩展开发官方文档. 2 环境 Chrome 88.0.4324.96 Chromium 87.0.4280.141 B ...
随机推荐
- 【hdu 2108】Shape of HDU
[题目链接]:http://acm.hdu.edu.cn/showproblem.php?pid=2108 [题意] [题解] 逆时针; 可以想象一下; 如果是凸多边形的话; 逆时针的相邻的两条边; ...
- Spring Boot静态资源处理
Spring Boot静态资源处理 8.8 Spring Boot静态资源处理 当使用Spring Boot来开发一个完整的系统时,我们往往需要用到前端页面,这就不可或缺地需要访问到静态资源,比如图片 ...
- 数字统计(2010年NOIP全国联赛普及组)
题目描述 请统计某个给定范围[L, R]的所有整数中,数字 2 出现的次数. 比如给定范围[2, 22],数字 2 在数 2 中出现了 1 次,在数 12 中出现 1 次,在数 20 中出 现 1 次 ...
- nyoj_49_开心的小明_201403161133
开心的小明 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 小明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天 ...
- mysql实例的连接数max_user_connections 和max_connections 配置的那些事
今天在查线上问题时,通过phpMyAdmin来进行DML操作,发现比平时慢多了,就各种进原因. 项目的场景是一个mysql实例中创建了多个数据库,猜想可能是相互影响所致. 然后,查询线上Mysql数据 ...
- mongodb之配置
前言 最新版本支持yaml格式的配置文件,只支持空格,不能使用tab 详细配置说明 #系统日志配置 systemLog: destination: file path: /var/log/mongod ...
- posix线程库1
posix线程库重要的程度不言而喻,这些天学习这个,参考 https://www.ibm.com/developerworks/cn/linux/thread/posix_thread1/ 首先先 ...
- HDU 4598
这道题其实不需要考虑具体数值,但可以肯定的是,相连边的两端点必定有一正一负,至于谁正谁负,并不重要,这是可以思考的,很明显的一个二分图性质,如果不满足此条件,是不可能满足题目第二个条件的.所以首先对题 ...
- linux面试之--堆、栈、自由存储区、全局/静态存储区和常量存储区
栈,就是那些由编译器在须要的时候分配,在不须要的时候自己主动清除的变量的存储区.里面的变量一般是局部变量.函数參数等.在一个进程中.位于用户虚拟地址空间顶部的是用户栈,编译器用它来实现函数的调用.和堆 ...
- CF # 296 C Glass Carving (并查集 或者 multiset)
C. Glass Carving time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...