工业级后台API v2
blame | history | patch | commit | commitdiff | ignore whitespace
ZhuDongming
2019-09-02 321a114af75d62f66bd5d46f01a44c955cbde286 
 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,12 @@


        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 = new BMap.Point(params["dirPoint"].lng, params["dirPoint"].lat);


    var getPollutionSourceData = params["getPollutionSourceData"];


    var windSpeed = parseFloat(getPollutionSourceData["e18"]);


    var map = new BMap.Map("mapCanvas", {enableMapClick: false});


    map.setCurrentCity("昆山");


    map.setMapStyle(mapStyle);


    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放


    var navigation = new BMap.NavigationControl({


@@ -115,107 +132,149 @@


    });


    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"];


    if ($.isEmptyObject(dirPoint) || $.isEmptyObject(getPollutionSourceData) || getPollutionSourceData["e6"] == 0 || getPollutionSourceData["e18"] == 0 || getPollutionSourceData["e23"] == 0 || windSpeed <= 0.03) {


        showNoData();


    } else {


        if (isToday) {


            var windDir = weatherInfoToday["windDir"];


            dirPoint = getWindDir(windDir, dirPoint);


            windLevel = weatherInfoToday["windLevel"];


            condition = weatherInfoToday["condition"];


        } else {


            var windDir = weatherInfoForecast["windDirDay"];


            dirPoint = getWindDir(windDir, dirPoint);


            windLevel = weatherInfoForecast["windLevelDay"];


            condition = weatherInfoForecast["conditionDay"];


        var humidity = parseFloat(getPollutionSourceData["e6"]);


        var windDir = parseFloat(getPollutionSourceData["e23"]);


        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, 16);




        //centre:椭圆中心点,X:横向经度,Y:纵向纬度


        function add_oval(centre, x, y) {


            var assemble = new Array();


            var angle;


            var dot;


            var tangent = x / y;


            for (i = 0; i < 36; i++) {


                angle = (2 * Math.PI / 36) * i;


                dot = new BMap.Point(centre.lng + Math.sin(angle) * y * tangent, centre.lat + Math.cos(angle) * y);


                assemble.push(dot);


            }


            return assemble;


        }


    }


    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 = "，但风速较大，大气扩散条件较有利，空气质量相对提升";




        //以画多边形区域的方法画扇形区域 画出以point点为圆心，半径为radius，夹角从sDegree到eDegree的扇形


        function Sector(point, radius, sDegree, eDegree) {


            var points = []; //创建构成多边形的点数组


            var step = ((eDegree - sDegree) / 10) || 10; //根据扇形的总夹角确定每步夹角度数，最大为10


            points.push(point);


            for (var i = sDegree; i < eDegree + 0.001; i += step) { //循环获取每步的圆弧上点的坐标，存入点数组


                points.push(EOffsetBearing(point, radius, i));


            }


            points.push(point);


            return points;


        }


        if (condition.indexOf("雨") != -1) {


            supplement = "，但降雨有利于对颗粒物的沉降、冲刷，改善污染状况";




        //使用数学的方法计算需要画扇形的圆弧上的点坐标


        function EOffsetBearing(point, dist, bearing) {


            var lngConv = map.getDistance(point, new BMap.Point(point.lng + 0.1, point.lat)) * 10; //计算经度与原点的距离


            var latConv = map.getDistance(point, new BMap.Point(point.lng, point.lat + 0.1)) * 10; //计算纬度与原点的距离


            var lat = dist * Math.sin(bearing * Math.PI / 180) / latConv; //正弦计算待获取的点的纬度与原点纬度差


            var lng = dist * Math.cos(bearing * Math.PI / 180) / lngConv; //余弦计算待获取的点的经度与原点经度差


            return new BMap.Point(point.lng + lng, point.lat + lat);


        }


        winfowTextSource = "<p style='height: 22px;line-height: 22px'>压强升高气温降低，会因冷空气带来的颗粒物，导致污染上升" + supplement + "</p>";


    } else if (month == 3 || month == 4 || month == 5) {


        if (windLevel >= 3) {


            supplement = "，但风速较大，大气扩散条件较有利，空气质量相对提升";




        var distance = windSpeed * 3600;


        var winDirStart = 240 - windDir;


        var winDirEnd = 300 - windDir;


        var oval = new BMap.Polygon(Sector(dirPoint, distance, winDirStart, winDirEnd), {


            strokeColor: "grey",


            strokeWeight: 1,


            strokeOpacity: 0.8,


            fillColor: "grey"


        });


        map.addOverlay(oval);


        var oval = new BMap.Polygon(Sector(dirPoint, distance * 0.66, winDirStart, winDirEnd), {


            strokeColor: "grey",


            strokeWeight: 1,


            strokeOpacity: 0.6,


            fillColor: "grey"


        });


        map.addOverlay(oval);


        var oval = new BMap.Polygon(Sector(dirPoint, distance * 0.33, winDirStart, winDirEnd), {


            strokeColor: "grey",


            strokeWeight: 1,


            strokeOpacity: 0.4,


            fillColor: "grey"


        });


        map.addOverlay(oval);




        var polyline = new BMap.Polyline([


                dirPoint,


                point


            ],


            {strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1}


        );


        addArrow(polyline, 0, Math.PI / 7, windSpeed, humidity);


        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 = "，但降雨有利于对颗粒物的沉降、冲刷，改善污染状况";




        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 == 6 || month == 7) {


        if (windLevel >= 3) {


            supplement = "，同时风速较大，加速扩散";


        }


        if (condition.indexOf("雨") != -1) {


            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 = "，但降雨有利于对颗粒物的沉降、冲刷，改善污染状况";


        }


        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, humidity) {


        var linePoint = polyline.getPath();// 线的坐标串


        var arrowCount = linePoint.length;


        for (var i = 1; i < arrowCount; i++) { // 在拐点处绘制箭头


@@ -226,7 +285,7 @@


            var delta = 0; // 主线斜率，垂直时无斜率


            var param = 0; // 代码简洁考虑


            var pixelTemX, pixelTemY, poMiddleX, poMiddleY;// 临时点坐标


            var pixelX, pixelY, pixelX1, pixelY1;// 箭头两个点


            var pixelX, pixelY;// 箭头两个点


            poMiddleX = (pixelEnd.x + pixelStart.x) / 2;


            poMiddleY = (pixelEnd.y + pixelStart.y) / 2;


            if (poMiddleX - pixelStart.x == 0) { // 斜率不存在时


@@ -238,8 +297,7 @@


                }


                // 已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法


                pixelX = pixelTemX - r * Math.tan(angle);


                pixelX1 = pixelTemX + r * Math.tan(angle);


                pixelY = pixelY1 = pixelTemY;


                pixelY = pixelTemY;


            } else { // 斜率存在时


                delta = (poMiddleY - pixelStart.y) / (poMiddleX - pixelStart.x);


                param = Math.sqrt(delta * delta + 1);


@@ -253,38 +311,31 @@


                // 已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法


                pixelX = pixelTemX + Math.tan(angle) * r * delta / param;


                pixelY = pixelTemY - Math.tan(angle) * r / param;


                pixelX1 = pixelTemX - Math.tan(angle) * r * delta / param;


                pixelY1 = pixelTemY + Math.tan(angle) * r / param;


            }


            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));


            var Arrow = new BMap.Polyline([pointArrow, pointMiddle, pointArrow1],


                {strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1});


            map.addOverlay(Arrow);


            lab = new BMap.Label("<P>风速:" + windSpeed + "m/s</p><P>湿度:" + humidity + "°</p>", {


                position: pointMiddle,


                offset: new BMap.Size(-50, -20)


            });


            lab.setStyle({


                color: "#FFFFFF",


                fontSize: "16px",


                backgroundColor: "1",


                border: "0",


                fontWeight: "bold"


            });


            map.addOverlay(lab);


        }


    };




    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>