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// ...
随机推荐
- CSS 的overflow:hidden (清除浮动)
verflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很 了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...
- tomcat结构图
- UDP和TCP的区别？
区别总结: 1.TCP面向连接,UDP的面向无连接的,即发送数据之前不需要建立简介. 2.TCP提供可靠的数据传输,有发送应答机制,超时重传机制,错误校验机制,流量控制机制保证传输的安全,不丢失,不重 ...
- PHP CURL 异步测试
需求, 请求第三方接口获取数据, 单个接口0.1秒, 如果有10万个接口, 那么岂不是得1万秒才能请求完, 所以使用PHP异步测试一下, 其他的方法还有: 1.使用队列, SupserVior 开多个 ...
- 详解如何挑战4秒内百万级数据导入SQL Server（转）
对于大数据量的导入,是DBA们经常会碰到的问题,在这里我们讨论的是SQL Server环境下百万级数据量的导入,希望对大家有所帮助.51CTO编辑向您推荐<SQL Server入门到精通&g ...
- oslo_messaging使用eventlet executor时rpc无法调用的问题
python2.7.5 oslo.messaging==9.8.0 现象: 从debug日志可以看到rpcServer接收到了rabbitmq的消息, 但是没有调用endpoints中的相应方法 分析 ...
- jeecms v9.3 has a stroed xss vulnerability
转载:https://blog.csdn.net/libieme/article/details/83588929 jeecms v9.3 has a stroed xss vulnerability ...
- Android中Activity和AppcompatActivity的区别(详细解析)
转载 https://blog.csdn.net/today_work/article/details/79300181 继承AppCompatActivity的界面. 如下图所示: copy界面代码 ...
- N!中素因子p的个数 【数论】
求N!中素因子p的个数,也就是N!中p的幂次 公式为:cnt=[n/p]+[n/p^2]+[n/p^3]+...+[n/p^k]; 例如:N=12,p=2 12/2=6,表示1~12中有6个数是2的倍 ...
- Activiti实战01_认识Activiti
什么是Activiti Activiti是为解决工作流而创建的一套流程引擎.举个最简单的例子,请假流程就是一个工作流,从开始到审批到结束,像流一样的贯穿整个流程.在工作中最常见的就是OA了.工作流总是 ...