From 1babbf1c0b2bc8d27f2874c85369e394b545594a Mon Sep 17 00:00:00 2001 From: ZhuDongming <773644075@qq.com> Date: Mon, 11 May 2020 11:24:00 +0800 Subject: [PATCH] add轨迹信息显示按秒级显示,update轨迹数据先从history表查询,update报表单位问题 --- src/main/webapp/view/pollutionsource.jsp | 507 +++++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 424 insertions(+), 83 deletions(-) diff --git a/src/main/webapp/view/pollutionsource.jsp b/src/main/webapp/view/pollutionsource.jsp index 31d1fd0..927aa8c 100644 --- a/src/main/webapp/view/pollutionsource.jsp +++ b/src/main/webapp/view/pollutionsource.jsp @@ -34,10 +34,96 @@ padding: 0; list-style: none; } + + .BMap_top { + display: none; + } + + .BMap_center { + display: none; + } + + .BMap_bubble_title { + color: white; + padding: 0 5px 0 5px; + background-color: #2DA0EB; + } + + .BMap_bubble_content { + background-color: white; + padding: 5px; + } + + .BMap_pop > img { + top: 42px !important; + margin-left: -10px; + } + + .BMap_pop div:nth-child(1) div { + display: none; + } + + .BMap_pop div:nth-child(3) { + display: none; + } + + .BMap_pop div:nth-child(5) { + display: none; + } + + .BMap_pop div:nth-child(7) { + display: none; + } + + .BMap_pop div:nth-child(9) { + top: 35px !important; + border-radius: 5px; + } + + #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; + } + + #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"> + <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;"> @@ -54,16 +140,11 @@ style: "normal" // ������������������������������ }; var params = $.parseJSON($("#pollutionSourceParams").html()); - var weatherInfoToday = params["weatherInfoToday"]; - var weatherInfoForecast = params["weatherInfoForecast"]; - var isToday = params["isToday"]; - console.log(weatherInfoToday); - console.log(weatherInfoForecast); - console.log(isToday); + var month = params["month"]; var device = params["device"]; - var cityName = params["weatherInfoToday"]["cityName"]; + var dirPoint = new BMap.Point(params["dirPoint"].lng, params["dirPoint"].lat); + var getPollutionSourceData = params["getPollutionSourceData"]; var map = new BMap.Map("mapCanvas", {enableMapClick: false}); - map.setCurrentCity("������"); map.setMapStyle(mapStyle); map.enableScrollWheelZoom(true); // ������������������������ var navigation = new BMap.NavigationControl({ @@ -76,58 +157,274 @@ 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.setCurrentCity(cityName); - map.centerAndZoom(point, 19); - var bounds = map.getBounds(); //������������������������ - var sw = bounds.getSouthWest(); //���������������������������(������������) - var ne = bounds.getNorthEast(); //���������������������������(������������) - var wn = new BMap.Point(sw.lng, ne.lat); //���������������������������(������������) - var es = new BMap.Point(ne.lng, sw.lat); //���������������������������(������������) - var n = new BMap.Point(longitude, ne.lat); - var s = new BMap.Point(longitude, sw.lat); - var w = new BMap.Point(sw.lng, latitude); - var e = new BMap.Point(ne.lng, latitude); - var dirPoint; - if (Object.keys(weatherInfoForecast).length === 0) { - var windDir = weatherInfoToday["windDir"]; - dirPoint = getWindDir(windDir, dirPoint); - } else { - if (isToday) { - var windDir = weatherInfoToday["windDir"]; - dirPoint = getWindDir(windDir, dirPoint); - } else { - var windDir = weatherInfoForecast["windDirDay"]; - dirPoint = getWindDir(windDir, dirPoint); - } + 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 distance = windSpeed * 3600; + 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) + }); + var marker2 = new BMap.Marker(EOffsetBearing(dirPoint, distance * 0.31, winDirEnd), { + icon: icon2, + offset: new BMap.Size(0, -20) + }); + var marker3 = new BMap.Marker(EOffsetBearing(dirPoint, distance * 0.61, winDirStart), { + icon: icon1, + offset: new BMap.Size(0, -20) + }); + 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); } - var polyline = new BMap.Polyline([ - dirPoint, - point - ], - {strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1} - ); - map.addOverlay(polyline);// ��������������� - addArrow(polyline, 50, Math.PI / 7); - var winfowText = - '<div style="min-height:20px;overflow:auto;max-height:330px;" >'; - var opts = { - width: 220, - height: 220, - enableMessage: false //��������������������������������� - } - winfowText += ("<p style='height: 22px;line-height: 22px'></p>"); + $("#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); - winfowText += "</div>"; - marker.addEventListener("click", function () { - var infoWindow = new BMap.InfoWindow(winfowText, opts); - this.openInfoWindow(infoWindow); + 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; + } - function addArrow(polyline, length, angleValue) { + //��������������������������������������������� ���������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++) { // ������������������������ @@ -138,7 +435,7 @@ var delta = 0; // ��������������������������������� var param = 0; // ������������������ var pixelTemX, pixelTemY, poMiddleX, poMiddleY;// ��������������� - var pixelX, pixelY, pixelX1, pixelY1;// ��������������� + var pixelX, pixelY;// ��������������� poMiddleX = (pixelEnd.x + pixelStart.x) / 2; poMiddleY = (pixelEnd.y + pixelStart.y) / 2; if (poMiddleX - pixelStart.x == 0) { // ������������������ @@ -150,8 +447,7 @@ } // ��������������������������������������������������������������������������������������� pixelX = pixelTemX - r * Math.tan(angle); - pixelX1 = pixelTemX + r * Math.tan(angle); - pixelY = pixelY1 = pixelTemY; + pixelY = pixelTemY; } else { // ��������������� delta = (poMiddleY - pixelStart.y) / (poMiddleX - pixelStart.x); param = Math.sqrt(delta * delta + 1); @@ -165,38 +461,83 @@ // ��������������������������������������������������������������������������������������� pixelX = pixelTemX + Math.tan(angle) * r * delta / param; pixelY = pixelTemY - Math.tan(angle) * r / param; - pixelX1 = pixelTemX - Math.tan(angle) * r * delta / param; - pixelY1 = pixelTemY + Math.tan(angle) * r / param; } - var pointArrow = map.pixelToPoint(new BMap.Pixel(pixelX, pixelY)); - var pointArrow1 = map.pixelToPoint(new BMap.Pixel(pixelX1, pixelY1)); var pointMiddle = map.pixelToPoint(new BMap.Pixel(poMiddleX, poMiddleY)); - var Arrow = new BMap.Polyline([pointArrow, pointMiddle, pointArrow1], - {strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1}); - map.addOverlay(Arrow); + 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: "#EE3B3B", + fontSize: "16px", + backgroundColor: "1", + border: "0", + fontWeight: "bold" + }); + map.addOverlay(lab); } }; - function getWindDir(windDir, dirPoint) { - if (windDir == "������") { - dirPoint = n; - } else if (windDir == "������") { - dirPoint = s; - } else if (windDir == "������") { - dirPoint = w; - } else if (windDir == "������") { - dirPoint = e; - } else if (windDir == "���������") { - dirPoint = wn; - } else if (windDir == "���������") { - dirPoint = ne; - } else if (windDir == "���������") { - dirPoint = sw; - } else if (windDir == "���������") { - dirPoint = es; - } else { - dirPoint = n; - } - return dirPoint; + function showNoData() { + 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); }; + </script> -- Gitblit v1.8.0