ZhuDongming
2019-09-02 e2c9154d3381b365ef4fff5367840725e0c4a57b
src/main/webapp/view/pollutionsource.jsp
@@ -79,10 +79,29 @@
        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;">
@@ -99,14 +118,13 @@
        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({
@@ -115,115 +133,139 @@
    });
    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++) { // 在拐点处绘制箭头
@@ -267,32 +309,28 @@
            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>