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// ...
随机推荐
- java RSA验签
这几天在跟一个php的小哥哥联调接口,遇到了一些问题记录下来, 直接上代码吧,亲测有效 import org.slf4j.Logger; import org.slf4j.LoggerFactory; ...
- 在scrapy中将数据保存到mongodb中
利用item pipeline可以实现将数据存入数据库的操作,可以创建一个关于数据库的item pipeline 需要在类属性中定义两个常量 DB_URL:数据库的URL地址 DB_NAME:数据库的 ...
- 怎么解决VirtualBox无法安装增强工具
点击「设备」-「安装增强功能」,然后就弹出下面这个东西,百度和 bing 了很久,终于解决啦~ Unable to insert the virtual optical disk D:\Program ...
- C++【string】用法和例子
/*** * string 基础api复习 * 8 AUG 2018 */ #include <iostream> #include <string> using namesp ...
- 关于判断是安卓还是ios环境跳转下载页
H5项目中判断是安卓还是iOS手机就跳转到不同的下载页,项目如下https://github.com/JserJser/dailyPush/tree/master/daily6/H5 这个项目里面我比 ...
- Odoo文档管理/知识管理应用实践 - 上传附件
测试环境: Odoo8.0 Odoo中的文档管理/知识管理可用于保存采购.销售.生产等一系列业务流程中产生的文件.凭证,可关联到具体的每一笔业务操作:也能用于管理公司的合同.资料,创建知识库以分享内部 ...
- python基础---递归函数 知识点自查填空题
什么是递归函数:在函数中调()叫递归函数. 递归函数最大递归深度是997或998----是()设的限制. 注:如果递归次数太多,就不适合使用递归来解决问题. 递归的缺点: 占(). 递归的优点:会让代 ...
- 简单易学的机器学习算法—基于密度的聚类算法DBSCAN
简单易学的机器学习算法-基于密度的聚类算法DBSCAN 一.基于密度的聚类算法的概述 我想了解下基于密度的聚类算法,熟悉下基于密度的聚类算法与基于距离的聚类算法,如K-Means算法之间的区别. ...
- 技术 | TypeScript
技术 | TypeScript 第一次接触TypeScript还是和一帮兄弟在居民楼里撸每日优鲜App的时候,没有想过那么多,只想可以快速实现和快速落地,于是我们选择ionic这个Hybrid框架 ...
- 时间格式的时间 转json的时候变成正常的string时间20170519
public class JsonDateValueProcessor implements JsonValueProcessor { private String format ="yyy ...