OpenLayers 3 弹出框（popup）

 

OpenLayers 3 之 弹出框（popup）

标签： OpenLayersJavaScript地图弹出框popup

2015-03-18 17:05  409人阅读  评论(0)  收藏  举报

  分类：

WebGIS（28） 

OpenLayers（17） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

摘要

         上回说到，加载完地图后，我们想更多一点交互，而不仅仅是缩放和平移，赋予地图多一点的生命 ~-~！点击地图，它至少应该知道我是在哪里点击了，并且弹出一个气球类似的框框告诉我！这次，我们就来尝试给我们的地图加上这个能力！

         PS：这次的例子是基于上一篇的加载地图的代码的哦！在上一篇的基础上增删修改，所以读读前一篇是很有必要的哦！

 

正文

        在OpenLayers2.x的那个年代 ~-~|，我们知道OpenLayers有一个类（Popup）是专门负责这项“弹出气球”功能的。现在，到了3.x的时代，不同于OpenLayers 2.x，OpenLayers 3.x去除了Popup类，新增加了Overlay类，用于实现与Popup相同的弹出效果。在OpenLayers3.x的Overlay类定义中（定义这里找），Overlay的初始化属性如下：

[javascript]  view plain copy

1. /** 
2. * @enum {string} 
3. */  
4. ol.OverlayProperty = {  
5.   ELEMENT: 'element',  
6.   MAP: 'map',  
7.   OFFSET: 'offset',  
8.   POSITION: 'position',  
9.   POSITIONING: 'positioning'  
10. };  

 

其中，ELEMENT代表要转换成overlay的HTML元素，可能是一个DIV标签，MAP是要绑定的地图对象，POSITION是点击时Popup放置的位置。

所以说为了产生弹出框的效果，那么HTML文件中要有相应的元素，那么我们就定义一些元素：

[html]  view plain copy

1.  id="popup" class="ol-popup">  
2.     <a< span=""> href="#" id="popup-closer" class="ol-popup-closer">  
3.      id="popup-content" style="300px; height:120px;">

  

•   

 

这些元素的CSS样式类，在下面的代码中，会贴出来，主要就是一些对popup的美化作用，可以不用太在意哈。

然后取得该元素container，并将获得的元素传入overlay对象：

 

[javascript]  view plain copy

1. var container = document.getElementById('popup');  
2. var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({  
3.   element: container,  
4.   autoPan: true,  
5.   autoPanAnimation: {  
6.     duration: 250   //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.   
7.   }  
8. }));  

 

这样，弹出的框框我们就准备好了。下一步需要为Map绑定点击事件，这样，当我们点击地图上的相应位置时，才会触发弹出框框嘛！

 

 

[javascript]  view plain copy

1. /** 
2.  * Add a click handler to the map to render the popup. 
3.  */  
4. map.addEventListener('click', function(evt) {  
5.   var coordinate = evt.coordinate;  
6.   var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(  
7.       coordinate, 'EPSG:3857', 'EPSG:4326'));  
8.   content.innerHTML = '

   你点击的坐标是：

   ' + hdms + '';  
9.   overlay.setPosition(coordinate);  
10.   map.addOverlay(overlay);  
11. });  

 

 

这里为了最大程度兼容各个浏览器，我们使用了DOM0级绑定事件的方式，event对象（evt）保存着点击的点坐标，在相应的位置显示框框即可（overlay.setPosition()），最后，将popup加到地图上。

OK！至此，我们可以测试一下了： DUANG！ 是不是有“加特效”的感觉？~-~|

 

 

最后，附上完整代码

HTML文件

[html]  view plain copy

1. >  
2. <html< span=""> lang="en">  
3.     
4.     <meta< span=""> charset="utf-8">  
5.      rel="stylesheet" href="http://openlayers.org/en/v3.3.0/css/ol.css" type="text/css">  
6.       
7.       
8.     
9.     
10.     

    My Map

      
