<!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. <爬虫>利用BeautifulSoup爬取百度百科虚拟人物资料存入Mysql数据库

    网页情况: 代码: import requests from requests.exceptions import RequestException from bs4 import Beautiful ...

  2. C# GDI+编程（二）

    常用的绘图函数 DrawArc绘制一个弧形 示例:graphics.DrawArc(pen,,,,,,) 倒数第二个参数,表示起始度数,最后一个参数是弧形的跨越度数.比如起始度数是90,跨越度数是12 ...

  3. vue:父子组件间通信，父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

  4. NtQuerySystemInformation 枚举进程

    函数原型: NTSTATUS WINAPI NtQuerySystemInformation(    _In_      SYSTEM_INFORMATION_CLASS SystemInformat ...

  5. MyBatis配置文件(九)－－mappers映射器

    映射器是MyBatis中最复杂.最核心的组件,本文先介绍映射器的引入方法,其他的在我日后会再做分析和总结. 之前的文章中有提到过,映射器是由一个接口和一个XML配置文件组成,XML文件中需要定义一个命 ...

  6. bootstrap-table的简要使用

    bttable功能强大!同时支持申明方式和编程方式来使用!是wenzhixin主导开发一款开源的表格控件! 文档比较详尽,但要求初学者已经比较熟悉js,jquey等基本内容,否则可能许多代码无法阅读! ...

  7. 安装配置flask环境

    安装 Flask 好的,让我们开始吧! 现在我们必须开始安装 Flask 以及一些我们会用到的扩展.我首选的方式就是创建一个虚拟环境,这个环境能够安装所有的东西,而你的主 Python 不会受到影响. ...

  8. Redis基本类型与常用命令

    Redis基本类型一共有五类: 字符串类型(string): 散列类型(hash): 列表类型(list): 集合类型(sort): 有序集合类型(zset): 在redis中,所有的类型都是被以键值 ...

  9. GC Roots的几种对象

    在java语言里,可作为GC Roots的对象包括下面几种: >虚拟机栈(栈帧中的本地变量表)中的引用的对象: >方法区中类静态属性引用的对象: >方法区中常量引用的对象: > ...

  10. vue项目中实现扫码功能

    项目地址:https://github.com/wkl007/vue-scan-demo.git 项目主要是做的一个扫码的功能 核心代码为 <div class="scan" ...