Geoserver项目开发(四)
查询区域内的基站，并且显示在地图上。
<html:html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=GB2312″>
<title>基站监控</title>
<link href=”<%=request.getContextPath()%>/css/comm.css”
rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
#map {
width: 100%;
height: 516px;
border: 1px solid black;
}
</style>
<script type=”text/javascript”
src=”<%=request.getContextPath()%>/js/common.js”></script>
<script type=’text/javascript’
src='<%=request.getContextPath()%>/dwr/util.js’></script>
<script type=’text/javascript’
src='<%=request.getContextPath()%>/dwr/interface/dwrService.js’></script>
<script type=’text/javascript’
src='<%=request.getContextPath()%>/dwr/engine.js’></script>
<script type=”text/javascript”
src=”<%=request.getContextPath()%>/lib/OpenLayers.js”></script>
<script type=”text/javascript”>
//加载地图
var map;
var layerchina,markers;
function init(){
var bounds = new OpenLayers.Bounds(
121.1511205,40.587702549999996,131.79426949999998,46.57472645
);
var extent = new OpenLayers.Bounds(-180, -90, 180, 90);
var options = {
controls: [new OpenLayers.Control.Navigation(),new OpenLayers.Control.PanPanel(),new OpenLayers.Control.ZoomPanel()],
restrictedExtent: bounds
}
map = new OpenLayers.Map(‘map’,options);
layerchina = new OpenLayers.Layer.WMS( “china”,
//”http://10.21.3.250:8989/geowebcache/service/wms?layers=china”,
“http://10.161.8.39:7989/geowebcache/service/wms?layers=china”,
{
layers: ‘china’,
style: ”,
format: ‘image/png’,
tiled: false,
transparent: true
},
{
numZoomLevels: 20,
reproject: true,
isBaseLayer: true
}
);
map.addLayer(layerchina);
markers = new OpenLayers.Layer.Markers( “Markers” );
map.addLayer(markers);
//map.setCenter(new OpenLayers.LonLat(lon,lat), 11);
map.zoomToExtent(bounds);
}
// 画基站
function drawbts(data){
var json = eval(‘(‘+data+’)’);;
for(var b=0;b<json.bts.length;b++){
var id = parseFloat(“”+json.bts[b].i);
var lot = parseFloat(“”+json.bts[b].o);
var lat = parseFloat(“”+json.bts[b].a);
crebts(id,lat,lot);
}
}
// 画基站
function crebts(id,lon,lat){
size = new OpenLayers.Size(20,40);
calculateOffset = function(size) {
return new OpenLayers.Pixel(-(size.w/2), -size.h); };
icon = new OpenLayers.Icon(
‘<%=request.getContextPath()%>/img/btsgre.png’,
size, null, calculateOffset);
marker = new OpenLayers.Marker(new OpenLayers.LonLat(lat,lon), icon.clone());
marker.setOpacity(0.8);
marker.events.register(‘mousedown’, marker, function(evt) { getBTSDetail(id); OpenLayers.Event.stop(evt); });
markers.addMarker(marker);
}
// 按钮触发事件，调用dwr取一区域中所有基站信息
function showBTS(){
var checkedArea = $(‘areaCode’).value;
// 不对所有区域进行处理，只对个别区域进行处理
if(checkedArea!=-1){
var s = $(‘sarea’).value.split(“,”);
var flag = true;
for(var i = 0; i<s.length; i++){
if(s[i].trim()==checkedArea){
alert(‘已经加载该区域基站!’);
flag = false;
}
}
if(flag){
$(‘sarea’).value += $(‘areaCode’).value+”,”;
getBTSByArea($(‘areaCode’).value);
}
}else{
alert(‘请选择区域!’);
}
}
// dwr查询一区域中所有基站信息
function getBTSByArea(areaCode){
dwrService.getBTSbyArea4Gis(areaCode,function(data){
if(data){
drawbts(data);
}else{
alert(‘该区域没有基站信息!’);
}
});
}
function getBTSDetail(btsCode){
dwrService.getBTSDetail4Gis(btsCode,function(data){
var json = eval(‘(‘+data+’)’);;
for(var b=0;b<json.bts.length;b++){
var id = parseFloat(“”+json.bts[b].i);
var lot = parseFloat(“”+json.bts[b].o);
var lat = parseFloat(“”+json.bts[b].a);
$(‘bts’).innerHTML = “区域名称:”+json.bts[b].m+”;基站编号:”+json.bts[b].i+”;基站名称:”+json.bts[b].n+”;经度:”+json.bts[b].o+”;纬度:”+json.bts[b].a;
}
});
}
</script>
</head>
<body rightmargin=”0″ topmargin=”0″ leftmargin=”0″ bottommargin=”0″ onload=”init()”>
<div id=”map”></div>
<html:form action=”/gisbts.do” method=”post”>
<div id=”bts”></div>
<html:select property=”areaCode”
styleClass=”width: 150px” styleId=”areaCode”>
<html:optionsCollection property=”areas” />
</html:select>
<input type=”hidden” id=”sarea” />
<button id=”stopdoubleStatus” onclick=”showBTS();”>查询基站</button>
</html:form>
</body>
</html:html>
转载自：https://blog.csdn.net/mach365/article/details/5652463
