OpenLayers使用弹出窗口
<!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使用弹出窗口的更多相关文章
- jQuery弹出窗口浏览图片
效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/3.htm HTML文件代码: <!DOCTYPE HTML> <html> < ...
- EasyUI弹出窗口实例
效果体验:http://hovertree.com/texiao/jeasyui/1.htm 源代码下载:HovertreeJEasyUI HTML文件代码: <!DOCTYPE html> ...
- 让IE8在win7下面能显示使用window.showmodaldialog弹出窗口的地址状态栏
问题来源:最近又要对老的系统进行改善,由于用到了window.showmodaldialog这个方法弹出窗口,比如从主界面弹出新增或者修改窗口,如下图所示,显示没有地址栏,进行代码修改还要找到相应的文 ...
- java selenium (十二) 操作弹出窗口
selenium 中如何处理弹出窗口 阅读目录 原理 在代码里, 通过 Set<String> allWindowsId = driver.getWindowHandles ...
- JSP弹出窗口和模式对话框
本文转载于其它blog,在此向本文原创者,致意! JSP 弹出窗口 一.window.open() 基础知识 1.window.open()支持环境: JavaScript1.0+ ...
- [转]js来弹出窗口的详细说明
1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...
- OAF_开发系列08_实现OAF通过Popup参数式弹出窗口（案例）
20150711 Created By BaoXinjian
- 【CefSharp】 禁用右键菜单 与 控制弹出窗口的方式(限版本39.0.0.1)
这周没什么时间,一开始就在忙一些CefSharp的事情,Win10的研究就放了下来,CefSharp的资料挺少的,但好在是开源的,可以我们便宜的折腾.因为两个的内容都不多,我就合成一篇文章啦. 这还里 ...
- jquery-通过js编写弹出窗口
本文转载 本文主要是通过js动态控制div的高度,css控制浮动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
随机推荐
- Starting MySQL ** mysqld_safe Directory '/var/lib/mysql' for UNIX socket file don't exists
本地虚拟机(CentOS6.8)启动MySQL(MySQL5.6.35)服务失败 [root@VMUest ~]# service mysql status ERROR! MySQL is not r ...
- java后台对上传的图片进行压缩
java开发中经常遇到对图片的处理,JDK中也提供了对应的工具类,不过处理起来很麻烦,Thumbnailator是一个优秀的图片处理的开源Java类库,处理效果远比Java API的好,从API提供现 ...
- PostgreSQL的架构
是最先进的数据库.他的第一个版本在1989年发布,从那时开始,他得到了很多扩展.根据db-enginers上的排名情况,PostgreSQL目前在数据库领域排名第四. 本篇博客,我们来讨论一下Post ...
- 微信小程序之组件的集合（四）
这个主要是来开发book的这个大模块的,看看如何优雅的开发出booked模块! 一.book模块的创建 这个就很简单了,创建一个大的框架是很简单的 二.组件的编写 (1)wxml组件页面的编码 首先是 ...
- C/C++获取系统当前时间
C/C++获取系统当前时间 C库中与系统时间相关的函数定义在<time.h>头文件中, C++定义在<ctime>头文件中. 一.time(time_t*)函数 函数定义如 ...
- HZOI20190819模拟26题解
题面:https://www.cnblogs.com/Juve/articles/11376806.html A. 嚎叫响彻在贪婪的厂房: 是时候学习一下map和set的用法了...... 贪心:区间 ...
- Ionic 日期时间插件
1.插件安装 日期插件 时间插件 备注: 具体 查看 https://github.com/rajeshwarpatlolla/ionic-datepicker https://github.c ...
- 微信audio自动播放（ios播放问题）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js匿名函数与闭包作用
http://www.jb51.net/article/79238.htm 1 闭包允许内层函数引用父函数中的变量,但是该变量是最终值 当mouseover事件调用监听函数时,首先在匿名函数( fun ...
- PAT甲级——A1016 Phone Bills
A long-distance telephone company charges its customers by the following rules: Making a long-distan ...