EV-04/ParamEdit/ParamEdit-NoJDK-0.8.8/html/map/js/openLayers.util.js

(function() {
	window.map = {};
	window.OL = {};
	window.icons = [];
	window.infoWindows = [];
	window.markerLayer = null;
	window.drawLayer = null;
	window.trackPlayLayer = null;
	window.Geocoder = {};
	window.LocalSearch = {};
	window.select = null;

	/**
	 * OpenLayers操作地图
	 */
	OL = {
		/**
		 * 全局变量
		 */
		CONSTANT : {
			CONTAINER : "map",
			CURRENT_MAP_TYPE : "openStreetMap",
			CURRENT_MAP_JIUPIAN : 0,
			DEFAULT_ZOOM : 2,
			MIN_ZOOM : 1,
			MAX_ZOOM : 20,
			DEFAULT_LAT : 0,
			DEFAULT_LNG : 0,
			BASEPATH : null
		},
		/**
		 * 初始化普通地图
		 */
		initCommonMap : function() {
			window.infoWindows = [];
			
			var view = this.getView();
			var interactions = ol.interaction.defaults().extend([
			    new ol.interaction.DragRotateAndZoom()
			]);
			map = new ol.Map({
				view : view,
//				layers : [ mapLayer ],
				target : 'map',
				interactions : interactions,
				loadTilesWhileAnimating : true,/* 在动画期间加载图块 */
				loadTilesWhileInteracting : true/* 在与地图交互时会加载图块 */
			});

			window.map = map;
			OL.event.addListener_singleclick();
			
			/*动态点扩散效果*/
//			var point_overlay = new ol.Overlay({
//				element: document.getElementById('css_animation'),
//				positioning: 'center-center',
//				//position: [9871995.0, 4344069.0],
//				stopEvent: false
//			});
//			map.addOverlay(point_overlay);
//			//point_overlay.setPosition(map.getView().getCenter());
//			//point_overlay.setPosition(point.getCoordinates());
		},
		/**
		 * 初始化地图（含操作控件）
		 */
		initOpenLayersMap : function() {
			OL.initCommonMap(); // 初始化普通地图
			// 添加控件
			OL.control.addAttributControl();
			OL.control.addScaleLineControl();
			OL.control.addFullScreenControl();
			OL.control.addThumbnailsControl();
			OL.control.addRotationControl();
			OL.control.addLayerSwitcherControl();
			
			// OL.tools.addDraw();
//			OL.addChangeView();//添加地图切换
			markerLayer = new ol.layer.Vector({
				source : new ol.source.Vector({
					features : []
				})
			});
			map.addLayer(markerLayer);//添加marker图层
			markerLayer.setVisible(true);
		},
		/**
		 * 初始化地图（含拖拽文件到地图）
		 */
		initHistoricalTrackMap : function() {
			OL.initOpenLayersMap(); // 初始化地图（含操作控件）
			var styleFunction = function(feature, resolution) {
				var featureStyleFunction = feature.getStyleFunction();
				if (featureStyleFunction) {
					return featureStyleFunction.call(feature, resolution);
				} else {
					return defaultStyle[feature.getGeometry().getType()];
				}
			};
			var dragAndDropInteraction = new ol.interaction.DragAndDrop({
				formatConstructors: [
//					ol.format.GPX,
//					ol.format.IGC,
//					ol.format.TopoJSON,
					ol.format.GeoJSON,
					ol.format.KML
				]
			});
			
			dragAndDropInteraction.on('addfeatures', function(event) {
				var vectorSource = new ol.source.Vector({
					features: event.features
				});
				map.addLayer(new ol.layer.Image({
					source: new ol.source.ImageVector({
				    	source: vectorSource,
				    	style: styleFunction
				    })
				}));
				map.getView().fit(vectorSource.getExtent(), map.getSize());
			});
			map.addInteraction(dragAndDropInteraction);
		},
		getView : function() {
			var view = new ol.View({
				center : ol.proj.transform([ this.CONSTANT.DEFAULT_LAT, this.CONSTANT.DEFAULT_LNG ], 'EPSG:4326', 'EPSG:3857'),
				// center : new ol.geom.Point([ this.CONSTANT.DEFAULT_LAT,this.CONSTANT.DEFAULT_LNG ]).transform('EPSG:4326', 'EPSG:3857').getCoordinates(),
				// center : [ 114.013351, 22.644093 ],
				zoom : this.CONSTANT.DEFAULT_ZOOM,
				minZoom: this.CONSTANT.MIN_ZOOM,
				maxZoom: this.CONSTANT.MAX_ZOOM
			});
			return view;
		},
		/**
		 * 视野自适应
		 */
		viewExtent : function(coordinates) {
			try{
				var extent = new ol.extent.boundingExtent(coordinates);
				map.getView().fit(extent, map.getSize());
				if(map.getView().getZoom()>18){
					map.getView().setZoom(16);
				}
			    map.renderSync();
			}catch(err){
				console.log("Field of view adaptive Exception!");
			}
		},
		/**
		 * 点越界处理
		 */
		ifOutBoundsPantoCenter : function(point){
			var extent = map.getView().calculateExtent(map.getSize());
			alert(ol.extent.containsCoordinate(extent, point.getCoordinates()));
			// 不在extent之内则做相应的处理
//			if(!ol.extent.containsCoordinate(extent, point.getCoordinates())){
			map.getView().fit(point, map.getSize());
//			if(map.getView().getZoom()<12){
				map.getView().setZoom(16);
//			}
//		    map.getView().setCenter(point.getCoordinates());
		       //map.render();
		    map.renderSync();
//		   }
		},
		/**
		 * 设置地图中心点
		 */
		setCenterAndZoom : function(point,zoom) {
			map.getView().setCenter(point.getCoordinates());
			if (zoom != null) {
				map.getView().setZoom(zoom);
			}
		    map.render();
		},
		/**
		 * 创建一个经纬度(坐标点)
		 */
		getPoint : function(lat, lng) {
			// return new ol.geom.Point([ lat, lng ]);
			return new ol.geom.Point([ lng, lat ]).transform('EPSG:4326', 'EPSG:3857');
		},
		/**
		 * 创建标记
		 */
		createIcon : function(iconPath,scaleSize) {
			var icon = new ol.style.Style({
				image : new ol.style.Icon({
					src : iconPath,
					//size: [36, 36],
					//opacity: 0.75,//透明度
					scale: scaleSize?scaleSize:1,//缩放比例尺
					anchor : [ 0.5, 0.95 ]//坐标偏移量
				})
			});
			return icon;
		},
		/**
		 * 查询标记图标
		 */
		findIcon : function(id) {
			for (var i = 0; i < icons.length; i++) {
				var icon = icons[i];
				if (icon.id == id) {
					return icon;
				}
			}
			return null;
		},
		/**
		 * 获取一个标记图标
		 */
		getIcon : function(id,iconPath,scale) {
			var icon = OL.findIcon(id);
			if (icon == null) {
				icon = OL.createIcon(iconPath,scale);
				icon.id = id;
				icons.push(icon);
			}
			return icon;
		},
		/**
		 * 查找标记
		 */
		findMarker : function(id) {
			if(markerLayer){
				var marker = markerLayer.getSource().getFeatureById(id);
				return marker;
			}
		},
		/**
		 * 获取一个标记
		 */
		getMarker : function(id, point, iconStyle) {
			var marker = OL.findMarker(id);
			if (marker != null) {
				if (point != null) {
					marker.setGeometry(point);
				}
				if (iconStyle != null) {
					marker.setStyle(iconStyle);
				}
			}else{
				marker = OL.createMarker(id, point, iconStyle);
			}
//			OL.viewExtent([point.getCoordinates()]);//视野自适应
			return marker;
		},
		/**
		 * 创建Marker标注
		 */
		createMarker : function(id, point, iconStyle) {
			var marker = new ol.Feature({
				geometry : point,
			});
			marker.setId(id);
			marker.setStyle(iconStyle);
			if (typeof markerLayer !== 'undefined') {
				markerLayer.getSource().addFeature(marker);
			}
			return marker;
		},
		/**
		 * 设置标记
		 */
		setMarker : function(id, point, iconStyle) {
			var marker = OL.findMarker(id);
			if (marker != null) {
				if (point != null) {
					marker.setGeometry(point);
				}
				if (iconStyle != null) {
					marker.setStyle(iconStyle);
				}
			}
//			OL.viewExtent([point.getCoordinates()]);//视野自适应
			return marker;
		},
		/**
		 * 移除一个标记
		 */
		removeMarke : function(id) {
			var marker = OL.findMarker(id);
			if (marker != null) {
				markerLayer.getSource().removeFeature(marker);
			}
		},
		/**
		 * 移除所有标记
		 */
		removeAllMarke : function() {
			markerLayer.getSource().clear();
		},
		findCircle : function(id) {
			if(markerLayer){
				var circle = markerLayer.getSource().getFeatureById(id);
				return circle;
			}
		},
		getCircle : function(id, point, radius) {
			var circle = OL.findCircle(id);
			if (circle != null) {
				if (point != null) {
					circle.getGeometry().setCenter(point.getCoordinates());
				}
				if (radius != null) {
					circle.getGeometry().setRadius(radius);
				}
			}else{
				circle = OL.createCircle(id, point, radius);
			}
			return circle;
		},
		isShowCircle : function(id, isShow) {
			var circle = OL.findCircle(id);
			if (isShow) {
				circle.setStyle(OL.circleStyle());
			}else{
				circle.setStyle(new ol.style.Style());
			}
		},
		setCircle : function(id, point, radius) {
			var circle = OL.findCircle(id);
			if (circle != null) {
				if (point != null) {
					circle.getGeometry().setCenter(point.getCoordinates());
				}
				if (radius != null) {
					circle.getGeometry().setRadius(radius);
				}
			}
			return circle;
		},
		circleStyle : function() {
			var circleStyle = new ol.style.Style({
	            image: new ol.style.Circle(),
	            fill: new ol.style.Fill({//填充色
	                color: 'rgba(91, 192, 222, 0.2)'
	            }),
	            stroke: new ol.style.Stroke({//边线颜色
	                color: '#5BC0DE',
	                width: 1
	            })
	        });
			return circleStyle;
		},
		/**
		 * 创建圆
		 */
		createCircle : function(id, point, radius) {
	        var circle = new ol.Feature({//创建一个圆
	            geometry: new ol.geom.Circle(point.getCoordinates(), radius)
	        });
	        circle.setId(id);
	        circle.setStyle(OL.circleStyle());
			if (typeof markerLayer !== 'undefined') {
				markerLayer.getSource().addFeature(circle);
			}
			return circle;
		},
		removeCircle : function(id) {
			var circle = OL.findCircle(id);
			if (circle != null) {
				markerLayer.getSource().removeFeature(circle);
			}
		},
		/**
		 * 获取一个信息窗体
		 */
		getInfoWindow : function(id, point, htmlContent) {
			var infoWindow = OL.findInfoWindow(id);
			if (infoWindow == null) {
				infoWindow = OL.createInfoWindow(id, point, htmlContent);
				infoWindow.id = id;
				infoWindows.push(infoWindow);
			}else{
				infoWindow = OL.setInfoWindow(id, point, htmlContent);
			}
			return infoWindow;
		},
		/**
		 * 设置信息窗体
		 */
		setInfoWindow : function(id, point, htmlContent) {
			var infoWindow = OL.findInfoWindow(id);
			if (infoWindow != null) {
				if (point != null) {
					infoWindow.setPosition(point.getCoordinates());
				}
				if (htmlContent != null) {
					var content = document.getElementById('popup-content-' + id);
					if(content != undefined){
						content.innerHTML = htmlContent;
					}
				}
			}
			return infoWindow;
		},
		/**
		 * 查询信息窗体
		 */
		findInfoWindow : function(id) {
			for (var i = 0; i < infoWindows.length; i++) {
				var infoWindow = infoWindows[i];
				if (infoWindow.id == id) {
					return infoWindow;
				}
			}
			return null;
		},
		/**
		 * 创建信息窗体
		 */
		createInfoWindow : function(id, point, htmlContent) {
			var html = '<div id="popup-'+id+'" class="ol-popup" style="display:none;">';
			html += '<a href="javascript:void(0)" id="popup-closer-'+id+'" class="ol-popup-closer"></a>';
			html += '<div id="popup-content-'+id+'" style="width: 260px;">'+htmlContent+'</div>';
			html += '</div>';
			var viewport = map.getViewport();
			$(viewport).append(html);
			$("#popup-closer-" + id).click(function(even){
				$("#popup-" + id).hide();
				// $("#id").show();
			});
			var infoWindow = new ol.Overlay({
				element : document.getElementById('popup-' + id),
				autoPan: true,
				autoPanAnimation : {
					duration : 250
				}
			});

			map.addOverlay(infoWindow);
			infoWindow.setPosition(point.getCoordinates());
			return infoWindow;
		},
		/**
		 * 移除信息窗体
		 */
		removeInfoWindow : function(id) {
			for (var i = 0; i < infoWindows.length; i++) {
				var infoWindow = infoWindows[i];
				if (infoWindow.id == id) {
					// infoWindows[i].setVisible(false);
					// infoWindows[i].setMap(map);
					$("#popup-" + id).hide();
				}
			}
		},
		/**
		 * 移除所有信息窗体
		 */
		removeAllInfoWindow : function(isClear) {
			for (var i = 0; i < infoWindows.length; i++) {
				// infoWindows[i].setVisible(false);
				// infoWindows[i].setMap(map);
				$("#popup-" + infoWindows[i].id).hide();
			}
			if (isClear) {
				infoWindows = [];
			}
		}
	};

	/**
	 * 操作工具
	 */
	OL.tools = {
		/**
		 * 视野自适应
		 */
		fit : function(extent) {
			map.getView().fit(extent, map.getSize()); 
		},
		fit_geometry : function(geometry) {
			map.getView().fitGeometry(geometry, map.getSize()); 
		},
		fit_extent : function(extent) {
			map.getView().fitExtent(extent, map.getSize()); 
		},
		fit_layer : function(layer) {// 合适比例缩放居中
			try{
				var extent = layer.getSource().getExtent();
//				map.getView().fit(extent, map.getSize());
				map.getView().fitExtent(extent, map.getSize());
				map.renderSync();
			}catch(err){
				console.log("Field of view adaptive Exception!");
			}
			
		},
		/**
		 * 绘制过程
		 */
		addDrawInteraction : function(type) {
			if (drawVector != null) {
				map.removeLayer(drawVector);
			}
			if (draw != null) {
				map.removeInteraction(draw);
			}
			// 绘制工具
			draw = new ol.interaction.Draw({
				source : drawSource,
				type : type
			});
			map.addLayer(drawVector);
			map.addInteraction(draw);

		},
		/**
		 * 测量两点的距离
		 */
		distance : function(points) {
			var wgs84Sphere = new ol.Sphere(6378137);
			var sourceProj = map.getView().getProjection();
			var length = 0;
			for (var i = 0, ii = gis.length - 1; i < ii; ++i) {
				var c1 = ol.proj.transform(points[i], sourceProj, 'EPSG:4326');
				var c2 = ol.proj.transform(points[i + 1], sourceProj,
						'EPSG:4326');
				length += wgs84Sphere.haversineDistance(c1, c2);
			}

			var output = 0;
			if (length > 100) {
				output = (Math.round(length / 1000 * 100) / 100) + ' ' + 'km';
			} else {
				output = (Math.round(length * 100) / 100) + ' ' + 'm';
			}
			// return map.getDistance(pointA, pointB); // 获取两点距离
		},

		/**
		 * 轨迹回放
		 */
		trackPlay : function(points, iconPath) {
			if(trackPlayLayer != undefined){
				trackPlayLayer.getSource().clear();
			}
			var lineString = new ol.geom.LineString(points,'XY').transform('EPSG:4326', 'EPSG:3857');
			
			for(var i=0;i<lineString.length;i++){
				lineString[i].forEachSegment(function(start, end) {
			          var dx = end[0] - start[0];
			          var dy = end[1] - start[1];
			          var rotation = Math.atan2(dy, dx);
			          // arrows
			          styles.push(new Style({
			            geometry: new Point(end),
			            image: new Icon({
			              src: 'https://openlayers.org/en/latest/examples/data/arrow.png',
			              anchor: [0.75, 0.5],
			              rotateWithView: true,
			              rotation: -rotation
			            })
			          }));
			        });
				}
			
			points = lineString.getCoordinates();
			var routeLength = points.length;
			var styles = {
				'route' : new ol.style.Style({
					stroke : new ol.style.Stroke({
						width : 6,
						color : [ 0, 255, 0, 0.8 ]
					})
				}),
				'startIcon' : new ol.style.Style({
					image:new ol.style.Circle({
	                    radius:7,
	                    snapToPixel:false,
	                    fill:new ol.style.Fill({ color:'#30C0FF'}),
	                    stroke:new ol.style.Stroke({
	                        color:'white',
	                        width:1
	                    })
	                })
				}),
				'endIcon' : new ol.style.Style({
					image:new ol.style.Circle({
	                    radius:7,
	                    snapToPixel:false,
	                    fill:new ol.style.Fill({ color:'red'}),
	                    stroke:new ol.style.Stroke({
	                        color:'white',
	                        width:1
	                    })
	                })
				}),
				'moveIcon' : new ol.style.Style({
					image : new ol.style.Icon({
					    scale: 0.6,
						anchor : [ 0.5, 1 ],
						src : iconPath
					})
				})
			};
			// 轨迹图层
			var routeFeature = new ol.Feature({
				type : 'route',
				geometry : lineString
			});
			var startMarker = new ol.Feature({
				type : 'startIcon',
				geometry : new ol.geom.Point(points[0])
			});
			var endMarker = new ol.Feature({
				type : 'endIcon',
				geometry : new ol.geom.Point(points[routeLength - 1])
			});
			var moveMarker = new ol.Feature({
				type : 'moveIcon',
				geometry : new ol.geom.Point(points[0])
			});

			var playing = false;
			var animating = false;
			var speed, index, pauseM, originTime, pauseTime;
//			var speedInput = document.getElementById('speed');
			var searchButton = document.getElementById('search');
			var playOrpauseButton = document.getElementById('playOrpause');
			
			trackPlayLayer = new ol.layer.Vector({
				source : new ol.source.Vector({
					features : [routeFeature, startMarker, endMarker, moveMarker]
//					features : [routeFeature, moveMarker]
				}),
				style : function(feature) {
					if (animating && feature.get('type') === 'moveIcon') {
						return null;
					}
					return styles[feature.get('type')];
				}
			});

			map.addLayer(trackPlayLayer);
			OL.viewExtent(points);
			$("#spinner").change(function() {
				speed = speedSpinner.spinner("value");
			})
			
			var moveFeature = function(event) {
				var vectorContext = event.vectorContext;
				var frameState = event.frameState;
				if (animating) {
					var elapsedTime = frameState.time - originTime - pauseM;
					if(playing) {
						index = Math.round(speed * elapsedTime / 10000);
					}
					if (index >= routeLength) {
						alert("Play finished!");
						stopAnimation(true);
						return;
					}
					document.getElementById("historicalTrackScroll").scrollTop = (index-1)*41;
					if(index>0){
						$("#historyData-"+index).removeAttr("style");
					}
					$("#historyData-"+(index+1)).css({ "background-color": "#6EABFF" });
					var currentPoint = new ol.geom.Point(points[index]);
					var feature = new ol.Feature(currentPoint);
					//OL.ifOutBoundsPantoCenter(currentPoint);
					vectorContext.drawFeature(feature, styles.moveIcon);
				}
				map.render();
			};

			playOrpauseButton.onclick = function() {
				if (animating) {
					if (playing) {
						playing = false;
						pauseTime = new Date().getTime();
					} else {
						playing = true;
						pauseM += new Date().getTime() - pauseTime;
					}
				}else{
					searchButton.disabled=true;//按钮禁用
					animating = true;
					playing = true;
					pauseM = 0;
					originTime = new Date().getTime();
					speed = speedSpinner.spinner("value");
					moveMarker.setStyle(null);
					map.on('postcompose', moveFeature);
					map.render();
				}
			}

			function stopAnimation(ended) {
				searchButton.disabled=false;
				animating = false;
				playing = false;
				var coord = ended ? points[routeLength - 1] : points[0];
				(moveMarker.getGeometry()).setCoordinates(coord);
				map.un('postcompose', moveFeature);
			}
		},
		/**
		 * 添加/修改/拖动 点、线、多边形、圆 drawType:Point,LineString,Polygon,Circle
		 */
		addDraw : function(o_range,callback) {
			if(drawLayer != null){//清理缓存
				map.removeInteraction(select);
				//map.removeLayer(drawLayer);
				//map.renderSync();
				drawLayer.getSource().clear();
				drawLayer.getSource().refresh();//刷新
				//drawLayer.refresh({ force: true, active: true });//强制刷新
			}
			var o_circle = document.getElementById('Circle');
			var o_radius = document.getElementById('Radius');
			var o_polygon = document.getElementById('Polygon');
			var o_modify = document.getElementById('Modify');
			var o_draw = document.getElementById('Draw');
			var o_clear = document.getElementById('Clear');

			var source = new ol.source.Vector({
				wrapX : false
			});
			var drawFeature = null;
			//{"type":"Circle","latlng":[{"lng":0.0,"lat":0.0}],"radius":1000}
			if(parent.isJSON(o_range)){
				var rangeObj = JSON.parse(o_range);
				if (rangeObj.type == "Polygon") {
					var points = [];
					var latlng = rangeObj.latlng;
					for (var i = 0; i < latlng.length; i++) {
						points[i] = [];
						points[i][0] = latlng[i].lng;
						points[i][1] = latlng[i].lat;
					}
					var polygon = new ol.geom.Polygon([ points ]);
					polygon = polygon.clone().transform('EPSG:4326', 'EPSG:3857');
					drawFeature = new ol.Feature(polygon);
				} else if (rangeObj.type == "Circle") {
					try {
						var latlng = rangeObj.latlng;
						var radius = rangeObj.radius;
						var point = new ol.geom.Point([ latlng[0].lng,
							latlng[0].lat ]).transform('EPSG:4326', 'EPSG:3857');
						o_radius.value = radius;
						var drawCircle = new ol.geom.Circle(point.getCoordinates(), radius);
						drawFeature = new ol.Feature(drawCircle);
					} catch(err) {
						drawFeature = new ol.Feature(null);
					}
				}
				source.addFeature(drawFeature);
			}

			drawLayer = new ol.layer.Vector({
				source : source,
				style : new ol.style.Style({
					fill : new ol.style.Fill({
						color : 'rgba(255, 255, 255, 0.2)'
					}),
					stroke : new ol.style.Stroke({
						color : '#ff00ff',
						width : 2
					}),
					image : new ol.style.Circle({
						radius : 7,
						fill : new ol.style.Fill({
							color : '#ffcc33'
						})
					})
				})
			});
			map.addLayer(drawLayer);
			OL.tools.fit_layer(drawLayer);
			var draw, modify, drag;
			draw = new ol.interaction.Draw({
				source : source,
				type : ('none')
			});

			select = new ol.interaction.Select({
				condition : ol.events.condition.click,
				wrapX : false
			});
			
			modify = new ol.interaction.Modify({
				//condition: ol.events.condition.pointerMove,//鼠标移到featur上起作用
				features : select.getFeatures(),
				deleteCondition : function(event) {
					return ol.events.condition.shiftKeyOnly(event)
							&& ol.events.condition.singleClick(event);
				}
			});

			drag = new ol.interaction.Translate({
				features : select.getFeatures(),
				cursor_ : 'pointer'
			});

			map.addInteraction(draw);
			map.addInteraction(select);
			map.addInteraction(modify);
			map.addInteraction(drag);
			draw.setActive(false);
			select.setActive(false);
			modify.setActive(false);
			drag.setActive(false);
			
			select.on('select', function(evt) {
				var selected = evt.selected;
			});

			modify.on('modifyend', function(evt) {
				evt.features.forEach(function(feature) {
					saveLatLngs(feature);
				});
			});
			drag.on('translateend', function(evt) {
				evt.features.forEach(function(feature) {
					saveLatLngs(feature);
				});
			});

			function saveLatLngs(feature) {
				var range = {};
				var latlng = [];
				var geometry = feature.getGeometry();
				var geometryType = geometry.getType();
				range.type = geometryType;
				if (geometryType == "Polygon") {
					var coordinates = geometry.getCoordinates()[0];
					for (var i = 0; i < coordinates.length; i++) {
						var coordinate = ol.proj.transform(coordinates[i],
								"EPSG:3857", "EPSG:4326");
						coordinate = ol.coordinate.format(coordinate, '{x},{y}', 6);
						var coo = coordinate.split(',');
						var point = {};
						point.lng = parseFloat(coo[0]);
						point.lat = parseFloat(coo[1]);
						latlng[i] = point;
					}
//					callback(points.substring(0, points.length - 1));
				} else if (geometryType == "Circle") {
					o_radius.value = Math.round(geometry.getRadius());
					var center = ol.proj.transform(geometry.getCenter(), "EPSG:3857", "EPSG:4326");
					center = ol.coordinate.format(center, '{x},{y}', 6);
					//callback("Circle|" + latlng + ";" + Math.round(geometry.getRadius()));
					var coo = center.split(',');
					var point = {};
					point.lng = parseFloat(coo[0]);
					point.lat = parseFloat(coo[1]);
					latlng[0] = point;
					range.radius = Math.round(geometry.getRadius());
				}
				range.latlng = latlng;
				callback(JSON.stringify(range));
			}

			o_circle.onclick = function() {
				draw.setActive(false);
				select.setActive(false);
				modify.setActive(false);
				drag.setActive(false);

				draw = new ol.interaction.Draw({
					source : source,
					type : 'Circle'
				});
				map.addInteraction(draw);
				draw.on('drawstart', function(evt) {
					clear();
				});
				draw.on('drawend', function(evt) {
					//circleRadius.spinner("value", parseInt(evt.feature.getGeometry().getRadius()));
					o_radius.value = parseInt(evt.feature.getGeometry().getRadius());
					saveLatLngs(evt.feature);
					draw.setActive(false);
					select.setActive(true);
					drag.setActive(true);
				});
			}
			$("#spinner").change(function() {
				var features = select.getFeatures().getArray();
				for (var i = 0; i < features.length; i++) {
					var geometry = features[i].getGeometry();
					var geometryType = geometry.getType();
					if (geometryType == "Circle") {
						var range = {};
						var latlng = [];
						range.type = "Circle";
						//geometry.setRadius(circleRadius.spinner("value"));
						geometry.setRadius(o_radius.value);
						range.radius = Math.round(geometry.getRadius());
						var center = ol.proj.transform(geometry.getCenter(),
								"EPSG:3857", "EPSG:4326");
						center = ol.coordinate.format(center, '{x},{y}', 6);
						var coo = center.split(',');
						var point = {};
						point.lng = parseFloat(coo[0]);
						point.lat = parseFloat(coo[1]);
						latlng[0] = point;
						range.latlng = latlng;
						callback(JSON.stringify(range));
					}
				}
			});
			o_polygon.onclick = function() {
				draw.setActive(false);
				select.setActive(false);
				modify.setActive(false);
				drag.setActive(false);
				draw = new ol.interaction.Draw({
					source : source,
					type : 'Polygon',
					maxPoints: 8
				});
				map.addInteraction(draw);
				draw.on('drawstart', function(evt) {
					clear();
				});
				draw.on('drawend', function(evt) {
					saveLatLngs(evt.feature);
					draw.setActive(false);
					select.setActive(true);
					modify.setActive(true);
				});
			}
			o_modify.onclick = function() {
				draw.setActive(false);
				drag.setActive(false);
				select.setActive(true);
				modify.setActive(true);
			}
			o_draw.onclick = function() {
				draw.setActive(false);
				modify.setActive(false);
				select.setActive(true);
				drag.setActive(true);
			}
			o_clear.onclick = function() {
				clear();
			}
			function clear() {
				drawLayer.getSource().clear();
				if (select) {
					select.getFeatures().clear();
				}
				//o_range.innerHTML = "";
				callback("");
			}
		},
		/**
		 * 根据用户覆盖物的标识属性显示覆盖物
		 */
		showOverlay : function(properties, value) {
			var overlay = this.getOverlayByNodeId(properties, value);
			overlay.show();
		},
		/**
		 * 根据用户覆盖物的标识属性隐藏覆盖物
		 */
		hideOverlay : function(properties, value) {
			var overlay = this.getOverlayByNodeId(properties, value);
			overlay.hide();
		},
		/**
		 * 根据用户覆盖物的标识属性移除覆盖物
		 */
		removeOverlay : function(properties, value) {
			var overlay = this.getOverlayByNodeId(properties, value);
			if (overlay)
				map.removeOverlay(overlay);
		},
		/**
		 * 删除地图上所有覆盖物
		 */
		removeAllOverlays : function() {
			map.clearOverlays();
		}
//		,
//		asyncLoaded : function(url, callBack) {/* url为js的链接，callBack为回调函数 */
//			var script = document.createElement('script');
//			script.type = 'text/javascript';
//			/*
//			 * if else 这几句话必须要写到这位置处，不能放最后，因为if中js加载中script.readyState存在好几种状态，
//			 * 只有状态改变‘readystatechange’事件才会触发，但现在浏览器加载速度很快，当解析到该事件时JS有可能以加载完，
//			 * 所以事件根本不会触发，所以要写到前面
//			 */
//			if (script.readystate) {// 兼容IE
//				script.onreadystatechange = function() {// 状态改变事件才触发
//					if (script.readyState == 'loaded'
//							|| script.readyState == 'complete') {
//						callBack();
//						script.onreadystatechange = null;
//					}
//				}
//			} else { //Others: Firefox, Safari, Chrome, and Opera 
//				script.onload = function(e) {
//					callBack();
//				}
//			}
//			script.src = url;
//			document.body.appendChild(script);
//		}
	};

	/**
	 * 探索处理
	 */
	OL.search = {
		/**
		 * 本地探索（含自动提示）
		 */
		localSearch : function() {
		}
	};

	/**
	 * OpenLayers控件
	 */
	OL.control = {
		/**
		 * 添加属性控件
		 */
		addAttributControl : function() {
			map.addControl(new ol.control.Attribution());
		},
		/**
		 * 添加鼠标定位控件
		 */
		addMousePositionControl : function() {
			map.addControl(new ol.control.MousePosition({
			    undefinedHTML: 'outside',
			    projection: 'EPSG:4326', 
			    coordinateFormat: function(coordinate) {
			        return ol.coordinate.format(coordinate, '{x}, {y}', 6); 
			        }              
			    })
			);
		},
		/**
		 * 添加缩略图控件
		 */
		addThumbnailsControl : function() {
			map.addControl(new ol.control.OverviewMap({
			// collapsed : false
			}));
		},
		/**
		 * 添加旋转控件
		 */
		addRotationControl : function() {
			map.addControl(new ol.control.Rotate({
				autoHide : false
			}));
		},
		/**
		 * 添加比例尺控件
		 */
		addScaleLineControl : function() {
			map.addControl(new ol.control.ScaleLine());
		},
		/**
		 * 添加缩放控件
		 */
		addZoomControl : function() {
			map.addControl(new ol.control.Zoom());
		},
		/**
		 * 添加缩放滑动控件
		 */
		addZoomSliderControl : function() {
			map.addControl(new ol.control.ZoomSlider());
		},
		/**
		 * 添加缩放到当前视图滑动控件
		 */
		addZoomToExtentControl : function() {
			map.addControl(new ol.control.ZoomToExtent());
		},
		/**
		 * 添加全屏控件
		 */
		addFullScreenControl : function() {
			map.addControl(new ol.control.FullScreen());
		},
		/**
		 * 拖拽文件到地图,支持的格式包括 GeoJSON, GML, KML, GPX, OSMXML, TopoJSON 和 IGC
		 */
		addDragAndDropControl : function() {
//			var dragAndDropInteraction = new ol.interaction.DragAndDrop({
//				formatConstructors: [
//					ol.format.GeoJSON,
//					ol.format.KML
//					]
//			});
//			var interactions = ol.interaction.defaults().extend([
//			    new ol.interaction.DragRotateAndZoom(),
//			    dragAndDropInteraction
//			 ]);
//			dragAndDropInteraction.on('addfeatures', function(event){
//				alert("989898");
//			});
		},
		addLayerSwitcherControl : function() {
			map.addControl(new ol.control.LayerSwitcher());
		}
	};

	/**
	 * 地图事件
	 */
	OL.event = {
		addListener_singleclick : function() {// 响应单击事件
			window.map.on("click", function(e) {
				var feature = window.map.forEachFeatureAtPixel(e.pixel, function(
						feature, layer) {
					return feature;
				});
				if (feature) {
//					 alert("888=="+feature.getId()+"=="+feature.getGeometry());
					var point = feature.getGeometry();
					// OL.setInfoWindow(feature.get('id'),point,htmlContent);
					$("#popup-" + feature.getId()).show();
				}
			});
		},
		addListener_click : function(mapObject, callback) {// 响应点击事件
			var listener = mapObject.on('click', function(event) {
				callback();
			})
			return listener;
		},
		addListener_dblclick : function(mapObject, callback) {// 响应双击事件
			var listener = mapObject.on('dblclick', function(event) {
				callback();
			})
			return listener;
		},
		addListener_dmouseup : function(mapObject, callback) {// 鼠标按上
			mapObject.on('mouseup', function(event) {
				callback();
			});
		},
		addListener_mousedown : function(mapObject, callback) {// 鼠标按下
			mapObject.on('mousedown', function(event) {
				callback();
			});
		}

	};

})();