会python真的可以为所欲为0(回)
380天前
这里还有人吗1(回)
565天前这里还有人吗0(回)
565天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
790天前到处都是羊，不想上班0(回)
870天前
鸽子
0(回)
874天前// 地图 |
var map; |
// 区县行政区划底图 |
var basic; |
// 乡区划图 |
var basic_xiang; |
// 铁路 |
var tielu; |
// 国道 |
var guodao; |
// 省道 |
var shengdao; |
// 主干道 |
var zhugandao; |
// 炮站图层 |
var point; |
// geoserver部署服务的路径,如:http://localhost:8081/geoserver/wms |
var url = gisurl; |
// geowebcache路径 |
var gwc_url = gwcurl; |
// 返回数据的格式 |
var format = 'image/png'; |
// 区县底图 |
var cd_poly = 'cd_gis:quxianxzqhA'; |
// 乡区划图 |
var cd_poly_xiang = 'cd_gis:xiangxzqhA'; |
// 铁路 |
var cd_line_tielu = 'cd_gis:tieluL'; |
// 国道 |
var cd_guodao = 'cd_gis:guodaoA'; |
// 省道 |
var cd_shengdao = 'cd_gis:shengdaoA'; |
// 主干道 |
var cd_zhugandao = 'cd_gis:zhugandaoA'; |
// 作业点 |
var cd_point = 'cd_gis:sys_station_info'; |
// 地图控制器 |
var controls; |
// 弹出框 |
var popup = null; |
// 记录点击事件 |
var event_public = null; |
// 记录点击的经纬度 |
var lonLat; |
/** |
* 设置mapDIV的宽高自适应 |
*/ |
function getwidthheight() { |
$("#map").css({ |
width : '100%', |
height : '95%', |
}); |
} |
function init() { |
// 启用代理,path为http://localhost:8080/cdweather |
OpenLayers.ProxyHost = path + "/cgi/proxy.cgi?url="; |
//getwidthheight(); |
// 创建底图图层 |
basic = new OpenLayers.Layer.WMS("市县边界", gwc_url, { |
layers : 'cd_gis:quxianxzqhA', |
transparent : 'TRUE', |
format : 'image/png' |
}, { |
tileSize : new OpenLayers.Size(256, 256), |
isBaseLayer : true |
}); |
// 创建乡区划图图层 |
basic_xiang = new OpenLayers.Layer.WMS("乡镇边界", gwc_url, { |
layers : 'cd_gis:xiangxzqhA', |
transparent : 'TRUE', |
format : 'image/png' |
}, { |
tileSize : new OpenLayers.Size(256, 256), |
visibility : false, |
isBaseLayer : false |
}); |
// 创建铁路图层 |
tielu = new OpenLayers.Layer.WMS("铁路", gwc_url, { |
layers : 'cd_gis:tieluL', |
transparent : 'TRUE', |
format : 'image/png' |
}, { |
tileSize : new OpenLayers.Size(256, 256), |
visibility : false, |
isBaseLayer : false |
}); |
// 创建国道图层 |
guodao = new OpenLayers.Layer.WMS("国道", gwc_url, { |
layers : 'cd_gis:guodaoA', |
transparent : 'TRUE', |
format : 'image/png' |
}, { |
tileSize : new OpenLayers.Size(256, 256), |
visibility : false, |
isBaseLayer : false |
}); |
// 创建省道图层 |
shengdao = new OpenLayers.Layer.WMS("省道", gwc_url, { |
layers : 'cd_gis:shengdaoA', |
transparent : 'TRUE', |
format : 'image/png' |
}, { |
tileSize : new OpenLayers.Size(256, 256), |
visibility : false, |
isBaseLayer : false |
}); |
// 创建主干道图层 |
zhugandao = new OpenLayers.Layer.WMS("主干道", gwc_url, { |
layers : 'cd_gis:zhugandaoA', |
transparent : 'TRUE', |
format : 'image/png' |
}, { |
tileSize : new OpenLayers.Size(256, 256), |
visibility : false, |
isBaseLayer : false |
}); |
// 创建站点图层 |
point = new OpenLayers.Layer.WMS("炮站", url, { |
LAYERS : cd_point, |
transparent : 'TRUE', |
format : format |
}, { |
displayInLayerSwitcher : false, |
singleTile : true, |
isBaseLayer : false |
}); |
// 创建高亮矢量图层 |
highlightLayer = new OpenLayers.Layer.Vector("Highlighted Features", { |
displayInLayerSwitcher : false, |
isBaseLayer : false |
}); |
// 成都界限 |
var bounds = new OpenLayers.Bounds(103.02255, 30.096338, 104.89183, |
31.444862); |
// 设置参数 |
var options = { |
resolutions : [ 0.0054931640625, 0.00274658203125, 0.001373291015625, |
6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, |
8.58306884765625E-5, 4.291534423828125E-5, |
2.1457672119140625E-5, 1.0728836059570312E-5 ], |
projection : new OpenLayers.Projection('EPSG:4326'), |
maxExtent : new OpenLayers.Bounds(-180.0, -90.0, 180.0, 90.0), |
units : "degrees", |
controls : [] |
}; |
// 创建地图,'map'是指定页面的div, options: 地图设置的参数 |
map = new OpenLayers.Map('map', options); |
// 加入图层 |
map.addLayers([ basic, basic_xiang, tielu, guodao, shengdao, zhugandao, |
point, highlightLayer ]); |
// 地图控制放大缩小移动的工具条 |
map.addControl(new OpenLayers.Control.PanZoomBar({ |
position : new OpenLayers.Pixel(2, 15) |
})); |
// 图层控制工具 |
map.addControl(new OpenLayers.Control.LayerSwitcher()); |
// 地图导航工具 |
map.addControl(new OpenLayers.Control.Navigation()); |
map.zoomToExtent(bounds); |
// 获取图层的信息 |
var info_control = new OpenLayers.Control.WMSGetFeatureInfo( |
{ |
url : url, |
title : 'Identify features by hovering', |
queryVisible : true, |
infoFormat : 'application/vnd.ogc.gml', |
hover : true, |
layers : [ point ], |
cql_filter : device_type = 1, |
eventListeners : { |
getfeatureinfo : function(event) { |
// 站点图层刷新,解决状态不同步问题 |
point.redraw(true); |
if (event_public != null) { |
// 判断鼠标位置,解决IE不停刷新问题 |
if (event_public.xy.x == event.xy.x && event_public.xy.y == event.xy.y) { |
return; |
} |
} |
event_public = event; |
// 判断是否点击了站点 |
if (event.features.length <= 0) { |
return; |
} |
if (popup != null) { |
dehighLight(); |
map.removePopup(popup); |
} |
var data = event.features[0].attributes; |
if(document.getElementById(data.device_type).checked == false) { |
return; |
} |
// 记录站点的经纬度 |
lonLat = new OpenLayers.LonLat(data.longitude, |
data.latitude); |
var xy = map.getPixelFromLonLat(lonLat); |
var url = path + "/gunGis/selectByCode.do?code=" |
+ data.s_code; |
$ |
.ajax({ |
type : 'post', |
url : url, |
success : function(data) { |
var obj = eval('(' + data + ')'); |
if (!obj.success) { |
return; |
} |
var station = obj.obj; |
var html = "<span style='color:#0088BB;font-weight:bold;font-size: 13px;'>● 基本信息：</span><br/>" |
+ "<table class='tb2'>" |
+ "<tr><th style='text-align: right; width:80px'>站点编码：</th><td style='width:100px'>" |
+ station.sCode |
+ "</td></tr>" |
+ "<tr><th style='text-align: right;'>站点名称：</th><td>" |
+ station.sName |
+ "</td></tr>" |
+ "<tr><th style='text-align: right;'>站点类型：</th><td>" |
+ station.deviceType |
+ "</td></tr>" |
+ "<tr><th style='text-align: right;'>所属地区：</th><td>" |
+ station.deptId |
+ "</td></tr>" |
+ "<tr><th style='text-align: right;'>经度：</th><td>" |
+ station.longitude |
+ "</td></tr>" |
+ "<tr><th style='text-align: right;'>纬度：</th><td>" |
+ station.latitude |
+ "</td></tr>" |
+ "<tr><th style='text-align: right;'>海拔高度：</th><td>" |
+ (station.altitude == null |
|| station.altitude == '' ? '/' |
: station.altitude) |
+ "</td></tr>" |
+ "<tr><th style='text-align: right;'>在线状态：</th><td>" |
+ (station.isOnline == '1' ? '在线' |
: '离线') |
+ "</td></tr>" |
+ "</table>" |
+ '<br/> ' |
+ '<a href="javascript:void(0);" onclick = "' |
+ "showMesg('" |
+ station.sCode |
+ "');" + '">查看更多...</a>'; |
highLight(event); |
popup = new OpenLayers.Popup.FramedCloud( |
"info", |
map.getLonLatFromPixel(xy), |
null, html, null, true, function(event) { |
this.hide(); |
dehighLight(); |
}); |
map.addPopup(popup); |
} |
}); |
} |
} |
}); |
map.addControl(info_control); |
info_control.activate(); |
// 地图控制器 |
controls = { |
point : new OpenLayers.Control.SLDSelect(OpenLayers.Handler.Click, { |
displayClass : 'olControlSLDSelectPoint', |
layers : [ point ], |
selectionSymbolizer : { |
'Point' : { |
graphicName : 'circle', |
strokeColor : '#3F48CC', |
strokeWidth : 2, |
fillColor : '#3F48CC', |
fillOpacity : '0', |
pointRadius : 6 |
} |
} |
}) |
}; |
for ( var key in controls) { |
map.addControl(controls[key]); |
} |
//controls['point'].activate(); |
updateIsOnline(); |
// 获取地图配置信息,并初始化 |
geGisInfo(); |
} |
/** |
* 高亮显示 |
*/ |
function highLight(event) { |
if (event.features && event.features.length) { |
highlightLayer.destroyFeatures(); |
highlightLayer.addFeatures(event.features); |
highlightLayer.redraw(); |
} |
} |
/** |
* 取消高亮显示 |
*/ |
function dehighLight() { |
highlightLayer.destroyFeatures(); |
highlightLayer.redraw(); |
} |
// 显示更多信息 |
function showMesg(operateId) { |
var url = path + "/gunGis/selectByOperateId.do?operateId=" + operateId; |
$ |
.ajax({ |
type : 'post', |
url : url, |
success : function(data) { |
var html = null; |
var obj = eval('(' + data + ')'); |
if (!obj.success) { |
html = "<span style='color:#0088BB;font-weight:bold;font-size: 13px;'>" |
+ obj.msg + "</span>"; |
} else { |
var boot = obj.obj; |
html = "<span style='color:#0088BB;font-weight:bold;font-size: 13px;'>● 其它信息：</span><br/><table class='tb2'><tr><th style='text-align: right; width:98px'>站点编码：</th><td style='width:120px'>" |
+ boot.operateId |
+ "</td></tr><tr><th style='text-align: right;'>设备编号：</th><td>" |
+ boot.equId |
+ "</td></tr><tr><th style='text-align: right;'>手机号码：</th><td>" |
+ boot.phoneNo |
+ "</td></tr><tr><th style='text-align: right;'>方位角模块电量：</th><td>" |
+ boot.azimuthElecBalance |
+ "</td></tr><tr><th style='text-align: right;'>仰角模块电量：</th><td>" |
+ boot.elevationElecBlance |
+ "</td></tr><tr><th style='text-align: right;'>设备通讯状态：</th><td>" |
+ (boot.commStatus == '0' ? '正常' : '不正常') |
+ "</td></tr><tr><th style='text-align: right;'>上传时间：</th><td>" |
+ obj.msg + "</td></tr></table>"; |
} |
if (popup != null) { |
map.removePopup(popup); |
} |
var xy = map.getPixelFromLonLat(lonLat); |
popup = new OpenLayers.Popup.FramedCloud("chicken", map |
.getLonLatFromPixel(xy), null, html, null, true, function() { |
this.hide(); |
dehighLight(); |
}); |
map.addPopup(popup); |
} |
}); |
} |
/** |
* 设置地图的中心以及缩放级别 |
* |
* @param lon |
* 经度 |
* @param lat |
* 纬度 |
* @param zoom |
* 缩放级别 |
*/ |
function setCenterAndZoom(lon, lat, zoom) { |
// map.zoomTo(5); |
var p = new OpenLayers.LonLat(lon, lat); |
map.setCenter(p, zoom); |
} |
/** |
* 获取GIS配置信息 |
*/ |
function geGisInfo() { |
|
$.ajax({ |
url : path + "/gisInfo/getGisInfo.do", |
success : function(data) { |
var obj = eval('(' + data + ')'); |
if (obj.success) { |
var gisInfo = obj.obj; |
setCenterAndZoom(gisInfo.lon, gisInfo.lat, gisInfo.zoom); |
var layersArray = gisInfo.layers.split("|"); |
for ( var index in layersArray) { |
checkByName(layersArray[index]); |
} |
} else { |
$("input[type='checkbox']").each(function() { |
$(this).attr("checked", true); |
}); |
basic_xiang.visibility = true; |
basic_xiang.redraw(); |
tielu.visibility = true; |
tielu.redraw(); |
guodao.visibility = true; |
guodao.redraw(); |
shengdao.visibility = true; |
shengdao.redraw(); |
zhugandao.visibility = true; |
zhugandao.redraw(); |
} |
} |
}); |
} |
/** |
* 根据名称配置勾选框 |
*/ |
function checkByName(layerName) { |
if (layerName == '高炮') { |
$("input[name='高炮']").attr("checked", true); |
} else if (layerName == '火箭车') { |
$("input[name='火箭车']").attr("checked", true); |
} else if (layerName == '烟炉') { |
$("input[name='烟炉']").attr("checked", true); |
} else if (layerName == '混合站点') { |
$("input[name='混合站点']").attr("checked", true); |
} else if (layerName == '乡镇边界') { |
$("input[name='乡镇边界']").attr("checked", true); |
basic_xiang.visibility = true; |
basic_xiang.redraw(); |
} else if (layerName == '铁路') { |
$("input[name='铁路']").attr("checked", true); |
tielu.visibility = true; |
tielu.redraw(); |
} else if (layerName == '国道') { |
$("input[name='国道']").attr("checked", true); |
guodao.visibility = true; |
guodao.redraw(); |
} else if (layerName == '省道') { |
$("input[name='省道']").attr("checked", true); |
shengdao.visibility = true; |
shengdao.redraw(); |
} else if (layerName == '主干道') { |
$("input[name='主干道']").attr("checked", true); |
zhugandao.visibility = true; |
zhugandao.redraw(); |
} |
getStationMap(); |
} |
/** |
* 保存当前GIS信息 |
*/ |
function saveGisInfo() { |
var layers = ''; |
$("input[type='checkbox']").each( |
function() { |
if ($(this).attr("checked") == true |
|| $(this).attr("checked") == "checked") { |
layers += $(this).attr("name") + "|"; |
} |
}); |
$.post(path + "/gisInfo/saveGisInfo.do", { |
layers : layers.substring(0, layers.length - 1), |
zoom : map.getZoom(), |
lon : map.getCenter().lon, |
lat : map.getCenter().lat |
}, function(data) { |
$.messager.alert('提示', '保存成功,下次访问将以该配置显示地图信息!'); |
}, "json"); |
} |
/** |
* checkbox执行的方法 |
*/ |
function getStationMap() { |
if (popup != null) { |
popup.hide(); |
} |
dehighLight(); |
var filter = ""; |
$("input[class='station']").each( |
function() { |
if ($(this).attr("checked") == true |
|| $(this).attr("checked") == "checked") { |
filter += "device_type = " + $(this).val() + " or "; |
} |
}); |
updateStation(filter); |
} |
/** |
* 过滤站点 |
* |
* @param filter |
*/ |
function updateStation(filter) { |
var filterParams = { |
cql_filter : null, |
}; |
if (OpenLayers.String.trim(filter) != "") { |
// 去掉传入参数中末尾的" or " |
filter = filter.substring(0, filter.length - 4); |
filterParams["cql_filter"] = filter; |
} else { |
filterParams["cql_filter"] = "device_type = ':!'"; |
} |
point.mergeNewParams(filterParams); |
} |
/** |
* 自动更新站点是否在线的状态显示 |
*/ |
var i = 1; |
function updateIsOnline() { |
if (i != 1) { |
point.redraw(true); |
} else { |
i++; |
} |
setTimeout("updateIsOnline()", 10000); |
} |
初级程序员
by: 坂上君 发表于：2014-02-22 18:52:55 顶(0) | 踩(0) 回复
谢谢分享
回复评论