<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>使用弹出窗口</title>

    <link rel="stylesheet" href="./OpenLayers-2.12/theme/default/style.css" type="text/css" />

    <script src="./OpenLayers-2.12/lib/OpenLayers.js"></script>

    <script type="text/javascript">

        function init(){

            var map = new OpenLayers.Map("ch3_popups");

            var layer = new OpenLayers.Layer.OSM("OpenStreetMap");

            map.addLayer(layer);

            map.addControl(new OpenLayers.Control.LayerSwitcher());

            map.setCenter(new OpenLayers.LonLat(0,0), 2);

            var pointLayer = new OpenLayers.Layer.Vector("Features", {

                projection: "EPSG:900913"

            });

            map.addLayer(pointLayer);

            //创建一些随机的要素

            var icons = [

                "alligator.png",

                "chicken-2.png",

                "elephants.png",

                "pets.png",

                "snakes.png",

                "wildlifecrossing.png",

                "animal-shelter-export.png",

                "cow-export.png",

                "frog-2.png",

                "pig.png",

                "spider.png",

                "zoo.png",

                "ant-export.png",

                "deer.png",

                "lobster-export.png",

                "rodent.png",

                "tiger-2.png",

                "bats.png",

                "dolphins.png",

                "monkey-export.png",

                "seals.png",

                "turtle-2.png",

                "birds-2.png",

                "duck-export.png",

                "mosquito.png",

                "shark-export.png",

                "veterinary.png",

                "butterfly-2.png",

                "eggs.png",

                "penguin-2.png",

                "snail.png",

                "whale-2.png"

            ];

            // 创建一些随机的要素点

            var pointFeatures = [];

            for(var i=0; i< 150; i++) {

                var icon = Math.floor(Math.random() * icons.length);

                var px = Math.random() * 360 - 180;

                var py = Math.random() * 170 - 85;

                // Create a lonlat instance and transform it to the map projection.

                var lonlat = new OpenLayers.LonLat(px, py);

                lonlat.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));

                var pointGeometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);

                var pointFeature = new OpenLayers.Feature.Vector(pointGeometry, null, {

                    pointRadius: 16,

                    fillOpacity: 0.7,

                    externalGraphic: 'http://localhost:8080/openlayers-cookbook/recipes/data/icons/'+icons[icon]

                });

                pointFeatures.push(pointFeature);

            }

            pointLayer.addFeatures(pointFeatures);

            // 添加到触发矢量图层上的事件需要选择功能控制

            var selectControl = new OpenLayers.Control.SelectFeature(pointLayer, {

                hover: true,

                onSelect: function(feature) {

                    var layer = feature.layer;

                    feature.style.fillOpacity = 1;

                    feature.style.pointRadius = 20;

                    layer.drawFeature(feature);

                    var content = "<div><strong>Feature:</strong> <br/>" + feature.id +

                        "<br/><br/><strong>Location:</strong> <br/>" + feature.geometry +"</div>";

                    var popup = new OpenLayers.Popup.FramedCloud(

                    feature.id+"_popup",

                    feature.geometry.getBounds().getCenterLonLat(),

                    new OpenLayers.Size(250, 100),

                    content,

                    null,

                    false,

                    null);

                    feature.popup = popup;

                    map.addPopup(popup);

                },

                onUnselect: function(feature) {

                    var layer = feature.layer;

                    feature.style.fillOpacity = 0.7;

                    feature.style.pointRadius = 16;

                    feature.renderIntent = null;

                    layer.drawFeature(feature);

                    map.removePopup(feature.popup);

                }

            });

            map.addControl(selectControl);

            selectControl.activate();

        }

    </script>

</head>

<body onload="init()">

<!-- 地图 DOM 元素 -->

    <div id="ch3_popups" style="width: 100%; height: 100%;"></div>

</body>

</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. PKU--1976 A Mini Locomotive （01背包）

    题目http://poj.org/problem?id=1976 分析:给n个数,求连续3段和的最大值. 这个题目的思考方式很像背包问题. dp[i][j]表示前i个数字,放在j段的最大值. 如果选了 ...

  2. ES6之主要知识点(二) 变量的解构赋值。默认值

    引自http://es6.ruanyifeng.com/#docs/destructuring 数组解构赋值 默认值 对象解构赋值 用途 1.数组的解构赋值 let [a, b, c] = [1, 2 ...

  3. Leetcode513. Find Bottom Left Tree Value找树左下角的值

    给定一个二叉树,在树的最后一行找到最左边的值. 示例 1: 输入: 2 / \ 1 3 输出: 1 示例 2: 输入: 1 / \ 2 3 / / \ 4 5 6 / 7 输出: 7 注意: 您可以假 ...

  4. API 练习 第一篇

    练习API   CreateSemaphoreCreateEvent ReleaseSemapWaitForSingleObject  CloseHandleInitializeCriticalSec ...

  5. 跟我一起在Win10中用VMware安装Ubuntu

    VMware下安装Ubuntu 打开VMware,创建虚拟机: 点击运行虚拟机,报错为 解决办法为 大功告成,我们已经在Win10中用VMware安装Ubuntu了

  6. 安卓自定义View进阶-Canvas之画布操作 转载

    安卓自定义View进阶-Canvas之画布操作 转载 https://www.gcssloop.com/customview/Canvas_Convert 本来想把画布操作放到后面部分的,但是发现很多 ...

  7. python re.sub详解

    re.sub(pattern, repl, string, count=0, flags=0) re.sub的含义,作用,功能就是: 对于输入的一个字符串,利用正则表达式(的强大的字符串处理功能),去 ...

  8. css的其他相关样式属性

    一.颜色 1.预定义的表示颜色的单词 red,black.gray,pink...... 2.16进制表示 # + 6位16进制的数字0 1 2 3 4 5 6 7 8 9 a b c d e f 如 ...

  9. SQL server插入数据后,获取自增长字段的值

      ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 insert into Tb_People(uname,er ...

  10. c++设计模式：代理模式

    代理模式的实现和visitor实现有一曲同工之妙.这里就不多说了,也是实现set_delegate接口,以及回调函数处理接口. 主要区别在于: visitor主要是把信息回调之后就不管了. 代理模式主 ...