From ad89f4965a05d37aeea1481c4ab53e21ab85ca2f Mon Sep 17 00:00:00 2001
From: 于紫祥_1901 <email@yuzixiang_1910>
Date: Wed, 12 Aug 2020 09:32:58 +0800
Subject: [PATCH] 风场图update
---
src/main/webapp/view/uavdroppoint.jsp | 240 +++++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 188 insertions(+), 52 deletions(-)
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
--
Gitblit v1.8.0