http://blog.csdn.net/gisshixisheng/article/details/46794813

概述：

本节重点讲述OpenLayers3中Popup的调用时实现，OL3改用Overlay代替OL2的Popup功能。

接口简介：

overlay跟ol.control.Control一样，是一个可见的窗口，但是不和Control一样，不是固定在地图区域的某个部分，而是显示在一个地图坐标上，随着地图的移动或者缩放而移动的。其调用方式如下：

[javascript] view plaincopy print?
  1. var popup = new ol.Overlay({
  2. element: document.getElementById('popup')
  3. });
  4. popup.setPosition(coordinate);
  5. 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); 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

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.

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.

Get the current position of this overlay.

Returns:

The spatial point that the overlay is anchored at.

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 in listener.
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 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

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.

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样式

[css] view plaincopy print?
  1. body, #map {
  2. border: 0px;
  3. margin: 0px;
  4. padding: 0px;
  5. width: 100%;
  6. height: 100%;
  7. font-size: 13px;
  8. }
  9. .ol-popup {
  10. display: none;
  11. position: absolute;
  12. background-color: white;
  13. -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  14. -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  15. filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  16. border: 1px solid #cccccc;
  17. bottom: 12px;
  18. left: -50px;
  19. width: 200px;
  20. }
  21. .ol-popup:after, .ol-popup:before {
  22. top: 100%;
  23. border: solid transparent;
  24. content: " ";
  25. height: 0;
  26. width: 0;
  27. position: absolute;
  28. pointer-events: none;
  29. }
  30. .ol-popup:after {
  31. border-top-color: white;
  32. border-width: 10px;
  33. left: 48px;
  34. margin-left: -10px;
  35. }
  36. .ol-popup:before {
  37. border-top-color: #cccccc;
  38. border-width: 11px;
  39. left: 48px;
  40. margin-left: -11px;
  41. }
  42. .popup-title{
  43. font-weight: bold;
  44. border-bottom:1px solid #cccccc;
  45. padding: 5px 8px;
  46. }
  47. .popup-content{
  48. padding: 5px 8px;
  49. }
  50. .ol-popup-closer {
  51. text-decoration: none;
  52. position: absolute;
  53. top: 6px;
  54. right: 6px;
  55. }
  56. .ol-popup-closer:after {
  57. content: "✖";
  58. }

2、popup容器

[html] view plaincopy print?
  1. <div id="map">
  2. <div id="popup" class="ol-popup">
  3. <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  4. <div id="popup-title" class="popup-title"></div>
  5. <div id="popup-content" class="popup-content"></div>
  6. </div>
  7. </div>

3、实现js

[javascript] view plaincopy print?
  1. var container = document.getElementById('popup');
  2. var content = document.getElementById('popup-content');
  3. var title = document.getElementById('popup-title');
  4. var closer = document.getElementById('popup-closer');
  5. closer.onclick = function(){
  6. container.style.display = 'none';
  7. closer.blur();
  8. return false;
  9. };
  10. var overlay = new ol.Overlay({
  11. element: container
  12. });
  13. map.addOverlay(overlay);
[javascript] view plaincopy print?
  1. map.on('click', function(evt) {
  2. var coordinate = evt.coordinate;
  3. var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
  4. coordinate, 'EPSG:4326', 'EPSG:4326'));
  5. overlay.setPosition(coordinate);
  6. content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
  7. '</code>';
  8. container.style.display = 'block';
  9. title.innerHTML = "提示信息";
  10. title.style.display = 'block';
  11. map.getView().setCenter(coordinate);
  12. });

示例完整代码如下：

