| | |
|---|
| | | } |
|---|
| | | #box { |
|---|
| | | width:300px; |
|---|
| | | height:100px; |
|---|
| | | top:80px; |
|---|
| | | left:30px; |
|---|
| | | height:400px; |
|---|
| | | top: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; |
|---|
| | |
|---|
| | | <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} |
|---|
| | |
|---|
| | | 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]) |
|---|
| | |
|---|
| | | 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]) |
|---|
| | |
|---|
| | | 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){ //绘制箭头的函数 |
|---|
