<!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. HttpException (0x80004005): 无法连接到 SQL Server 会话数据库

    ASP.NET 项目运行时出现错误提示:[HttpException (0x80004005): 无法连接到 SQL Server 会话数据库.] ,后排查问题发现是由于项目的Session模式是使用 ...

  2. HTML5定位功能，实现在百度地图上定位

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. [POI2017]Sabota【观察+树形Dp】

    Online Judge:Bzoj4726 Label:观察,树形Dp,水题 题目描述 某个公司有n个人, 上下级关系构成了一个有根树.公司中出了个叛徒(这个人不知道是谁). 对于一个人, 如果他下属 ...

  4. 【bzoj2120】数颜色 带修莫队

    数颜色 题目描述 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜色的画 ...

  5. C语言中结构体的深拷贝和浅拷贝

    C++ 的浅拷贝和深拷贝(结构体) 拷贝有两种:深拷贝,浅拷贝 浅拷贝:拷贝过程中是按字节复制的,对于指针型成员变量只复制指针本身,而不复制指针所指向的目标 (1)结构体中不存在指针成员变量时 typ ...

  6. KOA 学习（八） koa-bodyparser

    此控件支持Josn,form,text类型 用法 var Koa = require('koa'); var bodyParser = require('koa-bodyparser'); var a ...

  7. Hadoop 伪分布式安装配置

  8. AppServer初始化渠道

    1.写了一个拦截器(RequestInterceptor) 2.里边有个有一个doRequest()方法 3.初始化渠道的方法(initRequestContext()) -------------- ...

  9. import schedule ImportError: No module named schedule

    安装pip sudo apt-get install python-pip 安装schedule模块 pip install schedule PS: 如果已经安装pip,可能出现以下问题,按照提示重 ...

  10. Wamp 扩展Oracle Oci

    参考网址: http://www.cnblogs.com/azhw/p/4599632.html