[html] view plaincopy print?
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Ol3 popup</title>
  5. <link rel="stylesheet" type="text/css" href="http://localhost/ol3/css/ol.css"/>
  6. <style type="text/css">
  7. body, #map {
  8. border: 0px;
  9. margin: 0px;
  10. padding: 0px;
  11. width: 100%;
  12. height: 100%;
  13. font-size: 13px;
  14. }
  15. .ol-popup {
  16. display: none;
  17. position: absolute;
  18. background-color: white;
  19. -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  20. -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  21. filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  22. border: 1px solid #cccccc;
  23. bottom: 12px;
  24. left: -50px;
  25. width: 200px;
  26. }
  27. .ol-popup:after, .ol-popup:before {
  28. top: 100%;
  29. border: solid transparent;
  30. content: " ";
  31. height: 0;
  32. width: 0;
  33. position: absolute;
  34. pointer-events: none;
  35. }
  36. .ol-popup:after {
  37. border-top-color: white;
  38. border-width: 10px;
  39. left: 48px;
  40. margin-left: -10px;
  41. }
  42. .ol-popup:before {
  43. border-top-color: #cccccc;
  44. border-width: 11px;
  45. left: 48px;
  46. margin-left: -11px;
  47. }
  48. .popup-title{
  49. font-weight: bold;
  50. border-bottom:1px solid #cccccc;
  51. padding: 5px 8px;
  52. }
  53. .popup-content{
  54. padding: 5px 8px;
  55. }
  56. .ol-popup-closer {
  57. text-decoration: none;
  58. position: absolute;
  59. top: 6px;
  60. right: 6px;
  61. }
  62. .ol-popup-closer:after {
  63. content: "✖";
  64. }
  65. </style>
  66. <script type="text/javascript" src="http://localhost/ol3/build/ol.js"></script>
  67. <script type="text/javascript" src="http://localhost/jquery/jquery-1.8.3.js"></script>
  68. <script type="text/javascript">
  69. function init(){
  70. var format = 'image/png';
  71. var bounds = [73.4510046356223, 18.1632471876417,
  72. 134.976797646506, 53.5319431522236];
  73. var untiled = new ol.layer.Image({
  74. source: new ol.source.ImageWMS({
  75. ratio: 1,
  76. url: 'http://localhost:8081/geoserver/lzugis/wms',
  77. params: {'FORMAT': format,
  78. 'VERSION': '1.1.1',
  79. LAYERS: 'lzugis:capital',
  80. STYLES: ''
  81. }
  82. })
  83. });
  84. var projection = new ol.proj.Projection({
  85. code: 'EPSG:4326',
  86. units: 'degrees'
  87. });
  88. var container = document.getElementById('popup');
  89. var content = document.getElementById('popup-content');
  90. var title = document.getElementById('popup-title');
  91. var closer = document.getElementById('popup-closer');
  92. closer.onclick = function(){
  93. container.style.display = 'none';
  94. closer.blur();
  95. return false;
  96. };
  97. var overlay = new ol.Overlay({
  98. element: container
  99. });
  100. map.addOverlay(overlay);
  101. var map = new ol.Map({
  102. controls: ol.control.defaults({
  103. attribution: false
  104. }),
  105. target: 'map',
  106. layers: [untiled],
  107. overlays: [overlay],
  108. view: new ol.View({
  109. projection: projection
  110. })
  111. });
  112. map.getView().fitExtent(bounds, map.getSize());
  113. map.on('click', function(evt) {
  114. var coordinate = evt.coordinate;
  115. var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
  116. coordinate, 'EPSG:4326', 'EPSG:4326'));
  117. overlay.setPosition(coordinate);
  118. content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
  119. '</code>';
  120. container.style.display = 'block';
  121. title.innerHTML = "提示信息";
  122. title.style.display = 'block';
  123. map.getView().setCenter(coordinate);
  124. });
  125. }
  126. </script>
  127. </head>
  128. <body onLoad="init()">
  129. <div id="map">
  130. <div id="popup" class="ol-popup">
  131. <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  132. <div id="popup-title" class="popup-title"></div>
  133. <div id="popup-content" class="popup-content"></div>
  134. </div>
  135. </div>
  136. </body>
  137. </html>

实现后的效果如下：

转载于:https://www.cnblogs.com/telwanggs/p/6972905.html

