dennis
/
EV-04


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
							<!DOCTYPE html>
<html lang="en">
<head>
<title>maps-geofence</title>
<link href="./5.2.0/ol.css" rel="stylesheet">
<link href="./css/map_ol3.css" rel="stylesheet">
</head>

<body style="background-color:rgb(240,240,240);">
<div class="row">
	<div class="col-xs-12">
		<div class="panel">
			<header class="panel-heading">
				<div class="form-inline tools">
					<button id="Circle" class="btn btn-primary btn-sm" type="button">Circle</button>
					<button id="Polygon" class="btn btn-primary btn-sm" type="button">Polygon</button>
					<button id="Modify" class="btn btn-warning btn-sm" type="button">Modify</button>
					<button id="Draw" class="btn btn-warning btn-sm" type="button">Draw</button>
					<button id="Clear" class="btn btn-danger btn-sm" type="button">Clear</button>
	               	<input id="Radius" type="hidden" readonly="readonly" placeholder="radius" title="radius">
	               	<input id="Range" type="text" style="width:460px;" readonly="readonly"
	               		placeholder="Please select the range from the map..." title="Please select the range from the map...">
            	</div>
			</header>
			<div id="mapPanel" class="panel-body" style="padding: 0px;">
				<div id="map" style="width: 100%; height: 100%;"></div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="./5.2.0/ol.js"></script>
<script type="text/javascript" src="./js/openLayers.util.js"></script>
<script type="text/javascript" src="./js/layerSwitcher.js"></script>
<script type="text/javascript" src="./js/maps.util.js"></script>
<script type="text/javascript" src="./js/jquery-3.1.1.min.js"></script>

<script type="text/javascript">
	chengeSize();
	window.onresize = chengeSize;//褰撴祻瑙堝櫒澶у皬鍙戠敓鍙樺寲鏃惰皟鐢╢unName鍑芥暟
	function chengeSize() {
		var sHeight = $(window).height();//缃戦〉鍙鍖哄煙楂�
		document.getElementById("mapPanel").style.height = sHeight - 70 + "px";
	}
	MapsUtil.initMap(window.OL,"openStreetMap","${basePath}");
	//MapsUtil.viewExtent([point.getCoordinates()]);
	window.OL.tools.addDraw($('#Range').val(), setRange);

	function setRange(text){
		$('#Range').val(text);
		if(text.length>0){
			window.saveGeofenceData(text);
		}
	}
	
	function setGeofenceData(type,radius,latlng){
		//var geofence = JSON.parse(data);
		//$('#Range').val('');
		var range = {};
		range.type = type;
		range.radius = parseInt(radius);
		range.latlng = JSON.parse(latlng);
		var rangeJsonData = JSON.stringify(range);
		$('#Range').val(rangeJsonData);
		window.OL.tools.addDraw(rangeJsonData, setRange);
	}
	function saveGeofenceData(text){
		window.saveGeofenceData(text);
	}
	
	function isJSON(str) {
	    if (typeof str == 'string') {
	        try {
	            var obj=JSON.parse(str);
	            if(typeof obj == 'object' && obj ){
	                return true;
	            }else{
	                return false;
	            }
	        } catch(e) {
	            console.log('error:'+str+'!!!'+e);
	            return false;
	        }
	    }
	}
</script>

</body>
</html>