<!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. mysql数据库创建数据库创建用户授权

    Liunx下登录数据库 >mysql -u 用户名 -p 创建myblog用户,本地登录,口令是myblog create user 'myblog'@'localhost' identifie ...

  2. 基于baseline和stochastic gradient descent的个性化推荐系统

    文章主要介绍的是koren 08年发的论文[1],  2.1 部分内容(其余部分会陆续补充上来). koren论文中用到netflix 数据集, 过于大, 在普通的pc机上运行时间很长很长.考虑到写文 ...

  3. Linux文件句柄数配置

    1.单程序句柄数限制 查看配置的句柄数:ulimit -n cat /etc/security/limits.conf 参考配置: * soft nofile 655360* hard nofile ...

  4. visio去除直线交叉处的歪曲

    1 问题描述 Visio画图时,两根直线交叉时,总是默认会出现一个跨线的标志,如下图所示: 2 解决办法 在2007前的版本,可以通过以下方式解决: 选中线条,然后菜单的格式->行为->连 ...

  5. vue 报错：Cannot read property '_wrapper' of undefined

    我的情况是@click="xx" ,而xx函数未定义

  6. php循环语句（一）

    PHP 循环语句 什么是循环语句? 在不少实际问题中有许多具有规律性的重复操作,因此在程序中就需要重复执行某些语句.一组被重复执行的语句称之为循环体,能否继续重复,决定循环的终止条件.循环结构是在一定 ...

  7. Angular-cli 的安装

    一.先安装node.js(若已经安装就跳过) 1.下载node.js安装包 http://nodejs.cn 按照自己电脑的配置,下载相应的安装包(我下载的是 node-v6.10.3-x64.msi ...

  8. netcore进程内(InProcess)托管和进程外(out-of-Process)托管

    当一个 ASP.NET Core 应用程序执行的时候,.NET 运行时会去查找 Main()方法,因为它是这个应用程序的起点. 然后,Main()方法调用静态类WebHost中的静态方法CreateD ...

  9. css3之弹性盒模型(Flex Box)

    CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...

  10. Leetcode90. Subsets II子集2

    给定一个可能包含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重复的子集. 示例: 输入: [1,2,2] 输出: [ [2], [1], [1,2,2], [2 ...