（转）OpenLayers3基础教程——OL3之Popup相关推荐

  1. OpenLayers3基础教程——OL3之Popup

    概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用Overlay取代OL2的Popup功能. 接口简单介绍: overlay跟ol.control.Control一样,是一 ...

  2. （转）OpenLayers3基础教程——OL3基本概念

    http://blog.csdn.net/gisshixisheng/article/details/46756275 OpenLayers3基础教程--OL3基本概念 从本节开始,我会陆陆续续的更新 ...

  3. OpenLayers3基础教程——OL3 介绍control

    概述: 本文讲述的是Ol3中的control的介绍和应用. OL2和OL3 control比较: 相比较Ol2的control,OL3显得特别少,下图分别为Ol2和Ol3的control: Ol2的c ...

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

    从本节开始,我会陆陆续续的更新有关OL3的相关文章--OpenLayers3基础教程,欢迎大家关注我的博客,同时也希望我的博客能够给大家带来一点帮助. 概述: OpenLayers 3对OpenLay ...

  5. （转） OpenLayers3基础教程——OL3 介绍control

    http://blog.csdn.net/gisshixisheng/article/details/46761535 概述: 本文讲述的是Ol3中的control的介绍和应用. OL2和OL3 co ...

  6. （转）OpenLayers3基础教程——OL3 介绍interaction

    http://blog.csdn.net/gisshixisheng/article/details/46808647 概述: 本节主要讲述OL3的交互操作interaction,重点介绍draw,s ...

  7. （转） OpenLayers3基础教程——加载资源

    概述: 本节讲述如何在Ol3中加载wms图层并显示到地图中. Ol3下载: 你可以在OL官网去下载,下载地址为http://openlayers.org/download/,也可以去我的百度云盘下载, ...

  8. Chrome扩展开发基础教程（附HelloWorld）

    1 概述 Chrome扩展开发的基础教程,代码基于原生JS+H5,教程内容基于谷歌扩展开发官方文档. 2 环境 Chrome 88.0.4324.96 Chromium 87.0.4280.141 B ...

  9. Spring Cloud Alibaba基础教程：使用Nacos实现服务注册与发现

    自Spring Cloud Alibaba发布第一个Release以来,就备受国内开发者的高度关注.虽然Spring Cloud Alibaba还没能纳入Spring Cloud的主版本管理中,但是凭 ...

最新文章

  1. AI 助力金融后，中美金融科技领域最大的差距是什么？
  2. 由《我也能做CTO》引起的作者与读者的交流
  3. Oracle取最大/最小值函数
  4. PSPNet-tensorflow实现并训练数据
  5. android xml java混合编程_Android | 自动调整文本大小的 TextViews
  6. Nginx中的break和last
  7. ArrayList 使用迭代抛出ConcurrentModificationException解决方法
  8. Prototype使用$$()函数
  9. PHP一维数组转二维数组正则表达式
  10. moment.js的方法总结
  11. MATLAB与高等数学--dsolve命令
  12. 爬虫 爬取豆瓣高分电影信息
  13. bc vc投资_天使投资、VC 以及 PE 的区别是什么？
  14. AndroidIos打包
  15. C语言程序设计教程（第三版）课后习题6.7
  16. 用Python解决数据结构与算法问题（一）：Python基础
  17. 目录打开显示提示文件或目录损坏且无法读取、文件或目录损坏且无法读取的破解之道
  18. 一文搞懂指针，指针的指针，悬浮指针，野指针
  19. 大学excel题库含答案_Excel题库(附答案).doc
  20. python语言合法命名有哪些-以下不是 Python 语言合法命名的是 :( )_学小易找答案...

热门文章

  1. wireshark协议插件开发--官方文档中文翻译
  2. 软连接与硬链接的区别，以及如何删除软链接
  3. （41）FPGA四种常用逻辑门（异或门）
  4. （40）Verilog HDL锁存器设计
  5. android qt 串口通信,Qt串口通信开发之QSerialPort模块详细使用方法与实例
  6. linux编译测试代码,rtc在linux上的测试代码
  7. diag开关什么意思_1P空气开关便宜、好用，为什么电工师傅却要我们买2P空气开关？...
  8. 动态链接库的问题解决
  9. 小米更新显示非官方rom_魔趣ROM 安装刷入教程（小白新手）
  10. linux下的进程间通信-管道及共享内存