From 21bc39e477ebf9421378aed76062e2be1f1e7f9e Mon Sep 17 00:00:00 2001
From: jinpengyong <jpy123456>
Date: Fri, 19 Jun 2020 10:26:30 +0800
Subject: [PATCH] 无人机落点,污染源通道,溯源应用
---
src/main/webapp/view/pollutionsource.jsp | 492 ++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 347 insertions(+), 145 deletions(-)
diff --git a/src/main/webapp/view/pollutionsource.jsp b/src/main/webapp/view/pollutionsource.jsp
index 645061f..927aa8c 100644
--- a/src/main/webapp/view/pollutionsource.jsp
+++ b/src/main/webapp/view/pollutionsource.jsp
@@ -97,11 +97,33 @@
line-height: 100px;
text-align: center;
}
+
+ #show {
+ position: absolute;
+ z-index: 1;
+ top: 30px;
+ right: 50px;
+ display: inline-block;
+ width: 100px;
+ height: 40px;
+ border-width: 0px;
+ border-radius: 3px;
+ background: #6495ED;
+ cursor: pointer;
+ outline: none;
+ color: white;
+ font-size: 20px;
+ }
+
+ #show:hover {
+ background: #5CACEE;
+ }
</style>
<body>
<div class="main_body">
- <div id="cpm">������������</div>
+ <input type="button" id="show" value="������������"/>
+ <div id="cpm"></div>
<div id="mapCanvas"></div> <!-- ������������ -->
<!-- ���sensorInfo,regionCode,regionName,monitorPoint,device-->
<div id="pollutionSourceParams" style="display: none;">
@@ -122,7 +144,6 @@
var device = params["device"];
var dirPoint = new BMap.Point(params["dirPoint"].lng, params["dirPoint"].lat);
var getPollutionSourceData = params["getPollutionSourceData"];
- var windSpeed = parseFloat(getPollutionSourceData["e18"]);
var map = new BMap.Map("mapCanvas", {enableMapClick: false});
map.setMapStyle(mapStyle);
map.enableScrollWheelZoom(true); // ������������������������
@@ -132,149 +153,278 @@
});
map.addControl(navigation);
map.addControl(new BMap.ScaleControl());
- if ($.isEmptyObject(dirPoint) || $.isEmptyObject(getPollutionSourceData) || getPollutionSourceData["e6"] == 0 || getPollutionSourceData["e18"] == 0 || getPollutionSourceData["e23"] == 0 || windSpeed <= 0.03) {
- showNoData();
- } else {
- var humidity = parseFloat(getPollutionSourceData["e6"]);
+ var longitude = params["device"]["longitude"];
+ var latitude = params["device"]["latitude"];
+ var point = new BMap.Point(longitude, latitude);
+ var icon = new BMap.Icon("/img/ico00.png", new BMap.Size(50, 50));
+ var icon1 = new BMap.Icon("/img/ico01.png", new BMap.Size(50, 50));
+ var icon2 = new BMap.Icon("/img/ico02.png", new BMap.Size(50, 50));
+ var marker = new BMap.Marker(point, {icon: icon, offset: new BMap.Size(0, -20)});
+ map.addOverlay(marker);
+ map.centerAndZoom(point, 16);
+ var humidity = 0;
+ var temperature = 0;
+ if (!$.isEmptyObject(dirPoint) && !$.isEmptyObject(getPollutionSourceData) && typeof (getPollutionSourceData["e18"]) != "undefined" && typeof (getPollutionSourceData["e23"]) != "undefined" && getPollutionSourceData["e18"] != 0) {
+ var windSpeed = parseFloat(getPollutionSourceData["e18"]);
var windDir = parseFloat(getPollutionSourceData["e23"]);
- var longitude = params["device"]["longitude"];
- var latitude = params["device"]["latitude"];
- var point = new BMap.Point(longitude, latitude);
- var icon = new BMap.Icon("/img/ico00.png", new BMap.Size(50, 50));
- var marker = new BMap.Marker(point, {icon: icon, offset: new BMap.Size(0, -20)});
- map.addOverlay(marker);
- map.centerAndZoom(point, 16);
-
- //centre:���������������,X:������������,Y:������������
- function add_oval(centre, x, y) {
- var assemble = new Array();
- var angle;
- var dot;
- var tangent = x / y;
- for (i = 0; i < 36; i++) {
- angle = (2 * Math.PI / 36) * i;
- dot = new BMap.Point(centre.lng + Math.sin(angle) * y * tangent, centre.lat + Math.cos(angle) * y);
- assemble.push(dot);
- }
- return assemble;
- }
-
- //��������������������������������������������� ���������point������������������������radius������������sDegree���eDegree���������
- function Sector(point, radius, sDegree, eDegree) {
- var points = []; //���������������������������������
- var step = ((eDegree - sDegree) / 10) || 10; //������������������������������������������������������������10
- points.push(point);
- for (var i = sDegree; i < eDegree + 0.001; i += step) { //������������������������������������������������������������
- points.push(EOffsetBearing(point, radius, i));
- }
- points.push(point);
- return points;
- }
-
- //������������������������������������������������������������������
- function EOffsetBearing(point, dist, bearing) {
- var lngConv = map.getDistance(point, new BMap.Point(point.lng + 0.1, point.lat)) * 10; //������������������������������
- var latConv = map.getDistance(point, new BMap.Point(point.lng, point.lat + 0.1)) * 10; //������������������������������
- var lat = dist * Math.sin(bearing * Math.PI / 180) / latConv; //������������������������������������������������������
- var lng = dist * Math.cos(bearing * Math.PI / 180) / lngConv; //������������������������������������������������������
- return new BMap.Point(point.lng + lng, point.lat + lat);
- }
-
var distance = windSpeed * 3600;
- var winDirStart = 240 - windDir;
- var winDirEnd = 300 - windDir;
- var oval = new BMap.Polygon(Sector(dirPoint, distance, winDirStart, winDirEnd), {
- strokeColor: "grey",
- strokeWeight: 1,
- strokeOpacity: 0.8,
- fillColor: "grey"
+ var winDirStart = 255 - windDir;
+ var winDirEnd = 285 - windDir;
+ var marker1 = new BMap.Marker(EOffsetBearing(dirPoint, distance * 0.15, winDirStart), {
+ icon: icon2,
+ offset: new BMap.Size(0, -20)
});
- map.addOverlay(oval);
- var oval = new BMap.Polygon(Sector(dirPoint, distance * 0.66, winDirStart, winDirEnd), {
- strokeColor: "grey",
- strokeWeight: 1,
- strokeOpacity: 0.6,
- fillColor: "grey"
+ var marker2 = new BMap.Marker(EOffsetBearing(dirPoint, distance * 0.31, winDirEnd), {
+ icon: icon2,
+ offset: new BMap.Size(0, -20)
});
- map.addOverlay(oval);
- var oval = new BMap.Polygon(Sector(dirPoint, distance * 0.33, winDirStart, winDirEnd), {
- strokeColor: "grey",
- strokeWeight: 1,
- strokeOpacity: 0.4,
- fillColor: "grey"
+ var marker3 = new BMap.Marker(EOffsetBearing(dirPoint, distance * 0.61, winDirStart), {
+ icon: icon1,
+ offset: new BMap.Size(0, -20)
});
- map.addOverlay(oval);
-
- var polyline = new BMap.Polyline([
- dirPoint,
- point
- ],
- {strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1}
- );
- addArrow(polyline, 0, Math.PI / 7, windSpeed, humidity);
- var winfowTextCause = "<p style='height: 44px;line-height: 22px'>���������������������������������������������������������������������������������������������������������������������</p>";
- var winfowTextSource;
- var supplement;
- if (month == 12 || month == 1 || month == 2) {
- if (windSpeed >= 3.4) {
- supplement = "���������������������������������������������������������������������������";
- }
- if (humidity >= 90.0) {
- supplement = "������������������������������������������������������������������������";
- } else {
- supplement = "";
- }
- winfowTextSource = "<p style='height: 22px;line-height: 22px'>���������������������������������������������������������������������������������" + supplement + "</p>";
- } else if (month == 3 || month == 4 || month == 5) {
- if (windSpeed >= 3.4) {
- supplement = "���������������������������������������������������������������������������";
- }
- if (humidity >= 90.0) {
- supplement = "������������������������������������������������������������������������";
- } else {
- supplement = "";
- }
- winfowTextSource = "<p style='height: 22px;line-height: 22px'>���������������������������������������������������������������" + supplement + "</p>";
- } else if (month == 6 || month == 7) {
- if (windSpeed >= 3.4) {
- supplement = "������������������������������������";
- }
- if (humidity >= 90.0) {
- supplement = "���������������������������������������������������������������������������";
- } else {
- supplement = "";
- }
- winfowTextSource = "<p style='height: 22px;line-height: 22px'>���������������������������������������,���������������������" + supplement + "</p>";
- } else if (month == 8 || month == 9 || month == 10 || month == 11) {
- if (windSpeed >= 3.4) {
- supplement = "������������������������������������������";
- }
- if (humidity >= 90.0) {
- supplement = "������������������������������������������������������������������������";
- } else {
- supplement = "";
- }
- winfowTextSource = "<p style='height: 22px;line-height: 22px'>������������������������������������������������������������������������������������������������������" + supplement + "</p>";
- }
-
- var winfowText = '<div style="height:150px;" >';
- var opts = {
- width: 380,
- title: '<h3>������������</h3>',
- enableMessage: false //���������������������������������
- }
- winfowText += '<h3 style="background-color: #CD5C5C;color:white;margin-bottom: 1px">������������</h3>';
- winfowText += winfowTextCause;
- winfowText += '<h3 style="background-color: #66CD00;color:white;margin-bottom: 1px">������������</h3>';
- winfowText += winfowTextSource;
- winfowText += "</div>";
- marker.addEventListener("click", function () {
- var infoWindow = new BMap.InfoWindow(winfowText, opts);
- this.openInfoWindow(infoWindow);
+ var marker4 = new BMap.Marker(EOffsetBearing(dirPoint, distance * 0.78, winDirEnd), {
+ icon: icon1,
+ offset: new BMap.Size(0, -20)
});
+ map.addOverlay(marker1);
+ map.addOverlay(marker2);
+ map.addOverlay(marker3);
+ map.addOverlay(marker4);
}
- function addArrow(polyline, length, angleValue, windSpeed, humidity) {
+ $("#show").one('click', function () {
+ setTimeout(function () {
+ if ($.isEmptyObject(dirPoint) || $.isEmptyObject(getPollutionSourceData) || typeof (getPollutionSourceData["e18"]) == "undefined" || typeof (getPollutionSourceData["e23"]) == "undefined" || getPollutionSourceData["e18"] === 0) {
+ showNoData();
+ } else {
+ if (typeof (getPollutionSourceData["e6"]) != "undefined") {
+ humidity = parseFloat(getPollutionSourceData["e6"]);
+ }
+ if (typeof (getPollutionSourceData["e7"]) != "undefined") {
+ temperature = parseFloat(getPollutionSourceData["e7"]);
+ }
+ var windSpeed = parseFloat(getPollutionSourceData["e18"]);
+ var windDir = parseFloat(getPollutionSourceData["e23"]);
+ var selectSensorKey = getPollutionSourceData["selectSensorKey"];
+ var markerDir = new BMap.Marker(dirPoint);
+ lab = new BMap.Label("���������������������������������������������</br>" + selectSensorKey + "������", {
+ position: dirPoint,
+ offset: new BMap.Size(20, -40)
+ });
+ lab.setStyle({
+ color: "#EE3B3B",
+ fontSize: "16px",
+ backgroundColor: "1",
+ fontWeight: "bold"
+ });
+ map.addOverlay(lab);
+
+ var distance = windSpeed * 3600;
+ var winDirStartLeft = 240 - windDir;
+ var winDirEndLeft = 250 - windDir;
+ var winDirStartMiddle = 250 - windDir;
+ var winDirEndMiddle = 290 - windDir;
+ var winDirStartRight = 290 - windDir;
+ var winDirEndRight = 300 - windDir;
+ var winDirStart = 255 - windDir;
+ var winDirEnd = 285 - windDir;
+ var polyline1 = new BMap.Polyline([
+ dirPoint,
+ EOffsetBearing(dirPoint, distance, winDirStart)
+ ],
+ {strokeColor: "red", strokeWeight: 4, strokeOpacity: 1}
+ );
+ var polyline2 = new BMap.Polyline([
+ dirPoint,
+ EOffsetBearing(dirPoint, distance, winDirEnd)
+ ],
+ {strokeColor: "red", strokeWeight: 4, strokeOpacity: 1}
+ );
+ map.addOverlay(polyline1);// ���������������
+ map.addOverlay(polyline2);// ���������������
+ map.addOverlay(markerDir);
+ setTimeout(function () {
+ var ovalLeft = new BMap.Polygon(Sector(dirPoint, distance, winDirStartLeft, winDirEndLeft), {
+ strokeColor: "#ADADAD",
+ strokeWeight: 0.1,
+ strokeOpacity: 0.7,
+ fillColor: "#ADADAD"
+ });
+ map.addOverlay(ovalLeft);
+ var oval = new BMap.Polygon(Sector(dirPoint, distance, winDirStartMiddle, winDirEndMiddle), {
+ strokeColor: "#A6A6A6",
+ strokeWeight: 0.1,
+ strokeOpacity: 0.95,
+ fillColor: "#A6A6A6"
+ });
+ map.addOverlay(oval);
+ var ovalRight = new BMap.Polygon(Sector(dirPoint, distance, winDirStartRight, winDirEndRight), {
+ strokeColor: "#ADADAD",
+ strokeWeight: 0.1,
+ strokeOpacity: 0.7,
+ fillColor: "#ADADAD"
+ });
+ map.addOverlay(ovalRight);
+ }, 1500);
+ setTimeout(function () {
+ var ovalLeft = new BMap.Polygon(Sector(dirPoint, distance * 0.66, winDirStartLeft, winDirEndLeft), {
+ strokeColor: "#ADADAD",
+ strokeWeight: 0.1,
+ strokeOpacity: 0.5,
+ fillColor: "#ADADAD"
+ });
+ map.addOverlay(ovalLeft);
+ var oval = new BMap.Polygon(Sector(dirPoint, distance * 0.66, winDirStartMiddle, winDirEndMiddle), {
+ strokeColor: "#A6A6A6",
+ strokeWeight: 0.1,
+ strokeOpacity: 0.75,
+ fillColor: "#A6A6A6"
+ });
+ map.addOverlay(oval);
+ var ovalRight = new BMap.Polygon(Sector(dirPoint, distance * 0.66, winDirStartRight, winDirEndRight), {
+ strokeColor: "#ADADAD",
+ strokeWeight: 0.1,
+ strokeOpacity: 0.7,
+ fillColor: "#ADADAD"
+ });
+ map.addOverlay(ovalRight);
+ var polyline = new BMap.Polyline([
+ dirPoint,
+ point
+ ],
+ {strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1}
+ );
+ addArrow(polyline, 0, Math.PI / 7, temperature, humidity, windSpeed, windDir);
+ }, 1000);
+ setTimeout(function () {
+ var ovalLeft = new BMap.Polygon(Sector(dirPoint, distance * 0.33, winDirStartLeft, winDirEndLeft), {
+ strokeColor: "#ADADAD",
+ strokeWeight: 0.1,
+ strokeOpacity: 0.3,
+ fillColor: "#ADADAD"
+ });
+ map.addOverlay(ovalLeft);
+ var oval = new BMap.Polygon(Sector(dirPoint, distance * 0.33, winDirStartMiddle, winDirEndMiddle), {
+ strokeColor: "#A6A6A6",
+ strokeWeight: 0.1,
+ strokeOpacity: 0.55,
+ fillColor: "#A6A6A6"
+ });
+ var ovalRight = new BMap.Polygon(Sector(dirPoint, distance * 0.33, winDirStartRight, winDirEndRight), {
+ strokeColor: "#ADADAD",
+ strokeWeight: 0.1,
+ strokeOpacity: 0.7,
+ fillColor: "#ADADAD"
+ });
+ map.addOverlay(ovalRight);
+ map.addOverlay(oval);
+ }, 500);
+
+ var winfowTextCause = "<p style='height: 22px;line-height: 22px'>������������������������������������������������������������������</p>";
+ var winfowTextSource;
+ var supplement;
+ if (selectSensorKey == "������") {
+ winfowTextCause = "<p style='height: 44px;line-height: 22px'>���������������������������������������������������������������������������������������������������������������������������������������������</p>";
+ winfowTextSource = "<p style='height: 22px;line-height: 22px'>NOx������VOCs������������</p>";
+ } else {
+ if (month == 12 || month == 1 || month == 2) {
+ if (windSpeed >= 3.4) {
+ supplement = "���������������������������������������������������������������������������";
+ }
+ if (humidity >= 90.0) {
+ supplement = "������������������������������������������������������������������������";
+ } else {
+ supplement = "";
+ }
+ winfowTextSource = "<p style='height: 22px;line-height: 22px'>���������������������������������������������������������������������������������" + supplement + "</p>";
+ } else if (month == 3 || month == 4 || month == 5) {
+ if (windSpeed >= 3.4) {
+ supplement = "���������������������������������������������������������������������������";
+ }
+ if (humidity >= 90.0) {
+ supplement = "������������������������������������������������������������������������";
+ } else {
+ supplement = "";
+ }
+ winfowTextSource = "<p style='height: 22px;line-height: 22px'>���������������������������������������������������������������" + supplement + "</p>";
+ } else if (month == 6 || month == 7) {
+ if (windSpeed >= 3.4) {
+ supplement = "������������������������������������";
+ }
+ if (humidity >= 90.0) {
+ supplement = "���������������������������������������������������������������������������";
+ } else {
+ supplement = "";
+ }
+ winfowTextSource = "<p style='height: 22px;line-height: 22px'>���������������������������������������,���������������������" + supplement + "</p>";
+ } else if (month == 8 || month == 9 || month == 10 || month == 11) {
+ if (windSpeed >= 3.4) {
+ supplement = "������������������������������������������";
+ }
+ if (humidity >= 90.0) {
+ supplement = "������������������������������������������������������������������������";
+ } else {
+ supplement = "";
+ }
+ winfowTextSource = "<p style='height: 22px;line-height: 22px'>������������������������������������������������������������������������������������������������������" + supplement + "</p>";
+ }
+ }
+
+ var winfowText = '<div style="height:150px;" >';
+ var opts = {
+ width: 380,
+ title: '<h3>������������</h3>',
+ enableMessage: false //���������������������������������
+ }
+ winfowText += '<h3 style="background-color: #CD5C5C;color:white;margin-bottom: 1px">������������</h3>';
+ winfowText += winfowTextCause;
+ winfowText += '<h3 style="background-color: #66CD00;color:white;margin-bottom: 1px">������������</h3>';
+ winfowText += winfowTextSource;
+ winfowText += "</div>";
+ marker.addEventListener("click", function () {
+ var infoWindow = new BMap.InfoWindow(winfowText, opts);
+ this.openInfoWindow(infoWindow);
+ });
+ }
+ }, 1500);
+ });
+
+ //centre:���������������,X:������������,Y:������������
+ function add_oval(centre, x, y) {
+ var assemble = new Array();
+ var angle;
+ var dot;
+ var tangent = x / y;
+ for (i = 0; i < 36; i++) {
+ angle = (2 * Math.PI / 36) * i;
+ dot = new BMap.Point(centre.lng + Math.sin(angle) * y * tangent, centre.lat + Math.cos(angle) * y);
+ assemble.push(dot);
+ }
+ return assemble;
+ }
+
+ //��������������������������������������������� ���������point������������������������radius������������sDegree���eDegree���������
+ function Sector(point, radius, sDegree, eDegree) {
+ var points = []; //���������������������������������
+ var step = ((eDegree - sDegree) / 100) || 1; //������������������������������������������������������������10
+ points.push(point);
+ for (var i = sDegree; i < eDegree + 0.001; i += step) { //������������������������������������������������������������
+ points.push(EOffsetBearing(point, radius, i));
+ }
+ points.push(point);
+ return points;
+ }
+
+ //������������������������������������������������������������������
+ function EOffsetBearing(point, dist, bearing) {
+ var lngConv = map.getDistance(point, new BMap.Point(point.lng + 0.1, point.lat)) * 10; //������������������������������
+ var latConv = map.getDistance(point, new BMap.Point(point.lng, point.lat + 0.1)) * 10; //������������������������������
+ var lat = dist * Math.sin(bearing * Math.PI / 180) / latConv; //������������������������������������������������������
+ var lng = dist * Math.cos(bearing * Math.PI / 180) / lngConv; //������������������������������������������������������
+ return new BMap.Point(point.lng + lng, point.lat + lat);
+ }
+
+ function addArrow(polyline, length, angleValue, temperature, humidity, windSpeed, windDir) {
var linePoint = polyline.getPath();// ���������������
var arrowCount = linePoint.length;
for (var i = 1; i < arrowCount; i++) { // ������������������������
@@ -313,12 +463,47 @@
pixelY = pixelTemY - Math.tan(angle) * r / param;
}
var pointMiddle = map.pixelToPoint(new BMap.Pixel(poMiddleX, poMiddleY));
- lab = new BMap.Label("<P>������:" + windSpeed + "m/s</p><P>������:" + humidity + "��</p>", {
- position: pointMiddle,
- offset: new BMap.Size(-50, -20)
- });
+ var windDirection;
+ if (windDir == 0) {
+ windDirection = "������";
+ } else if (windDir == 90) {
+ windDirection = "������";
+ } else if (windDir == 180) {
+ windDirection = "������";
+ } else if (windDir == 270) {
+ windDirection = "������";
+ } else if (windDir > 0 && windDir < 90) {
+ windDirection = "���������";
+ } else if (windDir > 90 && windDir < 180) {
+ windDirection = "���������";
+ } else if (windDir > 180 && windDir < 270) {
+ windDirection = "���������";
+ } else if (windDir > 270 && windDir < 360) {
+ windDirection = "���������";
+ }
+ if (temperature != 0 && humidity != 0) {
+ lab = new BMap.Label("<P>������:" + temperature + "���</p><P>������:" + humidity + "%</p><P>������:" + windSpeed + "m/s</p><P>������:" + windDirection + "</p>", {
+ position: pointMiddle,
+ offset: new BMap.Size(-50, -40)
+ });
+ } else if (temperature == 0 && humidity != 0) {
+ lab = new BMap.Label("<P>������:" + humidity + "%</p><P>������:" + windSpeed + "m/s</p><P>������:" + windDirection + "</p>", {
+ position: pointMiddle,
+ offset: new BMap.Size(-50, -40)
+ });
+ } else if (temperature != 0 && humidity == 0) {
+ lab = new BMap.Label("<P>������:" + temperature + "���</p><P>������:" + windSpeed + "m/s</p><P>������:" + windDirection + "</p>", {
+ position: pointMiddle,
+ offset: new BMap.Size(-50, -40)
+ });
+ } else {
+ lab = new BMap.Label("<P>������:" + windSpeed + "m/s</p><P>������:" + windDirection + "</p>", {
+ position: pointMiddle,
+ offset: new BMap.Size(-50, -40)
+ });
+ }
lab.setStyle({
- color: "#FFFFFF",
+ color: "#EE3B3B",
fontSize: "16px",
backgroundColor: "1",
border: "0",
@@ -329,11 +514,28 @@
};
function showNoData() {
- var longitude = 120.987287;
- var latitude = 31.391562;
- var point = new BMap.Point(longitude, latitude);
map.centerAndZoom(point, 17);
setTimeout(function () {
+ if (JSON.stringify(getPollutionSourceData) == JSON.stringify({})) {
+ document.getElementById("cpm").innerText = "���������������������������";
+ } else {
+ if (getPollutionSourceData["e18"] === 0) {
+ document.getElementById("cpm").style.width = '380px';
+ document.getElementById("cpm").innerText = "���������0���������������������";
+ }
+ if (typeof (getPollutionSourceData["e18"]) == "undefined") {
+ document.getElementById("cpm").style.width = '400px';
+ document.getElementById("cpm").innerText = "������������������������������������";
+ }
+ if (typeof (getPollutionSourceData["e23"]) == "undefined") {
+ document.getElementById("cpm").style.width = '400px';
+ document.getElementById("cpm").innerText = "������������������������������������";
+ }
+ if (typeof (getPollutionSourceData["e18"]) == "undefined" && typeof (getPollutionSourceData["e23"]) == "undefined") {
+ document.getElementById("cpm").style.width = '500px';
+ document.getElementById("cpm").innerText = "������������������������������������������������";
+ }
+ }
document.getElementById("cpm").style.display = 'block';
}, 250);
};
--
Gitblit v1.8.0