| | |
| | | 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; |
| | | } |
| | | </style> |
| | | |
| | | <body> |
| | | <div class="main_body"> |
| | | <div id="cpm">查无数据</div> |
| | | <div id="mapCanvas"></div> <!-- 百度地图 --> |
| | | <!-- 传sensorInfo,regionCode,regionName,monitorPoint,device--> |
| | | <div id="pollutionSourceParams" style="display: none;"> |
| | |
| | | style: "normal" // 设置地图风格为高端黑 |
| | | }; |
| | | var params = $.parseJSON($("#pollutionSourceParams").html()); |
| | | var weatherInfoToday = params["weatherInfoToday"]; |
| | | var weatherInfoForecast = params["weatherInfoForecast"]; |
| | | var isToday = params["isToday"]; |
| | | var month = params["month"]; |
| | | var device = params["device"]; |
| | | var cityName = params["weatherInfoToday"]["cityName"]; |
| | | var dirPoint=params["dirPoint"]; |
| | | console.log(dirPoint.lng); |
| | | console.log(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({ |
| | |
| | | }); |
| | | map.addControl(navigation); |
| | | map.addControl(new BMap.ScaleControl()); |
| | | 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.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; |
| | | var windLevel; |
| | | var condition; |
| | | if (Object.keys(weatherInfoForecast).length === 0) { |
| | | var windDir = weatherInfoToday["windDir"]; |
| | | dirPoint = getWindDir(windDir, dirPoint); |
| | | windLevel = weatherInfoToday["windLevel"]; |
| | | condition = weatherInfoToday["condition"]; |
| | | } else { |
| | | if (isToday) { |
| | | var windDir = weatherInfoToday["windDir"]; |
| | | dirPoint = getWindDir(windDir, dirPoint); |
| | | windLevel = weatherInfoToday["windLevel"]; |
| | | condition = weatherInfoToday["condition"]; |
| | | if ($.isEmptyObject(dirPoint)||$.isEmptyObject(getPollutionSourceData)||getPollutionSourceData["e18"]==0) { |
| | | showNoData(); |
| | | }else{ |
| | | var humidity=getPollutionSourceData["e6"]; |
| | | var windSpeed=getPollutionSourceData["e18"]; |
| | | 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, 17); |
| | | var polyline1 = new BMap.Polyline([ |
| | | dirPoint, |
| | | new BMap.Point(point.lng+0.01, point.lat+0.01) |
| | | ], |
| | | {strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1} |
| | | ); |
| | | var polyline2 = new BMap.Polyline([ |
| | | dirPoint, |
| | | new BMap.Point( point.lng-0.02, point.lat-0.01) |
| | | ], |
| | | {strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1} |
| | | ); |
| | | var distance=windSpeed*3600; |
| | | console.log(distance); |
| | | var arrowLength;//两点间箭头长度 |
| | | if (distance <= 5) { |
| | | arrowLength = 0; |
| | | } else if (distance > 5 && distance <= 20) { |
| | | arrowLength = 2; |
| | | } else if (distance > 20 && distance <= 50) { |
| | | arrowLength = 3; |
| | | } else if (distance > 50 && distance <= 100) { |
| | | arrowLength = 5; |
| | | } else if (distance > 100 && distance <= 200) { |
| | | arrowLength = 10; |
| | | } else if (distance > 200 && distance <= 500) { |
| | | arrowLength = 20; |
| | | } else if (distance > 500 && distance <= 1000) { |
| | | arrowLength = 40; |
| | | } else if (distance > 1000 && distance <= 2000) { |
| | | arrowLength = 80; |
| | | } else if (distance > 2000 && distance <= 3000) { |
| | | arrowLength = 120; |
| | | } else if (distance > 3000 && distance <= 10000) { |
| | | arrowLength = 500; |
| | | } else if (distance > 10000 && distance <= 20000) { |
| | | arrowLength = 1000; |
| | | } else if (distance > 20000 && distance <= 50000) { |
| | | arrowLength = 2500; |
| | | } else if (distance > 50000 && distance <= 100000) { |
| | | arrowLength = 5000; |
| | | } else if (distance > 100000 && distance <= 200000) { |
| | | arrowLength = 10000; |
| | | } else if (distance > 200000 && distance <= 500000) { |
| | | arrowLength = 25000; |
| | | } else if (distance > 500000 && distance <= 1000000) { |
| | | arrowLength = 50000; |
| | | } else if (distance > 1000000 && distance <= 2000000) { |
| | | arrowLength = 100000; |
| | | } else { |
| | | var windDir = weatherInfoForecast["windDirDay"]; |
| | | dirPoint = getWindDir(windDir, dirPoint); |
| | | windLevel = weatherInfoForecast["windLevelDay"]; |
| | | condition = weatherInfoForecast["conditionDay"]; |
| | | arrowLength = 150000; |
| | | } |
| | | } |
| | | var polyline = new BMap.Polyline([ |
| | | dirPoint, |
| | | point |
| | | ], |
| | | {strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1} |
| | | ); |
| | | map.addOverlay(polyline);// 画两点间线 |
| | | addArrow(polyline, 50, Math.PI / 7); |
| | | var winfowTextCause = "<p style='height: 44px;line-height: 22px'>汽车尾气,工厂废气,以及周边地区农田秸秆焚烧,污染传播途径是根据风向来做出调整</p>"; |
| | | var winfowTextSource; |
| | | var supplement; |
| | | if (month == 12 || month == 1 || month == 2) { |
| | | if (windLevel >= 3) { |
| | | supplement = ",但风速较大,大气扩散条件较有利,空气质量相对提升"; |
| | | map.addOverlay(polyline1);// 画两点间线 |
| | | addArrow(polyline1, arrowLength, Math.PI / 7,windSpeed); |
| | | map.addOverlay(polyline2);// 画两点间线 |
| | | addArrow(polyline2, arrowLength, Math.PI / 7,windSpeed); |
| | | 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>"; |
| | | } |
| | | if (condition.indexOf("雨") != -1) { |
| | | supplement = ",但降雨有利于对颗粒物的沉降、冲刷,改善污染状况"; |
| | | }else{ |
| | | supplement =""; |
| | | |
| | | var winfowText = '<div style="height:150px;" >'; |
| | | var opts = { |
| | | width: 380, |
| | | title: '<h3>污染分析</h3>', |
| | | enableMessage: false //设置允许信息窗发送短息 |
| | | } |
| | | winfowTextSource = "<p style='height: 22px;line-height: 22px'>压强升高气温降低,会因冷空气带来的颗粒物,导致污染上升" + supplement + "</p>"; |
| | | } else if (month == 3 || month == 4 || month == 5) { |
| | | if (windLevel >= 3) { |
| | | supplement = ",但风速较大,大气扩散条件较有利,空气质量相对提升"; |
| | | } |
| | | if (condition.indexOf("雨") != -1) { |
| | | supplement = ",但降雨有利于对颗粒物的沉降、冲刷,改善污染状况"; |
| | | }else{ |
| | | supplement =""; |
| | | } |
| | | winfowTextSource = "<p style='height: 22px;line-height: 22px'>地面逆温频率的增加使污染物在近地层不断积累" + supplement + "</p>"; |
| | | } else if (month == 6 || month == 7) { |
| | | if (windLevel >= 3) { |
| | | supplement = ",同时风速较大,加速扩散"; |
| | | } |
| | | if (condition.indexOf("雨") != -1) { |
| | | supplement = ",同时降雨有利于对颗粒物的沉降、冲刷,改善污染状况"; |
| | | }else{ |
| | | supplement =""; |
| | | } |
| | | winfowTextSource = "<p style='height: 22px;line-height: 22px'>夏季的气温条件不易发生逆温,利于污染物扩散" + supplement + "</p>"; |
| | | } else if (month == 8 || month == 9 || month == 10 || month == 11) { |
| | | if (windLevel >= 3) { |
| | | supplement = ",但风速较大,利于污染物扩散"; |
| | | } |
| | | if (condition.indexOf("雨") != -1) { |
| | | supplement = ",但降雨有利于对颗粒物的沉降、冲刷,改善污染状况"; |
| | | }else{ |
| | | supplement =""; |
| | | } |
| | | winfowTextSource = "<p style='height: 22px;line-height: 22px'>大气扩散条件不好使污染物聚集,增大了气态污染物向二次颗粒物转化的机会" + supplement + "</p>"; |
| | | 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 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); |
| | | }); |
| | | |
| | | |
| | | function addArrow(polyline, length, angleValue) { |
| | | function addArrow(polyline, length, angleValue,windSpeed) { |
| | | var linePoint = polyline.getPath();// 线的坐标串 |
| | | var arrowCount = linePoint.length; |
| | | for (var i = 1; i < arrowCount; i++) { // 在拐点处绘制箭头 |
| | |
| | | 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)); |
| | | lab = new BMap.Label("风速:"+windSpeed+"m/s", {position: pointMiddle, offset: new BMap.Size(0, -30)}); |
| | | lab.setStyle({ |
| | | color: "red", |
| | | fontSize: "16px", |
| | | backgroundColor: "1", |
| | | border: "0", |
| | | fontWeight: "bold" |
| | | }); |
| | | map.addOverlay(lab); |
| | | var Arrow = new BMap.Polyline([pointArrow, pointMiddle, pointArrow1], |
| | | {strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1}); |
| | | map.addOverlay(Arrow); |
| | | } |
| | | }; |
| | | |
| | | 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() { |
| | | var longitude = 120.987287; |
| | | var latitude = 31.391562; |
| | | var point = new BMap.Point(longitude, latitude); |
| | | map.centerAndZoom(point, 17); |
| | | setTimeout(function () { |
| | | document.getElementById("cpm").style.display = 'block'; |
| | | }, 250); |
| | | }; |
| | | </script> |