From d44db08aa75fe0f243c1a9a09f35a6d8432b90fb Mon Sep 17 00:00:00 2001 From: JinPengYong <812110275@qq.com> Date: Tue, 30 Jun 2020 23:23:46 +0800 Subject: [PATCH] 无人机应用大屏页面update --- src/main/webapp/view/unorganizedMap.jsp | 107 ++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 76 insertions(+), 31 deletions(-) diff --git a/src/main/webapp/view/unorganizedMap.jsp b/src/main/webapp/view/unorganizedMap.jsp index 36d05f0..a3365c8 100644 --- a/src/main/webapp/view/unorganizedMap.jsp +++ b/src/main/webapp/view/unorganizedMap.jsp @@ -17,16 +17,16 @@ } #box { width:300px; - height:100px; + height:500px; top:80px; - left:30px; + right:30px; position:absolute; z-index:1; - border:0px solid red; - background-color:#f5f3f0; + border:2px solid red; + background-color:gainsboro; opacity: 0.8; } - #cpm { + #cpm,#cpm1{ width: 300px; height: 100px; position: absolute; @@ -57,11 +57,22 @@ <title>������������</title> </head> <body> -<div id="cpm">������������������������������������������������������</div> +<div id="cpm">���������������������������������������������������������������</div> +<div id="cpm1">������������������������������������������������������������</div> <div id="allmap" style="z-index: 0" ;> </div> <div id="box"> - <p style="text-indent: 2em;line-height: 25px;color: red">������������������������������������������������������������������������������������������������������������</p> + <p> + <img src="/img/wind_dir02.png" style="width: 30px;height: 45px;margin-left: 20px;"/> <span style="position: relative;top: -9px;"> ���������(������������������������������)</span> + </p> + <p> + <img src="/img/arrows01.png" style="margin-left: 20px;transform:rotate(90deg);width: 30px;height: 60px;"/> <span style="position: relative;top: -25px;"> ���������������������</span> + </p> + <p> + <img src="/img/arrows02.png" style="width: 30px;height: 60px;margin-left: 20px;transform:rotate(90deg);"/> <span style="position: relative;top: -25px;"> ���������������������</span> + </p> + + <p style="text-indent: 1em;line-height: 25px;color: red" id="alarm">���������������<span id="diff" ></span></br></br> ���������������������������������������������������������������������</p> </div> <div id="mapParams" style="display: none;"> ${requestScope.params} @@ -80,15 +91,45 @@ map.centerAndZoom(point, 18.5); // ���������������,������������������������������������ var device1 = params["deviceList"]; var preAngleDeviceString = params["preAngleDeviceString"]; - var wind = params["wind"]; var devices=[]; var locationList=params["locationList"]; - + var wind=params["wind"]; var color; - if (preAngleDeviceString!=""){ - var preAngleDeviceList=JSON.parse(preAngleDeviceString); + + //������������������������ + map.addControl(new BMap.MapTypeControl({ + mapTypes: [ + BMAP_HYBRID_MAP, + BMAP_NORMAL_MAP + ] + })); + map.setMapType(BMAP_HYBRID_MAP); + if (device1 != null) { + if(device1.length>1){ + for (var i = 0; i < device1.length; i++) { + var icon1 = new BMap.Icon("/img/ico00.png", new BMap.Size(48, 48)); + var mark1 = new BMap.Marker(new BMap.Point(device1[i].longitude, device1[i].latitude), {icon: icon1}); + devices.push( new BMap.Point(device1[i].longitude, device1[i].latitude)); + map.addOverlay(mark1); + } + }else { + var icon1 = new BMap.Icon("/img/ico00.png", new BMap.Size(48, 48)); + var mark1 = new BMap.Marker(new BMap.Point(device1.longitude, device1.latitude), {icon: icon1}); + devices.push( new BMap.Point(device1.longitude, device1.latitude)); + map.addOverlay(mark1); + $("#alarm").css("visibility","hidden"); + } + + } + var preAngleDeviceList=""; + if (preAngleDeviceString!=0 &&preAngleDeviceString!=1){ + preAngleDeviceList=JSON.parse(preAngleDeviceString); var diff=preAngleDeviceList[0].sensor-preAngleDeviceList[1].sensor; + var diffSensor=preAngleDeviceList[1].sensor-preAngleDeviceList[0].sensor; + diffSensor=String(diffSensor).replace(/^(.*\..{4}).*$/,"$1"); + var info=""; if (diff>0){ + info="������������������"; var polyline = new BMap.Polyline([ new BMap.Point(preAngleDeviceList[0].longitude, preAngleDeviceList[0].latitude), new BMap.Point(locationList[0][0],locationList[0][1]) @@ -111,13 +152,14 @@ map.addOverlay(polyline3); //������������ var polyline4 = new BMap.Polyline([ new BMap.Point(locationList[3][0],locationList[3][1]), - new BMap.Point(preAngleDeviceList[1].longitude, preAngleDeviceList[1].latitude) + new BMap.Point(locationList[4][0],locationList[4][1]) ], {strokeColor:"Gold", strokeWeight:8, strokeOpacity:0.5}); //������������ map.addOverlay(polyline4); //������������ var arrowLineList = new Array();//������������������������ color="Gold"; arrowLineList[arrowLineList.length] = addArrow(polyline4,30,Math.PI/7,color);//������������������������ } else { + info="������������������"; var polyline = new BMap.Polyline([ new BMap.Point(preAngleDeviceList[0].longitude, preAngleDeviceList[0].latitude), new BMap.Point(locationList[0][0],locationList[0][1]) @@ -140,34 +182,37 @@ map.addOverlay(polyline3); //������������ var polyline4 = new BMap.Polyline([ new BMap.Point(locationList[3][0],locationList[3][1]), - new BMap.Point(preAngleDeviceList[1].longitude, preAngleDeviceList[1].latitude) + new BMap.Point(locationList[4][0],locationList[4][1]) ], {strokeColor:"red", strokeWeight:8, strokeOpacity:0.5}); //������������ map.addOverlay(polyline4); //������������ var arrowLineList = new Array();//������������������������ color="red"; arrowLineList[arrowLineList.length] = addArrow(polyline4,28,Math.PI/7,color);//������������������������ } - }else { - document.getElementById("cpm").style.display = 'block'; - } - if (device1 != null) { - for (var i = 0; i < device1.length; i++) { - var icon1 = new BMap.Icon("/img/ico_co00.png", new BMap.Size(48, 48)); - var mark1 = new BMap.Marker(new BMap.Point(device1[i].longitude, device1[i].latitude), {icon: icon1}); - devices.push( new BMap.Point(device1[i].longitude, device1[i].latitude)); - map.addOverlay(mark1); + $("#diff").html(diffSensor+" ("+info+")"); + var winds=[]; + if (wind>=180){ + wind=wind-180; + }else{ + wind=wind+180; + } + for (var i = 0; i <preAngleDeviceList.length; i++) { + var icon11=new BMap.Icon("/img/wind_dir02.png", new BMap.Size(25, 25), {anchor:new BMap.Size(11, 21.5)}); + var mark11 = new BMap.Marker(new BMap.Point(preAngleDeviceList[i].longitude, preAngleDeviceList[i].latitude), {icon: icon11}); + winds.push( new BMap.Point(preAngleDeviceList[i].longitude, preAngleDeviceList[i].latitude)); + mark11.setRotation(wind); + map.addOverlay(mark11); } } - - - //������������������������ - map.addControl(new BMap.MapTypeControl({ - mapTypes: [ - BMAP_NORMAL_MAP, - BMAP_HYBRID_MAP - ] - })); + if(preAngleDeviceString==0){ + $("#box").css("visibility","hidden"); + document.getElementById("cpm").style.display = 'block'; + } + if(preAngleDeviceString==1){ + $("#box").css("visibility","hidden"); + document.getElementById("cpm1").style.display = 'block'; + } function addArrow(polyline,length,angleValue,color){ //��������������������� -- Gitblit v1.8.0