|  |  |  | 
|---|
|  |  |  | 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; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </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"]; | 
|---|
|  |  |  | console.log(weatherInfoToday); | 
|---|
|  |  |  | console.log(weatherInfoForecast); | 
|---|
|  |  |  | console.log(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; | 
|---|
|  |  |  | 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); | 
|---|
|  |  |  | 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); | 
|---|
|  |  |  | arrowLength = 150000; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 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>"; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 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 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>"); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 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> | 
|---|