Geoserver项目开发(四)

最新推荐文章于 2025-06-10 09:04:42 发布

原创最新推荐文章于 2025-06-10 09:04:42 发布 · 5.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#function #stylesheet #html #dwr #json #action

GIS 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个用于展示特定区域内基站位置的应用程序。通过使用OpenLayers库在网页上绘制地图，并利用DWR远程调用服务获取基站数据，实现了基站位置的动态加载与展示。用户可以选择不同区域查询对应的基站分布。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

查询区域内的基站，并且显示在地图上。

bts

<%@ page contentType="text/html; charset=GB2312"%> <%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%> <%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic"%> <%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean"%> <%@ taglib uri="/WEB-INF/arena-html.tld" prefix="arena-html"%> <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>