WEB_GIS

[javascript]代码库

// 地图
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/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
												+ '<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);
}