From 641b065c69f4311f3ac2b555a9d952e4daab62ad Mon Sep 17 00:00:00 2001 From: jinpengyong <jpy123456> Date: Thu, 02 Jul 2020 13:28:06 +0800 Subject: [PATCH] update --- /dev/null | 448 ---------------------------- src/main/webapp/view/uavchannel.jsp | 245 ++++++++++++--- src/main/webapp/view/uavdroppoint.jsp | 240 +++++++++++--- src/main/java/com/moral/controller/ScreenController.java | 2 src/main/webapp/view/uavchannelnew.jsp | 21 5 files changed, 391 insertions(+), 565 deletions(-) diff --git a/src/main/java/com/moral/controller/ScreenController.java b/src/main/java/com/moral/controller/ScreenController.java index 9a1c0ce..676b2c9 100644 --- a/src/main/java/com/moral/controller/ScreenController.java +++ b/src/main/java/com/moral/controller/ScreenController.java @@ -1687,7 +1687,7 @@ params.put("description",parameters.get("description")); String paramsJson = params.toJSONString(); model.addObject("uavDroppointParams", paramsJson); - model.setViewName("uavdroppointnew"); + model.setViewName("uavdroppoint"); return model; } else { StringBuilder msg = new StringBuilder(); diff --git a/src/main/webapp/view/uavchannel.jsp b/src/main/webapp/view/uavchannel.jsp index a5efd55..24083c6 100644 --- a/src/main/webapp/view/uavchannel.jsp +++ b/src/main/webapp/view/uavchannel.jsp @@ -73,16 +73,53 @@ border-collapse: collapse; font-size: 12px; } + + #details { + position: absolute; + z-index: 1; + width: 120px; + right: 100px; + bottom: 5px; + font-size: 18px; + background-color: white; + } + + #form { + position: absolute; + z-index: 1; + right: 400px; + bottom: 5px; + font-size: 18px; + background-color: white; + border: 1px solid black; + } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=dmzBXk6VTBG1SKUvqSSEgGBU8HcuoajQ"></script> <script type="text/javascript" src="../js/jquery.min.js"></script> </head> <body> -<div id="data"> + +<div id="data" style="display:none"> <%--������������������--%> - <table id="tab" style="border:1px solid black;width: 280px"></table> + <table id="tab" style="border:1px solid black;width: 280px"> + </table> </div> + +<form id="form"> + ������: + <input type="checkbox" value="one" checked> + 0-20m + <input type="checkbox" value="two" checked> + 21-40m + <input type="checkbox" value="three" checked> + 41-60m + <input type="checkbox" value="four" checked> + 61-80m + <input type="checkbox" value="five" checked> + 80m������ +</form> +<button id="details" onclick="show()">������������</button> <div class="main_body"> <div id="cpm">������������</div> <div id="mapCanvas"></div> <!-- ������������������--> @@ -95,8 +132,8 @@ </html> <script type="text/javascript"> /* - ��������������� - * */ + ��������������� + * */ var GPS = { PI: 3.14159265358979324, x_pi: 3.14159265358979324 * 3000.0 / 180.0, @@ -233,6 +270,7 @@ var unit = params['unit']; var description = params['description']; var backgroundValue = ""; + $("#tab").append("<tr><td>������</td><td>������(��)</td><td>������(��)</td><td>������(m)</td><td>" + description + "(" + unit + ")</td></tr>");//��������������������������� var map = new BMap.Map("mapCanvas", {enableMapClick: false}); map.setMapStyle(mapStyle); @@ -241,62 +279,160 @@ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_LARGE }); + var mapType = new BMap.MapTypeControl( + { + mapTypes: [BMAP_HYBRID_MAP, BMAP_NORMAL_MAP], + anchor: BMAP_ANCHOR_TOP_LEFT + } + ); map.addControl(navigation); + map.addControl(mapType); + map.setMapType(BMAP_HYBRID_MAP); map.addControl(new BMap.ScaleControl()); if (sensorInfo.length == 0) { showNoDroppoint(); } - var trackPoints = []; //��������������������������������������������������������������� + var trackPoints = []; + var trackPointsOne = []; + var trackPointsTwo = []; + var trackPointsThree = []; + var trackPointsFour = []; + var trackPointsFive = []; if (sensorInfo.length > 0) { $.each(sensorInfo, function (item, value) { - if (typeof (value.e76) == "undefined" /*|| typeof (value.e78) == "undefined"*/) { - showNoDroppoint(); - } else { - var lon = parseFloat(value.e76.substr(0, value.e76.length - 1)); - var lat = parseFloat(value.e77.substr(0, value.e77.length - 1)); - if (lon < 70 || lon > 150 || lat > 60 || lat <= 0) { - return true; - } - var lon1 = GPS.gcj_encrypt(lat, lon).lon; - var lat1 = GPS.gcj_encrypt(lat, lon).lat; - var lon2 = GPS.bd_encrypt(lat1, lon1).lon; - var lat2 = GPS.bd_encrypt(lat1, lon1).lat; - //var heigh = parseFloat(value.e78.substr(0, value.e78.length - 1)); - var heigh = typeof (value.e78) == "undefined" ? "" : parseFloat(value.e78.substr(0, value.e78.length - 1)); - var concentration = ""; - var time=""; - $.each(value, function (key, data) { - if (key == sensorKey) { - concentration = data == "undefined" ? "" : parseFloat(data.substr(0, data.length - 1)); - } - if (key == "time") { - time = data.toString().split(" ")[1]; - } - }); - var point = new BMap.Point(lon2, lat2); - trackPoints.push(point); - $("#tab").append("<tr><td>" + time + "</td>" + "<td>" + lon2.toFixed(4) + "</td><td>" + lat2.toFixed(4) + "</td><td>" + heigh + "</td><td>" + concentration + "</td></tr>");//��������������������������� - - /*var myIcon = ""; - if (concentration > 23) { - myIcon = new BMap.Icon('/img/uav_red.png', new BMap.Size(20, 20)); - trackPoints.push(point); - } else if (concentration == 23) { - myIcon = new BMap.Icon('/img/uav_green.png', new BMap.Size(20, 20)); - } else { - return true; - }*/ + if (typeof (value.e76) == "undefined" /*|| typeof (value.e78) == "undefined"*/) { + showNoDroppoint(); + } else { + var lon = parseFloat(value.e76.substr(0, value.e76.length - 1)); + var lat = parseFloat(value.e77.substr(0, value.e77.length - 1)); + if (lon < 70 || lon > 150 || lat > 60 || lat <= 0) { + return true; } + var lon1 = GPS.gcj_encrypt(lat, lon).lon; + var lat1 = GPS.gcj_encrypt(lat, lon).lat; + var lon2 = GPS.bd_encrypt(lat1, lon1).lon; + var lat2 = GPS.bd_encrypt(lat1, lon1).lat; + //var heigh = parseFloat(value.e78.substr(0, value.e78.length - 1)); + var heigh = typeof (value.e78) == "undefined" ? "" : parseFloat(value.e78.substr(0, value.e78.length - 1)); + var concentration = ""; + var time = ""; + $.each(value, function (key, data) { + if (key == sensorKey) { + concentration = data == "undefined" ? "" : parseFloat(data.substr(0, data.length - 1)); + } + if (key == "time") { + time = data.toString().split(" ")[1]; + } + }); + var point = new BMap.Point(lon2, lat2); + var hashMap = new Map(); + hashMap.set("time", time); + hashMap.set("point", point); + hashMap.set("heigh", heigh); + hashMap.set("concentration", concentration); + if (heigh > 0 && heigh <= 20) { + trackPointsOne.push(hashMap); + } else if (heigh >= 21 && heigh <= 40) { + trackPointsTwo.push(hashMap); + } else if (heigh >= 41 && heigh <= 60) { + trackPointsThree.push(hashMap); + } else if (heigh >= 61 && heigh <= 80) { + trackPointsFour.push(hashMap); + } else if (heigh >= 81) { + trackPointsFive.push(hashMap); + } + trackPoints.push(hashMap); + $("#tab").append("<tr><td>" + time + "</td>" + "<td>" + lon2.toFixed(4) + "</td><td>" + lat2.toFixed(4) + "</td><td>" + heigh + "</td><td>" + concentration + "</td></tr>");//��������������������������� } - ) - if(trackPoints.length==0){ - showNoDroppoint(); + }); + } + if (trackPoints.length == 0) { + showNoDroppoint(); + } + + var points = getPoints(trackPoints); + map.centerAndZoom(points, 17);// ������������������������������������ + map.setViewport(points);// ������������������������������������������������������ + listen(trackPoints); + $("#form").change(function () { + map.clearOverlays(); + var result = []; + $('input:checkbox:checked').each(function () { + var val = $(this).val(); + if (val == "one") { + getResult(result, trackPointsOne); + } else if (val == "two") { + getResult(result, trackPointsTwo); + } else if (val == "three") { + getResult(result, trackPointsThree); + } else if (val == "four") { + getResult(result, trackPointsFour); + } else if (val == "five") { + getResult(result, trackPointsFive); + } + }); + var zoom = map.getZoom(); + if (zoom > 17) { + addMarkers(result); } - map.centerAndZoom(trackPoints, 17);// ������������������������������������ - map.setViewport(trackPoints);// ������������������������������������������������������ - var polygon = new BMap.Polygon(trackPoints, {strokeColor: "none",fillColor:"red", strokeWeight: 2, strokeOpacity: 1}); //��������������� + addPolygon(getPoints(result)); + listen(result); + }); + + function show() { + $("#data").toggle(); + } + + function getResult(result, arry) { + $.each(arry, function (index, value) { + result.push(value); + }); + } + + function listen(arry) { + map.addEventListener("zoomend", function () { + var points = getPoints(arry); + var zoom = map.getZoom(); + map.clearOverlays(); + if (zoom > 17) { + addMarkers(arry); + } + addPolygon(points); + }); + } + + function addMarkers(arry) { + $.each(arry, function (item, value) { + var myIcon = new BMap.Icon('/img/uav_red.png', new BMap.Size(50, 50)); + var time = value.get("time"); + var heigh = value.get("heigh"); + var concentration = value.get("concentration"); + var point = value.get("point"); + var marker = new BMap.Marker(point, {icon: myIcon}); + map.addOverlay(marker); + var lon = marker.getPosition().lng; + var lat = marker.getPosition().lat; + var opts = { + width: 200, // ������������������ + height: 100, // ������������������ + } + var infoWindow = new BMap.InfoWindow("������: " + time + "</br>������: " + lon.toFixed(4) + "��</br>������: " + lat.toFixed(4) + "��</br>������: " + heigh + "m</br>" + description + ": " + concentration + unit, opts); // ������������������������ + if (heigh == "") { + infoWindow = new BMap.InfoWindow("������: " + time + "</br>������: " + lon.toFixed(4) + "��</br>������: " + lat.toFixed(4) + "</br>" + description + ": " + concentration + unit, opts); // ������������������������ + } + marker.addEventListener("click", function () { + map.openInfoWindow(infoWindow, point); //������������������ + }); + }); + } + + function addPolygon(points) { + var polygon = new BMap.Polygon(points, { + strokeColor: "none", + fillColor: "red", + strokeOpacity: 1 + }); //��������������� map.addOverlay(polygon); //��������������� - map.setViewport(polygon.getPath()); //������������ } function showNoDroppoint() { @@ -307,4 +443,13 @@ document.getElementById("data").style.display = 'none'; }, 250); } -</script> + + function getPoints(arry) { + var points = []; + $.each(arry, function (item, value) { + var point = value.get("point"); + points.push(point); + }); + return points; + } +</script> \ No newline at end of file diff --git a/src/main/webapp/view/uavchannelnew.jsp b/src/main/webapp/view/uavchannelnew.jsp index c28a50e..5ee91b2 100644 --- a/src/main/webapp/view/uavchannelnew.jsp +++ b/src/main/webapp/view/uavchannelnew.jsp @@ -78,7 +78,6 @@ position: absolute; z-index: 1; width: 120px; - /*height: 30px;*/ right: 100px; bottom: 5px; font-size: 18px; @@ -88,8 +87,6 @@ #form { position: absolute; z-index: 1; - /* width: 300px; - height: 50px;*/ right: 400px; bottom: 5px; font-size: 18px; @@ -332,11 +329,7 @@ } }); var point = new BMap.Point(lon2, lat2); - var hashMap = new Map(); - hashMap.set("time", time); - hashMap.set("point", point); - hashMap.set("heigh", heigh); - hashMap.set("concentration", concentration); + var hashMap = {"time":time,"point":point,"heigh":heigh,"concentration":concentration}; if (heigh > 0 && heigh <= 20) { trackPointsOne.push(hashMap); } else if (heigh >= 21 && heigh <= 40) { @@ -407,10 +400,10 @@ function addMarkers(arry) { $.each(arry, function (item, value) { var myIcon = new BMap.Icon('/img/uav_red.png', new BMap.Size(50, 50)); - var time = value.get("time"); - var heigh = value.get("heigh"); - var concentration = value.get("concentration"); - var point = value.get("point"); + var time = value["time"]; + var heigh = value["heigh"]; + var concentration = value["concentration"]; + var point = value["point"]; var marker = new BMap.Marker(point, {icon: myIcon}); map.addOverlay(marker); var lon = marker.getPosition().lng; @@ -450,9 +443,9 @@ function getPoints(arry) { var points = []; $.each(arry, function (item, value) { - var point = value.get("point"); + var point = value["point"]; points.push(point); }); return points; } -</script> +</script> \ No newline at end of file diff --git a/src/main/webapp/view/uavdroppoint.jsp b/src/main/webapp/view/uavdroppoint.jsp index dbc5e1d..2b2680b 100644 --- a/src/main/webapp/view/uavdroppoint.jsp +++ b/src/main/webapp/view/uavdroppoint.jsp @@ -73,16 +73,53 @@ border-collapse: collapse; font-size: 12px; } + + #details { + position: absolute; + z-index: 1; + width: 120px; + right: 100px; + bottom: 5px; + font-size: 18px; + background-color: white; + } + + #form { + position: absolute; + z-index: 1; + right: 400px; + bottom: 5px; + font-size: 18px; + background-color: white; + border: 1px solid black; + } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=dmzBXk6VTBG1SKUvqSSEgGBU8HcuoajQ"></script> <script type="text/javascript" src="../js/jquery.min.js"></script> </head> <body> -<div id="data"> + +<div id="data" style="display:none"> <%--������������������--%> - <table id="tab" style="border:1px solid black;width: 280px"></table> + <table id="tab" style="border:1px solid black;width: 280px"> + </table> </div> + +<form id="form"> + ������: + <input type="checkbox" value="one" checked> + 0-20m + <input type="checkbox" value="two" checked> + 21-40m + <input type="checkbox" value="three" checked> + 41-60m + <input type="checkbox" value="four" checked> + 61-80m + <input type="checkbox" value="five" checked> + 80m������ +</form> +<button id="details" onclick="show()">������������</button> <div class="main_body"> <div id="cpm">������������</div> <div id="mapCanvas"></div> <!-- ������������������--> @@ -95,8 +132,8 @@ </html> <script type="text/javascript"> /* - ��������������� - * */ + ��������������� + * */ var GPS = { PI: 3.14159265358979324, x_pi: 3.14159265358979324 * 3000.0 / 180.0, @@ -232,7 +269,8 @@ var sensorKey = params['sensorKey']; var unit = params['unit']; var description = params['description']; - var backgroundValue = 32; + var backgroundValue = ""; + $("#tab").append("<tr><td>������</td><td>������(��)</td><td>������(��)</td><td>������(m)</td><td>" + description + "(" + unit + ")</td></tr>");//��������������������������� var map = new BMap.Map("mapCanvas", {enableMapClick: false}); map.setMapStyle(mapStyle); @@ -241,67 +279,156 @@ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_LARGE }); + var mapType = new BMap.MapTypeControl( + { + mapTypes: [BMAP_HYBRID_MAP, BMAP_NORMAL_MAP], + anchor: BMAP_ANCHOR_TOP_LEFT + } + ); map.addControl(navigation); + map.addControl(mapType); + map.setMapType(BMAP_HYBRID_MAP); map.addControl(new BMap.ScaleControl()); if (sensorInfo.length == 0) { showNoDroppoint(); } - var trackPoints = []; //��������������������������������������������������������������� + var trackPoints = []; + var trackPointsOne = []; + var trackPointsTwo = []; + var trackPointsThree = []; + var trackPointsFour = []; + var trackPointsFive = []; if (sensorInfo.length > 0) { $.each(sensorInfo, function (item, value) { - if (typeof (value.e76) == "undefined" /*|| typeof (value.e78) == "undefined"*/) { - showNoDroppoint(); - } else { - var lon = parseFloat(value.e76.substr(0, value.e76.length - 1)); - var lat = parseFloat(value.e77.substr(0, value.e77.length - 1)); - if (lon < 70 || lon > 150 || lat > 60 || lat <= 0) { - return true; - } - var lon1 = GPS.gcj_encrypt(lat, lon).lon; - var lat1 = GPS.gcj_encrypt(lat, lon).lat; - var lon2 = GPS.bd_encrypt(lat1, lon1).lon; - var lat2 = GPS.bd_encrypt(lat1, lon1).lat; - //var heigh = parseFloat(value.e78.substr(0, value.e78.length - 1)); - var heigh = typeof (value.e78) == "undefined" ? "" : parseFloat(value.e78.substr(0, value.e78.length - 1)); - var concentration = ""; - var time = ""; - $.each(value, function (key, data) { - if (key == sensorKey) { - concentration = data == "undefined" ? "" : parseFloat(data.substr(0, data.length - 1)); - } - if (key == "time") { - time = data.toString().split(" ")[1]; - } - }); - var point = new BMap.Point(lon2, lat2); - trackPoints.push(point); - $("#tab").append("<tr><td>" + time + "</td>" + "<td>" + lon2.toFixed(4) + "</td><td>" + lat2.toFixed(4) + "</td><td>" + heigh + "</td><td>" + concentration + "</td></tr>");//��������������������������� - - /* var myIcon = ""; - if (concentration > 23) { - myIcon = new BMap.Icon('/img/uav_red.png', new BMap.Size(20, 20)); - trackPoints.push(point); - } else if (concentration == 23) { - myIcon = new BMap.Icon('/img/uav_green.png', new BMap.Size(20, 20)); - } else { - return true; - }*/ + if (typeof (value.e76) == "undefined" /*|| typeof (value.e78) == "undefined"*/) { + showNoDroppoint(); + } else { + var lon = parseFloat(value.e76.substr(0, value.e76.length - 1)); + var lat = parseFloat(value.e77.substr(0, value.e77.length - 1)); + if (lon < 70 || lon > 150 || lat > 60 || lat <= 0) { + return true; } + var lon1 = GPS.gcj_encrypt(lat, lon).lon; + var lat1 = GPS.gcj_encrypt(lat, lon).lat; + var lon2 = GPS.bd_encrypt(lat1, lon1).lon; + var lat2 = GPS.bd_encrypt(lat1, lon1).lat; + //var heigh = parseFloat(value.e78.substr(0, value.e78.length - 1)); + var heigh = typeof (value.e78) == "undefined" ? "" : parseFloat(value.e78.substr(0, value.e78.length - 1)); + var concentration = ""; + var time = ""; + $.each(value, function (key, data) { + if (key == sensorKey) { + concentration = data == "undefined" ? "" : parseFloat(data.substr(0, data.length - 1)); + } + if (key == "time") { + time = data.toString().split(" ")[1]; + } + }); + var point = new BMap.Point(lon2, lat2); + var hashMap = {"time": time, "point": point, "heigh": heigh, "concentration": concentration}; + if (heigh > 0 && heigh <= 20) { + trackPointsOne.push(hashMap); + } else if (heigh >= 21 && heigh <= 40) { + trackPointsTwo.push(hashMap); + } else if (heigh >= 41 && heigh <= 60) { + trackPointsThree.push(hashMap); + } else if (heigh >= 61 && heigh <= 80) { + trackPointsFour.push(hashMap); + } else if (heigh >= 81) { + trackPointsFive.push(hashMap); + } + trackPoints.push(hashMap); + $("#tab").append("<tr><td>" + time + "</td>" + "<td>" + lon2.toFixed(4) + "</td><td>" + lat2.toFixed(4) + "</td><td>" + heigh + "</td><td>" + concentration + "</td></tr>");//��������������������������� } - ) - if(trackPoints.length==0){ - showNoDroppoint(); + }); + } + if (trackPoints.length == 0) { + showNoDroppoint(); + } + + var points = getPoints(trackPoints); + map.centerAndZoom(points, 17);// ������������������������������������ + map.setViewport(points);// ������������������������������������������������������ + listen(trackPoints); + $("#form").change(function () { + map.clearOverlays(); + var result = []; + $('input:checkbox:checked').each(function () { + var val = $(this).val(); + if (val == "one") { + getResult(result, trackPointsOne); + } else if (val == "two") { + getResult(result, trackPointsTwo); + } else if (val == "three") { + getResult(result, trackPointsThree); + } else if (val == "four") { + getResult(result, trackPointsFour); + } else if (val == "five") { + getResult(result, trackPointsFive); + } + }); + var zoom = map.getZoom(); + if (zoom > 17) { + addMarkers(result); } - map.centerAndZoom(trackPoints, 17);// ������������������������������������ - map.setViewport(trackPoints);// ������������������������������������������������������ - var polygon = new BMap.Polygon(trackPoints, { + addPolygon(getPoints(result)); + listen(result); + }); + + function show() { + $("#data").toggle(); + } + + function getResult(result, arry) { + $.each(arry, function (index, value) { + result.push(value); + }); + } + + function listen(arry) { + map.addEventListener("zoomend", function () { + var points = getPoints(arry); + var zoom = map.getZoom(); + map.clearOverlays(); + if (zoom > 17) { + addMarkers(arry); + } + addPolygon(points); + }); + } + + function addMarkers(arry) { + $.each(arry, function (item, value) { + var myIcon = new BMap.Icon('/img/uav_red.png', new BMap.Size(50, 50)); + var time = value["time"]; + var heigh = value["heigh"]; + var concentration = value["concentration"]; + var point = value["point"]; + var marker = new BMap.Marker(point, {icon: myIcon}); + map.addOverlay(marker); + var lon = marker.getPosition().lng; + var lat = marker.getPosition().lat; + var opts = { + width: 200, // ������������������ + height: 100, // ������������������ + } + var infoWindow = new BMap.InfoWindow("������: " + time + "</br>������: " + lon.toFixed(4) + "��</br>������: " + lat.toFixed(4) + "��</br>������: " + heigh + "m</br>" + description + ": " + concentration + unit, opts); // ������������������������ + if (heigh == "") { + infoWindow = new BMap.InfoWindow("������: " + time + "</br>������: " + lon.toFixed(4) + "��</br>������: " + lat.toFixed(4) + "</br>" + description + ": " + concentration + unit, opts); // ������������������������ + } + marker.addEventListener("click", function () { + map.openInfoWindow(infoWindow, point); //������������������ + }); + }); + } + + function addPolygon(points) { + var polygon = new BMap.Polygon(points, { strokeColor: "none", fillColor: "red", - strokeWeight: 2, strokeOpacity: 1 }); //��������������� map.addOverlay(polygon); //��������������� - map.setViewport(polygon.getPath()); //������������ } function showNoDroppoint() { @@ -312,4 +439,13 @@ document.getElementById("data").style.display = 'none'; }, 250); } -</script> + + function getPoints(arry) { + var points = []; + $.each(arry, function (item, value) { + var point = value["point"]; + points.push(point); + }); + return points; + } +</script> \ No newline at end of file diff --git a/src/main/webapp/view/uavdroppointnew.jsp b/src/main/webapp/view/uavdroppointnew.jsp deleted file mode 100644 index abf3339..0000000 --- a/src/main/webapp/view/uavdroppointnew.jsp +++ /dev/null @@ -1,448 +0,0 @@ -<%@ page contentType="text/html;charset=UTF-8" language="java" %> -<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> -<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> -<!DOCTYPE html> -<html> -<head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> - <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> - <style type="text/css"> - body, - html, - #mapCanvas { - width: 100%; - height: 100%; - overflow: hidden; - margin: 0; - z-index: 0; - font-size: 14px; - font-family: "������������"; - } - - .main_body { - border: 0; - margin: 0; - width: 100%; - height: 100%; - position: relative; - } - - * { - margin: 0; - padding: 0; - list-style: none; - } - - #cpm { - width: 300px; - height: 100px; - position: absolute; - background-color: #ffffff; - display: none; - left: 50%; - top: 50%; - margin-left: -150px; - margin-top: -50px; - z-index: 11; - color: #000000; - border: 2px solid #FF7F50; - font-size: 28px; - line-height: 100px; - text-align: center; - } - - #data { - overflow: scroll; - width: 300px; - height: 400px; - top: 20px; - right: 5px; - position: absolute; - z-index: 1; - background-color: gainsboro; - opacity: 0.8; - border: 2px solid red; - } - - .trr th, td { - border: 1px solid black; - text-align: center; - } - - table { - border-collapse: collapse; - font-size: 12px; - } - - #details { - position: absolute; - z-index: 1; - width: 100px; - height: 30px; - right: 100px; - bottom: 5px; - font-size: 100%; - } - - #form { - position: absolute; - z-index: 1; - width: 100px; - height: 30px; - right: 200px; - bottom: 5px; - font-size: 100%; - } - </style> - <script type="text/javascript" - src="http://api.map.baidu.com/api?v=2.0&ak=dmzBXk6VTBG1SKUvqSSEgGBU8HcuoajQ"></script> - <script type="text/javascript" src="../js/jquery.min.js"></script> -</head> -<body> - -<div id="data" style="display: none"> - <%--������������������--%> - <table id="tab" style="border:1px solid black;width: 280px"> - </table> -</div> - -<form id="form"> - <label> - <select id="select"><!--������������--> - <option value="zero" selected>������</option> - <option value="one">0-20m</option> - <option value="two">21-40m</option> - <option value="three">41-60m</option><!--���������������������������������������--> - <option value="four">61-80m</option> - <option value="five">80m������</option> - </select> - </label> -</form> -<button id="details" onclick="show()">������������</button> -<div class="main_body"> - <div id="cpm">������������</div> - <div id="mapCanvas"></div> <!-- ������������������--> - <!-- ���sensorInfo,regionCode,regionName,monitorPoint,device--> - <div id="uavDroppointParams" style="display: none;"> - ${requestScope.uavDroppointParams} - </div> -</div> -</body> -</html> -<script type="text/javascript"> - function show() { - $("#data").toggle(); - } - - /* - ��������������� - * */ - var GPS = { - PI: 3.14159265358979324, - x_pi: 3.14159265358979324 * 3000.0 / 180.0, - delta: function (lat, lon) { - var a = 6378245.0; // a: ������������������������������������������������������������������ - var ee = 0.00669342162296594323; // ee: ��������������������� - var dLat = this.transformLat(lon - 105.0, lat - 35.0); - var dLon = this.transformLon(lon - 105.0, lat - 35.0); - var radLat = lat / 180.0 * this.PI; - var magic = Math.sin(radLat); - magic = 1 - ee * magic * magic; - var sqrtMagic = Math.sqrt(magic); - dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI); - dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI); - return {'lat': dLat, 'lon': dLon}; - }, - - //WGS-84 to GCJ-02 - gcj_encrypt: function (wgsLat, wgsLon) { - if (this.outOfChina(wgsLat, wgsLon)) - return {'lat': wgsLat, 'lon': wgsLon}; - - var d = this.delta(wgsLat, wgsLon); - return {'lat': wgsLat + d.lat, 'lon': wgsLon + d.lon}; - }, - //GCJ-02 to WGS-84 - gcj_decrypt: function (gcjLat, gcjLon) { - if (this.outOfChina(gcjLat, gcjLon)) - return {'lat': gcjLat, 'lon': gcjLon}; - - var d = this.delta(gcjLat, gcjLon); - return {'lat': gcjLat - d.lat, 'lon': gcjLon - d.lon}; - }, - //GCJ-02 to WGS-84 exactly - gcj_decrypt_exact: function (gcjLat, gcjLon) { - var initDelta = 0.01; - var threshold = 0.000000001; - var dLat = initDelta, dLon = initDelta; - var mLat = gcjLat - dLat, mLon = gcjLon - dLon; - var pLat = gcjLat + dLat, pLon = gcjLon + dLon; - var wgsLat, wgsLon, i = 0; - while (1) { - wgsLat = (mLat + pLat) / 2; - wgsLon = (mLon + pLon) / 2; - var tmp = this.gcj_encrypt(wgsLat, wgsLon) - dLat = tmp.lat - gcjLat; - dLon = tmp.lon - gcjLon; - if ((Math.abs(dLat) < threshold) && (Math.abs(dLon) < threshold)) - break; - - if (dLat > 0) pLat = wgsLat; else mLat = wgsLat; - if (dLon > 0) pLon = wgsLon; else mLon = wgsLon; - - if (++i > 10000) break; - } - return {'lat': wgsLat, 'lon': wgsLon}; - }, - //GCJ-02 to BD-09 - bd_encrypt: function (gcjLat, gcjLon) { - var x = gcjLon, y = gcjLat; - var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi); - var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.x_pi); - bdLon = z * Math.cos(theta) + 0.0065; - bdLat = z * Math.sin(theta) + 0.006; - return {'lat': bdLat, 'lon': bdLon}; - }, - //BD-09 to GCJ-02 - bd_decrypt: function (bdLat, bdLon) { - var x = bdLon - 0.0065, y = bdLat - 0.006; - var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi); - var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi); - var gcjLon = z * Math.cos(theta); - var gcjLat = z * Math.sin(theta); - return {'lat': gcjLat, 'lon': gcjLon}; - }, - //WGS-84 to Web mercator - //mercatorLat -> y mercatorLon -> x - mercator_encrypt: function (wgsLat, wgsLon) { - var x = wgsLon * 20037508.34 / 180.; - var y = Math.log(Math.tan((90. + wgsLat) * this.PI / 360.)) / (this.PI / 180.); - y = y * 20037508.34 / 180.; - return {'lat': y, 'lon': x}; - }, - // Web mercator to WGS-84 - // mercatorLat -> y mercatorLon -> x - mercator_decrypt: function (mercatorLat, mercatorLon) { - var x = mercatorLon / 20037508.34 * 180.; - var y = mercatorLat / 20037508.34 * 180.; - y = 180 / this.PI * (2 * Math.atan(Math.exp(y * this.PI / 180.)) - this.PI / 2); - return {'lat': y, 'lon': x}; - }, - // two point's distance - distance: function (latA, lonA, latB, lonB) { - var earthR = 6371000.; - var x = Math.cos(latA * this.PI / 180.) * Math.cos(latB * this.PI / 180.) * Math.cos((lonA - lonB) * this.PI / 180); - var y = Math.sin(latA * this.PI / 180.) * Math.sin(latB * this.PI / 180.); - var s = x + y; - if (s > 1) s = 1; - if (s < -1) s = -1; - var alpha = Math.acos(s); - var distance = alpha * earthR; - return distance; - }, - outOfChina: function (lat, lon) { - if (lon < 72.004 || lon > 137.8347) - return true; - if (lat < 0.8293 || lat > 55.8271) - return true; - return false; - }, - transformLat: function (x, y) { - var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x)); - ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0; - ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0; - ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0; - return ret; - }, - transformLon: function (x, y) { - var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x)); - ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0; - ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0; - ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0; - return ret; - } - }; - - var mapStyle = { - features: ["road", "building", "water", "land"], // ������������������poi - style: "normal" // ������������������������������ - }; - var params = $.parseJSON($("#uavDroppointParams").html()); - var sensorInfo = params["sensorInfo"]; - var sensorKey = params['sensorKey']; - var unit = params['unit']; - var description = params['description']; - var backgroundValue = ""; - - $("#tab").append("<tr><td>������</td><td>������(��)</td><td>������(��)</td><td>������(m)</td><td>" + description + "(" + unit + ")</td></tr>");//��������������������������� - var map = new BMap.Map("mapCanvas", {enableMapClick: false}); - map.setMapStyle(mapStyle); - map.enableScrollWheelZoom(true); // ������������������������ - var navigation = new BMap.NavigationControl({ - anchor: BMAP_ANCHOR_BOTTOM_RIGHT, - type: BMAP_NAVIGATION_CONTROL_LARGE - }); - var mapType = new BMap.MapTypeControl( - { - mapTypes: [BMAP_HYBRID_MAP, BMAP_NORMAL_MAP], - anchor: BMAP_ANCHOR_TOP_LEFT - } - ); - map.addControl(navigation); - map.addControl(mapType); - map.setMapType(BMAP_HYBRID_MAP); - map.addControl(new BMap.ScaleControl()); - if (sensorInfo.length == 0) { - showNoDroppoint(); - } - var trackPoints = []; - var trackPointsOne = []; - var trackPointsTwo = []; - var trackPointsThree = []; - var trackPointsFour = []; - var trackPointsFive = []; - if (sensorInfo.length > 0) { - $.each(sensorInfo, function (item, value) { - if (typeof (value.e76) == "undefined" /*|| typeof (value.e78) == "undefined"*/) { - showNoDroppoint(); - } else { - var lon = parseFloat(value.e76.substr(0, value.e76.length - 1)); - var lat = parseFloat(value.e77.substr(0, value.e77.length - 1)); - if (lon < 70 || lon > 150 || lat > 60 || lat <= 0) { - return true; - } - var lon1 = GPS.gcj_encrypt(lat, lon).lon; - var lat1 = GPS.gcj_encrypt(lat, lon).lat; - var lon2 = GPS.bd_encrypt(lat1, lon1).lon; - var lat2 = GPS.bd_encrypt(lat1, lon1).lat; - //var heigh = parseFloat(value.e78.substr(0, value.e78.length - 1)); - var heigh = typeof (value.e78) == "undefined" ? "" : parseFloat(value.e78.substr(0, value.e78.length - 1)); - var concentration = ""; - var time = ""; - $.each(value, function (key, data) { - if (key == sensorKey) { - concentration = data == "undefined" ? "" : parseFloat(data.substr(0, data.length - 1)); - } - if (key == "time") { - time = data.toString().split(" ")[1]; - } - }); - var point = new BMap.Point(lon2, lat2); - var hashMap = new Map(); - hashMap.set("time", time); - hashMap.set("point", point); - hashMap.set("heigh", heigh); - hashMap.set("concentration", concentration); - if (heigh > 0 && heigh <= 20) { - trackPointsOne.push(hashMap); - } else if (heigh >= 21 && heigh <= 40) { - trackPointsTwo.push(hashMap); - } else if (heigh >= 41 && heigh <= 60) { - trackPointsThree.push(hashMap); - } else if (heigh >= 61 && heigh <= 80) { - trackPointsFour.push(hashMap); - } else if (heigh >= 81) { - trackPointsFive.push(hashMap); - } - trackPoints.push(hashMap); - $("#tab").append("<tr><td>" + time + "</td>" + "<td>" + lon2.toFixed(4) + "</td><td>" + lat2.toFixed(4) + "</td><td>" + heigh + "</td><td>" + concentration + "</td></tr>");//��������������������������� - } - }); - } - if (trackPoints.length == 0) { - showNoDroppoint(); - } - - var points = getPoints(trackPoints); - map.centerAndZoom(points, 17);// ������������������������������������ - map.setViewport(points);// ������������������������������������������������������ - listen(trackPoints); - $("#select").change(function () { - map.clearOverlays(); - var val = $("#select").val(); - var arry = ""; - if (val == "one") { - arry = trackPointsOne; - } else if (val == "two") { - arry = trackPointsTwo; - } else if (val == "three") { - arry = trackPointsThree; - } else if (val == "four") { - arry = trackPointsFour; - } else if (val == "five") { - arry = trackPointsFive; - } else if (val == "zero") { - arry = trackPoints; - } - var zoom = map.getZoom(); - if (zoom > 17) { - addMarkers(arry); - } - addPolygon(getPoints(arry)); - listen(arry); - }) - - function listen(arry) { - map.addEventListener("zoomend", function () { - var points = getPoints(arry); - var zoom = map.getZoom(); - map.clearOverlays(); - if (zoom > 17) { - addMarkers(arry); - } - addPolygon(points); - }); - } - - function addMarkers(arry) { - $.each(arry, function (item, value) { - var myIcon = new BMap.Icon('/img/uav_red.png', new BMap.Size(50, 50)); - var time = value.get("time"); - var heigh = value.get("heigh"); - var concentration = value.get("concentration"); - var point = value.get("point"); - var marker = new BMap.Marker(point, {icon: myIcon}); - map.addOverlay(marker); - var lon = marker.getPosition().lng; - var lat = marker.getPosition().lat; - var opts = { - width: 200, // ������������������ - height: 100, // ������������������ - } - var infoWindow = new BMap.InfoWindow("������: " + time + "</br>������: " + lon.toFixed(4) + "��</br>������: " + lat.toFixed(4) + "��</br>������: " + heigh + "m</br>" + description + ": " + concentration + unit, opts); // ������������������������ - if (heigh == "") { - infoWindow = new BMap.InfoWindow("������: " + time + "</br>������: " + lon.toFixed(4) + "��</br>������: " + lat.toFixed(4) + "</br>" + description + ": " + concentration + unit, opts); // ������������������������ - } - marker.addEventListener("click", function () { - map.openInfoWindow(infoWindow, point); //������������������ - }); - }); - } - - function addPolygon(points) { - var polygon = new BMap.Polygon(points, { - strokeColor: "none", - fillColor: "red", - strokeOpacity: 1 - }); //��������������� - map.addOverlay(polygon); //��������������� - } - - function showNoDroppoint() { - var point = new BMap.Point(120.987287, 31.391562); - map.centerAndZoom(point, 17); - setTimeout(function () { - document.getElementById("cpm").style.display = 'block'; - document.getElementById("data").style.display = 'none'; - }, 250); - } - - function getPoints(arry) { - var points = []; - $.each(arry, function (item, value) { - var point = value.get("point"); - points.push(point); - }); - return points; - } -</script> -- Gitblit v1.8.0