openlayers的popup实现
|
功能需求如下： 在一张地图上，我们希望点击相应的点之后，能够弹框显示该点的具体信息。 最终效果如下：（由于某些原因，有关信息不予显示）
首先，要完成该图的效果，要首先保证你了解了下面的相关知识： 1.如果你的openlayers工程和Geoserver部署在不同的服务器上，则，你需要解决跨域的问题。 无论你是通过WMS的GetFeatureInfo或者是通过WFS的GetFeature来实现，最终都是以Ajax的方式来发起请求。 下图是用firebug来捕捉点击事件，可以看出，X-Requested-With:XMLHttpRequest 所以该请求通过Ajax方式发起。 讲到这个地方，有必要温习一下几个知识点：同源策略，跨域访问。 注：参考 袭烽-《同源策略和跨域访问 》 该文章写的很好很全，建议读者抽空细读。 （1）何谓同源策略:（Same origin policy） （2）跨域访问： 2.具体如何实现跨域访问 (1) JSONP 我是通过设置Proxy的方式来实现跨域访问的，具体做法，请看我上一篇的文章：Tomcat6 配置cgi openlayers跨域访问 下面贴上我程序中重要部分的代码： <!DOCTYPE html>
<html>
<head>
<title>ChinaMap1</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=GBK">
<meta name="language" content="java">
<meta name="import" content="java.util.*,java.io.*">
<style type="text/css">
#map {
width: 1200px;
height: 900px;
border: 0.5px solid black;
}
</style>
<script src="lib/OpenLayers.js"></script>
<script src="lib/proj4js/lib/proj4js-combined.js"></script>
<script src="lib/transform.js"></script>
<script type="text/javascript">
OpenLayers.ProxyHost = "cgi/proxy.cgi?url=";
var map;
var untiled;
var tiled;
var layer_teleport;
var tpoint;
var xmlHttp;
var popup;//全局的变量，popup
//var result;
function init() {
// if this is just a coverage or a group of them,disable a few items,// and default to jpeg format
format = 'image/png';
var bounds = new OpenLayers.Bounds(-2578821.947218156,2367106.345797384,2092054.120327893,6385320.290080428);
var options = {
controls : [],maxExtent : bounds,maxResolution : 22933.484092629773,projection : "EPSG:222221",units : 'm'
};
map = new OpenLayers.Map('map',options);
// setup tiled layer
tiled = new OpenLayers.Layer.WMS("Geoserver layers - Tiled","http://localhost:8090/geoserver/ChinaMap/wms",{
LAYERS : 'MySqlChinaMap',STYLES : '',format : format,tiled : true,tilesOrigin : map.maxExtent.left + ','
+ map.maxExtent.bottom
},{
buffer : 0,displayOutsideMaxExtent : true,isBaseLayer : true,yx : {
'EPSG:222221' : false
}
});
// setup single tiled layer
untiled = new OpenLayers.Layer.WMS("Geoserver layers - Untiled",format : format
},{
singleTile : true,ratio : 1,yx : {
'EPSG:222221' : false
}
});
map.addLayers([ untiled,tiled ]);
layer_teleport = new OpenLayers.Layer.WMS("Teleport",{
layers : 'ChinaMap:viewteleportgeo',INFO_FORMAT : 'application/vnd.ogc.gml',transparent : true
},{
isBaseLayer : false
});
map.addLayer(layer_teleport);
//添加弹出框，popup
popup = new OpenLayers.Control.WMSGetFeatureInfo(
{
url : 'http://localhost:8090/geoserver/ChinaMap/wms',title : 'Identify features by clicking',queryVisible : true,layers : [ layer_teleport ],eventListeners : {
getfeatureinfo : function(event) {
var attributes;
var teleportName = null;
var lat = 0;
var long = 0;
var latDegrees = 0;
var latMinutes = 0;
var latSeconds = 0;
var longDegrees = 0;
var longMinutes = 0;
var longSeconds = 0;
var picture;
var result = null;
var feature = event.features[0];
if (feature) {
attributes = feature.attributes;
teleportName = attributes.TeleportName;
latDegrees = attributes.LatDegrees;
latMinutes = attributes.LatMinutes;
latSeconds = attributes.LatSeconds;
lat = parseFloat(latDegrees)
+ parseFloat(latMinutes / 60)
+ parseFloat(latSeconds / 3600);
lat = Math.round(lat * 100) / 100;//保留小数点后两位
longDegrees = attributes.LongDegrees;
longMinutes = attributes.longMinutes;
longSeconds = attributes.longSeconds;
long = parseFloat(longDegrees)
+ parseFloat(longMinutes / 60)
+ parseFloat(longSeconds / 3600);
long = Math.round(long * 100) / 100;//保留小数点后两位
picture = attributes.picture;
console.log(picture);
result = "<div> <table> <tr> <td> <strong> 名称：</strong></td> <td>"
+ teleportName
+ "</td></tr> <tr> <td> <strong> 纬度：</strong></td><td>"
+ lat
+ "</td></tr> <tr><td><strong>经度：</strong></td><td>"
+ long
+ "</td></tr><tr><td colspan="2"> <img src=""+picture+"" alt=""+teleportName
+""/></td></tr></table></div>";
}
if (result) {
map.addPopup(new OpenLayers.Popup.FramedCloud(
"chicken",map.getLonLatFromViewPortPx(event.xy),null,result,true),true);
}
}
}
});
map.addControl(popup);
popup.activate();
//页面增加切换，勾选图层的按钮
map.addControl(new OpenLayers.Control.LayerSwitcher());
// build up all controls
map.addControl(new OpenLayers.Control.PanZoomBar({
position : new OpenLayers.Pixel(2,15)
}));
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.Scale($('scale')));
map.addControl(new OpenLayers.Control.MousePosition({
element : $('location')
}));
console.log("Hello");
map.zoomToExtent(bounds);
//注册map的鼠标单击监听事件,关键字“click”代表单击鼠标
map.events.register("click",map,onMapClick);
}
function onMapClick(e) {
var lonlat = map.getLonLatFromViewPortPx(e.xy);
// Lamber 转为 经纬度
var p = ChinaMap.transformToLonLat(lonlat.lon,lonlat.lat);
document.getElementById("lon").value = p.x;
document.getElementById("lat").value = p.y;
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
经度：
<input id="lon" type="text" disabled="disabled">
纬度：
<input id="lat" type="text" disabled="disabled">
</body>
</html>
注：代码中的地图坐标EPSG:222221是自定义的，因为Geoserver默认无此坐标系。
至此完成。 由于刚刚接触javascript，所以代码写的特别丑，目前程序还在改动，有新功能还会更新推进。 GIS开发的新手,有误之处请各位不吝赐教。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |