<!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. Delphi版俄罗斯方块-前奏

    前言 基础知识讲了很多,但是并没有串联起来,所以我最近一直在准备个小项目,但是这个项目的要求不含有数据库部分,也就是数据持久存储的功能,此外不能含有网络功能,它只是对基础知识的一个总结,最后一点是这个 ...

  2. NEO4J的安装配置及使用总结

    #工具:使用neo4j desktop版本# 一,下载工具 可以到官方网站上下载桌面版或者community版本的,下载地址:https://neo4j.com/, 安装好. 二.配置环境变量 本文参 ...

  3. jquery旋转插件rotate参数说明

    具体可见:http://www.jianshu.com/p/b632a1ed6a57

  4. springboot-actuator监控的401无权限访问

    在pom.xml里边添加 <dependency> <groupId>org.springframework.boot</groupId> <artifact ...

  5. iPadOS 更新日志 - 持续更新中

    本文只是为了简单记录一下每个正式版本发布时间和更新内容,只有这个初衷,从2019年9月25日开始,将会持续更新. iPadOS 13.1 - 2019年9月25日 经全新命名的 iPadOS 是一款强 ...

  6. Android开发 Camera2开发_2_预览分辨率或拍照分辨率的计算

    前言 不管在Camera1或者Camera2在适配不同手机/不同使用场景的情况下都需要计算摄像头里提供的分辨率列表中最合适的那一个分辨率.所以在需要大量机型适配的app,是不建议不经过计算直接自定义分 ...

  7. Angularjs 1 使用filter格式化输出href

    Angularjs版本: 1.3.5 工作中,由于是多级菜单,如果上级菜单为空,就会访问Angularjs 默认的state,然后再展开菜单,我找资料之后,才知道是通过filter来格式化输出数据的, ...

  8. 全栈之路-微信小程序-SKU开发（分析）

    SKU是整个小程序中最难完成的部分了,好好记录一下SKU,主要是想记录一下 从最开始拿到这个业务到最终完成这个功能期间的思考过程,至于代码什么的,记录也好,不记录也行,再看! 一.从思路说起 1.SK ...

  9. 微信小程序——页面滑动事件

    wxml: <view id="id" class = "ball" bindtap = "handletap" bindtouchs ...

  10. Python字符串切片操作知识详解

    Python字符串切片操作知识详解 这篇文章主要介绍了Python中字符串切片操作 的相关资料,需要的朋友可以参考下 一:取字符串中第几个字符 print "Hello"[0] 表 ...