11.      id="map" class="map">  
12.         <div< span=""> id="popup" class="ol-popup">  
13.              href="#" id="popup-closer" class="ol-popup-closer">  
14.             <div< span=""> id="popup-content" style="300px; height:120px;">

  

•           
•       
•      src="http://openlayers.org/en/v3.3.0/build/ol.js" type="text/javascript">  
•     <script< span=""> type="text/javascript">  
•       map = new ol.Map({  
•         target: 'map',  
•         layers: [  
•           new ol.layer.Tile({  
•             source: new ol.source.MapQuest({layer: 'sat'})  
•           })  
•         ],  
•         view: new ol.View({  
•           center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),  
•           zoom: 4  
•         })  
•       });  
•       
•     <script< span=""> src="popup.js" type="text/javascript">  
•     
•   

 

 

JS文件（popup.js）

 

[javascript]  view plain copy

1. /** 
2.  * Elements that make up the popup. 
3.  */  
4. var container = document.getElementById('popup');  
5. var content = document.getElementById('popup-content');  
6. var closer = document.getElementById('popup-closer');  
7.   
8.   
9. /** 
10.  * Add a click handler to hide the popup. 
11.  * @return {boolean} Don't follow the href. 
12.  */  
13. closer.onclick = function() {  
14.   overlay.setPosition(undefined);  
15.   closer.blur();  
16.   return false;  
17. };  
18.   
19.   
20. /** 
21.  * Create an overlay to anchor the popup to the map. 
22.  */  
23. var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({  
24.   element: container,  
25.   autoPan: true,  
26.   autoPanAnimation: {  
27.     duration: 250   //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度. 单位为毫秒（ms）  
28.   }  
29. }));  
30.   
31.   
32. /** 
33.  * Add a click handler to the map to render the popup. 
34.  */  
35. map.addEventListener('click', function(evt) {  
36.   var coordinate = evt.coordinate;  
37.   var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(  
38.       coordinate, 'EPSG:3857', 'EPSG:4326'));  
39.   content.innerHTML = '

    你点击的坐标是：

    ' + hdms + '';  
40.   overlay.setPosition(coordinate);  
41.   map.addOverlay(overlay);  
42. });  

 

 

        其中HTML页中的那些CSS样式“.ol-popup:before”是啥意思呢？.ol-popup我们知道，这是定义一个CSS的样式类，在相应的元素中加上class=“ol-popup”就可以使用定义的样式，后面的“：before”表示在相应的元素前面插入相应的样式，“：after”与之同理，只不过是在元素后面插入相应的样式。没有看懂的可以在这里找到说明。

还有还有，为什么要把JS文件引用那几句放元素的最后面呢？

 

[javascript]  view plain copy

 

 

 

        原因是这样的：在文档的元素中包含JavaScript文件，意味着必须等到全部JavaScript都被下载、解析和执行完成以后，才能开始呈现页面的内容（浏览器遇到标签，才开始呈现内容）。所以，对于需要很多JavaScript代码的页面来说，肯定会导致浏览器呈现页面时出现延迟，而延迟的时候，浏览器窗口将是一篇空白！

        当然，对于JavaScript文件需要比较少的页面可以写在中，影响并不大。但毕竟，养成好习惯还是好的哦！~-~

 

 

总结

        这次我们能够知道我们点击的是哪里了！通过简单的坐标比较，我们就知道我们点击的是哪个省，哪个市了。。。

        但是我们总不能就是为了在地图上一通乱点，让地图告诉我坐标吧！- -| 那也太LOW了！我们肯定是看到地图上有什么东西了，比较好奇，所以才去点哦。或者说，你搜索了什么，地图上加载出结果来，你去点，然后才弹出Popup效果。

        这便是我下一篇要说的：矢量图层，使用矢量图层加载来自数据库的内容，并配合popup，呈现出更强的能力！