1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.     <title>使用弹出窗口</title>
  6.     <link rel="stylesheet" href="./OpenLayers-2.12/theme/default/style.css" type="text/css" />
  7.     <script src="./OpenLayers-2.12/lib/OpenLayers.js"></script>
  8.     <script type="text/javascript">
  9.         function init(){
  10.             var map = new OpenLayers.Map("ch3_popups");
  11.             var layer = new OpenLayers.Layer.OSM("OpenStreetMap");
  12.             map.addLayer(layer);
  13.             map.addControl(new OpenLayers.Control.LayerSwitcher());
  14.             map.setCenter(new OpenLayers.LonLat(0,0), 2);
  15.             var pointLayer = new OpenLayers.Layer.Vector("Features", {
  16.                 projection: "EPSG:900913"
  17.             });
  18.             map.addLayer(pointLayer);
  19.             //创建一些随机的要素
  20.             var icons = [
  21.                 "alligator.png",
  22.                 "chicken-2.png",
  23.                 "elephants.png",
  24.                 "pets.png",
  25.                 "snakes.png",
  26.                 "wildlifecrossing.png",
  27.                 "animal-shelter-export.png",
  28.                 "cow-export.png",
  29.                 "frog-2.png",
  30.                 "pig.png",
  31.                 "spider.png",
  32.                 "zoo.png",
  33.                 "ant-export.png",
  34.                 "deer.png",
  35.                 "lobster-export.png",
  36.                 "rodent.png",
  37.                 "tiger-2.png",
  38.                 "bats.png",
  39.                 "dolphins.png",
  40.                 "monkey-export.png",
  41.                 "seals.png",
  42.                 "turtle-2.png",
  43.                 "birds-2.png",
  44.                 "duck-export.png",
  45.                 "mosquito.png",
  46.                 "shark-export.png",
  47.                 "veterinary.png",
  48.                 "butterfly-2.png",
  49.                 "eggs.png",
  50.                 "penguin-2.png",
  51.                 "snail.png",
  52.                 "whale-2.png"
  53.             ];
  54.             // 创建一些随机的要素点
  55.             var pointFeatures = [];
  56.             for(var i=0; i< 150; i++) {
  57.                 var icon = Math.floor(Math.random() * icons.length);
  58.                 var px = Math.random() * 360 - 180;
  59.                 var py = Math.random() * 170 - 85;
  60.                 // Create a lonlat instance and transform it to the map projection.
  61.                 var lonlat = new OpenLayers.LonLat(px, py);
  62.                 lonlat.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
  63.                 var pointGeometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
  64.                 var pointFeature = new OpenLayers.Feature.Vector(pointGeometry, null, {
  65.                     pointRadius: 16,
  66.                     fillOpacity: 0.7,
  67.                     externalGraphic: 'http://localhost:8080/openlayers-cookbook/recipes/data/icons/'+icons[icon]
  68.                 });
  69.                 pointFeatures.push(pointFeature);
  70.             }
  71.             pointLayer.addFeatures(pointFeatures);
  72.             // 添加到触发矢量图层上的事件需要选择功能控制
  73.             var selectControl = new OpenLayers.Control.SelectFeature(pointLayer, {
  74.                 hover: true,
  75.                 onSelect: function(feature) {
  76.                     var layer = feature.layer;
  77.                     feature.style.fillOpacity = 1;
  78.                     feature.style.pointRadius = 20;
  79.                     layer.drawFeature(feature);
  80.                     var content = "<div><strong>Feature:</strong> <br/>" + feature.id +
  81.                         "<br/><br/><strong>Location:</strong> <br/>" + feature.geometry +"</div>";
  82.                     var popup = new OpenLayers.Popup.FramedCloud(
  83.                     feature.id+"_popup",
  84.                     feature.geometry.getBounds().getCenterLonLat(),
  85.                     new OpenLayers.Size(250, 100),
  86.                     content,
  87.                     null,
  88.                     false,
  89.                     null);
  90.                     feature.popup = popup;
  91.                     map.addPopup(popup);
  92.                 },
  93.                 onUnselect: function(feature) {
  94.                     var layer = feature.layer;
  95.                     feature.style.fillOpacity = 0.7;
  96.                     feature.style.pointRadius = 16;
  97.                     feature.renderIntent = null;
  98.                     layer.drawFeature(feature);
  99.                     map.removePopup(feature.popup);
  100.                 }
  101.             });
  102.             map.addControl(selectControl);
  103.             selectControl.activate();
  104.         }
  105.     </script>
  106. </head>
  107. <body onload="init()">
  108. <!-- 地图 DOM 元素 -->
  109.     <div id="ch3_popups" style="width: 100%; height: 100%;"></div>
  110. </body>
  111. </html>

OpenLayers使用弹出窗口的更多相关文章

  1. jQuery弹出窗口浏览图片

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/3.htm HTML文件代码: <!DOCTYPE HTML> <html> < ...

  2. EasyUI弹出窗口实例

    效果体验:http://hovertree.com/texiao/jeasyui/1.htm 源代码下载:HovertreeJEasyUI HTML文件代码: <!DOCTYPE html> ...

  3. 让IE8在win7下面能显示使用window.showmodaldialog弹出窗口的地址状态栏

    问题来源:最近又要对老的系统进行改善,由于用到了window.showmodaldialog这个方法弹出窗口,比如从主界面弹出新增或者修改窗口,如下图所示,显示没有地址栏,进行代码修改还要找到相应的文 ...

  4. java selenium (十二) 操作弹出窗口

    selenium 中如何处理弹出窗口 阅读目录 原理 在代码里, 通过         Set<String> allWindowsId = driver.getWindowHandles ...

  5. JSP弹出窗口和模式对话框

    本文转载于其它blog,在此向本文原创者,致意!    JSP 弹出窗口  一.window.open() 基础知识      1.window.open()支持环境:  JavaScript1.0+ ...

  6. [转]js来弹出窗口的详细说明

    1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...

  7. OAF_开发系列08_实现OAF通过Popup参数式弹出窗口（案例）

    20150711 Created By BaoXinjian

  8. 【CefSharp】 禁用右键菜单 与 控制弹出窗口的方式(限版本39.0.0.1)

    这周没什么时间,一开始就在忙一些CefSharp的事情,Win10的研究就放了下来,CefSharp的资料挺少的,但好在是开源的,可以我们便宜的折腾.因为两个的内容都不多,我就合成一篇文章啦. 这还里 ...

  9. jquery-通过js编写弹出窗口

    本文转载 本文主要是通过js动态控制div的高度,css控制浮动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

随机推荐

  1. JavaEE三层架构

    三层架构         三层架构是javaee规范中的推荐架构,传统意义上是分为表示层(UI).业务逻辑层(BLL).数据访问层(DAL).在javaee的开发中,三层架构具体分为表示层(web层) ...

  2. 【bzoj 4671】 异或图

    题目 神仙题啊神仙题 显然这个东西一脸不可求的样子啊,这种东西我们显然需要搞一个容斥什么的 于是设\(g_i\)表示至少存在\(i\)个联通块(联通块内部的边没有要求,联通块和联通块之间不存在边)的方 ...

  3. MVVM基础概念和理解

    在MVVM模式中,View封装UI和UI逻辑,viewmodel封装presentation逻辑,model封装业务逻辑和数据. View类 View的责任是定义屏幕上的结构和外观,在完美的情况下,v ...

  4. 【深度学习】CNN 中 1x1 卷积核的作用

    [深度学习]CNN 中 1x1 卷积核的作用 最近研究 GoogLeNet 和 VGG 神经网络结构的时候,都看见了它们在某些层有采取 1x1 作为卷积核,起初的时候,对这个做法很是迷惑,这是因为之前 ...

  5. 【核心核心】5.Spring【DI】注解方式

    使用注解的方式依赖注入不用提供set方法 1.普通类型的注解 @Value @Value(value="春天") private String name; 2.对象类型的注解 @A ...

  6. MySQL的高可用实现方案之mysql-mmm

    一.环境简述 1.工作逻辑图 2.MySQL-MMM优缺点 优点:高可用性,扩展性好,出现故障自动切换,对于主主同步,在同一时间只提供一台数据库写操作,保证的数据的一致性. 缺点:Monitor节点是 ...

  7. csp-s模拟测试52平均数，序列题解

    题面:https://www.cnblogs.com/Juve/articles/11602244.html 平均数: 第k个平均数不好求,我们考虑二分,转化成平均数小于x的有几个 虑把序列中的每个数 ...

  8. IIS发布web应用程序之再折腾

    最近几个月发布程序比较多,遇到了各种IIS发布web程序后无法访问的问题.原以为对各种问题都已经摸的差不多了,但今天又为一问题折腾了大半天.具体过程祥记如下: 在server2008 R2 64位系统 ...

  9. Python3实用编程技巧进阶

    Python3实用编程技巧进阶  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看的时候可以 ...

  10. PHP之文件的锁定、上传与下载的方法

    1.文件锁定 现在都在讲究什么分布式.并发等,实际上文件的操作也是并发的,在网络环境下,多个用户在同一时刻访问页面,对同一服务器上的同一文件进行着读取,如果,这个用户刚好读到一半,另一个用户就写入了消 ...