工业级后台API v2
blame | history | patch | commit | commitdiff | ignore whitespace
ZhuDongming
2019-08-15 17c9b0305aaf3f48ea090e14dbcc3e6ab4f399c2 
 src/main/webapp/view/uavTrajectory.jsp


@@ -34,10 +34,78 @@


        padding: 0;


        list-style: none;


    }




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


    }




    .BMap_top {


        display: none;


    }




    .BMap_center {


        display: none;


    }




    .BMap_bubble_title {


        color: white;


        font-size: 13px;


        font-weight: bold;


        text-align: left;


        padding: 5px 5px 0 5px;


        background-color: #2DA0EB;


    }




    .BMap_bubble_content {


        background-color: white;


        padding: 5px 5px 10px 5px;


    }




    .BMap_pop img {


        top: 45px !important;


        left: 420px !important;


    }




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


    }




</style>




<body>


<div class="main_body">


    <div id="cpm">查无飞行轨迹</div>


    <div id="mapCanvas"></div> <!-- 百度地图 -->


    <!-- 传sensorInfo,regionCode,regionName,monitorPoint,device-->


    <div id="uavTrajectoryParams" style="display: none;">


@@ -58,8 +126,9 @@


        style: "normal" // 设置地图风格为高端黑


    };


    var params = $.parseJSON($("#uavTrajectoryParams").html());


    moralMap['params'] = params;


    var sensorInfo = params["sensorInfo"];


    var sensorInfoMin = params["sensorInfoMin"];


    var sensorInfoMax = params["sensorInfoMax"];


    //var map = new BMap.Map("mapCanvas", defaultParam);


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


    map.setCurrentCity("昆山");


@@ -71,23 +140,28 @@


    });


    map.addControl(navigation);


    map.addControl(new BMap.ScaleControl());


    var longitude;


    var latitude;


    var point;


    if (sensorInfo.length == 0) {


        longitude = 120.987287;


        latitude = 31.391562;


        point = new BMap.Point(longitude, latitude);


        map.centerAndZoom(point, 17);


        alert("查不到相关数据");


        showNoFlightTrajectory();


    }


    var trackPoints = []; //用来存放从后台获取到的所有历史轨迹点的数据


    var coincidentPoints = new Array();


    var flyingParameters = ['经度', '纬度', '高度', '速度x', '速度y', '速度z'];


    var monitorParameters = ['PM2.5', 'PM10', '一氧化碳', '二氧化硫', '二氧化氮', '臭氧', 'VOCs总量', '气压', '温度', '湿度', '核辐射'];


    if (sensorInfo.length > 0) {


        $.each(sensorInfo, function (item, value) {


            trackPoints.push(new BMap.Point(value.经度, value.纬度));


            if (typeof (value.经度) == "undefined") {


                showNoFlightTrajectory();


            } else {


                trackPoints.push(new BMap.Point(value.经度.substr(0, value.经度.length - 1), value.纬度.substr(0, value.纬度.length - 1)));


            }


        })


        for (var i = 0; i < trackPoints.length; i++) {


            var flyingData = [];


            var monitorData = [];


            var flyingDataMin = [];


            var monitorDataMin = [];


            var flyingDataMax = [];


            var monitorDataMax = [];


            var startPoint = trackPoints[i];


            var endPoint = trackPoints[i + 1];


            var marker;


@@ -95,9 +169,11 @@


            var arrowLength;//两点间箭头长度


            if (distance <= 5) {


                arrowLength = 0;


            } else if (distance > 5 && distance <= 10) {


            } else if (distance > 5 && distance <= 20) {


                arrowLength = 2;


            } else if (distance <= 100) {


            } else if (distance > 20 && distance <= 50) {


                arrowLength = 3;


            } else if (distance > 50 && distance <= 100) {


                arrowLength = 5;


            } else if (distance > 100 && distance <= 200) {


                arrowLength = 10;


@@ -132,13 +208,16 @@


                    startPoint,


                    endPoint


                ],


                {strokeColor: "green", strokeWeight: 2, strokeOpacity: 1}


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


            );


            if (i < trackPoints.length - 1) {


            if (i < trackPoints.length - 1 && trackPoints.length > 1) {


                map.addOverlay(polyline);// 画两点间线


                if (i != 0) {


                    addArrow(polyline, arrowLength, Math.PI / 7);


                if (i == 0) {


                    map.centerAndZoom(startPoint, 17);


                }


                addArrow(polyline, arrowLength, Math.PI / 7);


            } else if (trackPoints.length == 1) {


                map.centerAndZoom(trackPoints[0], 17);


            }


            if (coincidentPoints.indexOf(i) > -1) {


                //判断是否已经已经显示过该点的信息，避免重复。


@@ -147,61 +226,115 @@




            var startIcon = new BMap.Icon("/img/start.png", new BMap.Size(48, 48));


            var endIcon = new BMap.Icon("/img/end.png", new BMap.Size(48, 48));


            if (i == 0) {


                map.centerAndZoom(startPoint, 17);


                marker = new BMap.Marker(startPoint, {icon: startIcon, offset: new BMap.Size(0, -20)});


            }


            var aggregationIcon = new BMap.Icon("/img/aggregation.png", new BMap.Size(48, 48));


            if (i == trackPoints.length - 1) {


                marker = new BMap.Marker(startPoint, {icon: endIcon, offset: new BMap.Size(0, -20)});


            }


            if (i == 0) {


                marker = new BMap.Marker(startPoint, {icon: startIcon, offset: new BMap.Size(0, -20)});


            }


            if (i != 0 && i != trackPoints.length - 1) {


                marker = new BMap.Marker(startPoint);


            }


            var count = 0;


            var winfowText =


                '<div style="min-height:20px;overflow-y:auto;max-height:400px;" >';


                '<div style="min-height:20px;overflow:auto;max-height:400px;" >';


            var opts = {


                width: 420,


                title: '<h4>时间：' + sensorInfo[i].时间 + '</h4>', // 信息窗口标题


                enableMessage: false, //设置允许信息窗发送短息


            }




            var optsCoincide = {


                width: 220,


                title: '<h4>重合点坐标信息</h4>', // 信息窗口标题


                enableMessage: false, //设置允许信息窗发送短息


            }




            for (var j = i + 1; j < trackPoints.length; j++) {


                distance = map.getDistance(trackPoints[i], trackPoints[j]).toFixed(5);


                if (distance <= 1.9) {


                    if (coincidentPoints.indexOf(i) == -1) {


                        coincidentPoints.push(i);


                        winfowText += '<p id="' + i + '" onclick="openInfo(this)" onmousemove="red(this.id)" onmouseout="black(this.id)">' + "时间：" + sensorInfo[i].时间 + "</p>";


                    }


                    coincidentPoints.push(j);


                    count++;


                    marker = new BMap.Marker(startPoint, {icon: aggregationIcon});


                    winfowTextAdd = '<p id="' + j + '" onclick="openInfo(this)" onmousemove="red(this.id)" onmouseout="black(this.id)">' + "时间：" + sensorInfo[j].时间 + "</p>";


                    winfowText += winfowTextAdd;


                    if (j == trackPoints.length - 1) {


                        marker = new BMap.Marker(trackPoints[j], {icon: endIcon, offset: new BMap.Size(0, -20)});


                    }


                }


            }




            var monitorDataResult = monitorDataSort(sensorInfo[i], monitorData, monitorParameters);


            var flyingDataResult = flyingDataSort(sensorInfo[i], flyingData, flyingParameters);


            var monitorSensorsCount = -1;


            var flyingSensorsCount = -1;


            if (coincidentPoints.indexOf(i) > -1) {


                winfowText = '<p id="' + i + '" onclick="openInfo(this)" onmousemove="red(this.id)" onmouseout="black(this.id)">' + "时间：" + sensorInfo[i].时间 + "</p>" + winfowText + "</div>";


                winfowText = winfowText + "</div>";


            } else {


                for (var prop in sensorInfo[i]) {


                    if (sensorInfo[i].hasOwnProperty(prop)) {


                        winfowText += (prop + "：" + sensorInfo[i][prop] + "</br>");


                winfowText += '<h4 style="background-color: #CD5C5C;color:white;margin-bottom: 1px">监测因子信息</h4>';


                for (var prop in monitorDataResult) {


                    if (monitorDataResult.hasOwnProperty(prop)) {


                        monitorSensorsCount++;


                        winfowText += ("<p style='height: 22px;line-height: 22px'>" + prop + "：" + monitorDataResult[prop] + '<input id="a' + i + monitorSensorsCount + '" class="' + i + '" type="button" value="最小值" onclick="showMonitorMinOrMax(this,sensorInfoMin,monitorDataMin,monitorParameters)" style="width:80px;display: inline-block;position: absolute;right:120px"/><span id="aa' + i + monitorSensorsCount + '" style="width:80px;display: none;position: absolute;right:120px;text-align: center"></span><input id="b' + i + monitorSensorsCount + '" class="' + i + '" type="button" value="最大值" onclick="showMonitorMinOrMax(this,sensorInfoMax,monitorDataMax,monitorParameters)" style="width:80px;display: inline-block;position: absolute;right:25px"/><span id="bb' + i + monitorSensorsCount + '" style="width:80px;display: none;position: absolute;right:25px;text-align: center"></span>' + "</p>");


                    }


                }


                winfowText += '<h4 style="background-color: #66CD00;color:white;margin-bottom: 1px">飞行因子信息</h4>';


                for (var prop in flyingDataResult) {


                    if (flyingDataResult.hasOwnProperty(prop)) {


                        flyingSensorsCount++;


                        winfowText += ("<p style='height: 22px;line-height: 22px'>" + prop + "：" + flyingDataResult[prop] + '<input id="c' + i + flyingSensorsCount + '" class="' + i + '" type="button" value="最小值" onclick="showFlyingMinOrMax(this,sensorInfoMin,flyingDataMin,flyingParameters)" style="width:80px;display: inline-block;position: absolute;right:120px"/><span id="cc' + i + flyingSensorsCount + '" style="width:80px;display: none;position: absolute;right:120px;text-align: center"></span><input id="d' + i + flyingSensorsCount + '" class="' + i + '" type="button" value="最大值" onclick="showFlyingMinOrMax(this,sensorInfoMax,flyingDataMax,flyingParameters)" style="width:80px;display: inline-block;position: absolute;right:25px"/><span id="dd' + i + flyingSensorsCount + '" style="width:80px;display: none;position: absolute;right:25px;text-align: center"></span>' + "</p>");


                    }


                }


                winfowText += "</div>";


            }




            (function (x) {


                var infoWindow = new BMap.InfoWindow(winfowText, {enableMessage: false});


                if (coincidentPoints.indexOf(i) > -1) {


                    var infoWindow = new BMap.InfoWindow(winfowText, optsCoincide);


                } else {


                    var infoWindow = new BMap.InfoWindow(winfowText, opts);


                }


                marker.addEventListener("click", function () {


                    this.openInfoWindow(infoWindow);


                });


            })(i);




            function openInfo(e) {


                var point = new BMap.Point(sensorInfo[e.id].经度, sensorInfo[e.id].纬度);


                var winfowText1 = "";


                for (var prop in sensorInfo[e.id]) {


                    if (sensorInfo[e.id].hasOwnProperty(prop)) {


                        winfowText1 += (prop + "：" + sensorInfo[e.id][prop] + "</br>");


                var point = new BMap.Point(sensorInfo[e.id].经度.substr(0, sensorInfo[e.id].经度.length - 1), sensorInfo[e.id].纬度.substr(0, sensorInfo[e.id].纬度.length - 1));


                var flyingData = [];


                var monitorData = [];


                var flyingDataMin = [];


                var monitorDataMin = [];


                var flyingDataMax = [];


                var monitorDataMax = [];


                var monitorDataCoincide = monitorDataSort(sensorInfo[e.id], monitorData, monitorParameters);


                var flyingDataCoincide = flyingDataSort(sensorInfo[e.id], flyingData, flyingParameters);


                var winfowText1 =


                    '<div style="min-height:20px;overflow:auto;max-height:400px;" >';


                winfowText1 += '<h4 style="background-color: #CD5C5C;color:white;margin-bottom: 1px">监测因子信息</h4>';


                var monitorSensorsCoincideCount = -1;


                var flyingSensorsCoincideCount = -1;


                for (var prop in monitorDataCoincide) {


                    if (monitorDataCoincide.hasOwnProperty(prop)) {


                        monitorSensorsCoincideCount++;


                        winfowText1 += ("<p style='height: 22px;line-height: 22px'>" + prop + "：" + monitorDataCoincide[prop] + '<input id="e' + e.id + monitorSensorsCoincideCount + '" class="' + e.id + '" type="button" value="最小值" onclick="showMonitorMinOrMax(this,sensorInfoMin,monitorDataMin,monitorParameters)" style="width:80px;display: inline-block;position: absolute;right:120px"/><span id="ee' + e.id + monitorSensorsCoincideCount + '" style="width:80px;display: none;position: absolute;right:120px;text-align: center"></span><input id="f' + e.id + monitorSensorsCoincideCount + '" class="' + e.id + '" type="button" value="最大值" onclick="showMonitorMinOrMax(this,sensorInfoMax,monitorDataMax,monitorParameters)" style="width:80px;display: inline-block;position: absolute;right:25px"/><span id="ff' + e.id + monitorSensorsCoincideCount + '" style="width:80px;display: none;position: absolute;right:25px;text-align: center"></span>' + "</p>");


                    }


                }


                var infoWindow1 = new BMap.InfoWindow(winfowText1, {enableMessage: false});


                winfowText1 += '<h4 style="background-color: #66CD00;color:white;margin-bottom: 1px">飞行因子信息</h4>';


                for (var prop in flyingDataCoincide) {


                    if (flyingDataCoincide.hasOwnProperty(prop)) {


                        flyingSensorsCoincideCount++;


                        winfowText1 += ("<p style='height: 22px;line-height: 22px'>" + prop + "：" + flyingDataCoincide[prop] + '<input id="g' + e.id + flyingSensorsCoincideCount + '" class="' + e.id + '" type="button" value="最小值" onclick="showFlyingMinOrMax(this,sensorInfoMin,flyingDataMin,flyingParameters)" style="width:80px;display: inline-block;position: absolute;right:120px"/><span id="gg' + e.id + flyingSensorsCoincideCount + '" style="width:80px;display: none;position: absolute;right:120px;text-align: center"></span><input id="h' + e.id + flyingSensorsCoincideCount + '" class="' + e.id + '" type="button" value="最大值" onclick="showFlyingMinOrMax(this,sensorInfoMax,flyingDataMax,flyingParameters)" style="width:80px;display: inline-block;position: absolute;right:25px"/><span id="hh' + e.id + flyingSensorsCoincideCount + '" style="width:80px;display: none;position: absolute;right:25px;text-align: center"></span>' + "</p>");


                    }


                }


                winfowText1 += "</div>";


                var optsCoincideChild = {


                    width: 420,


                    title: '<h4>时间：' + sensorInfo[e.id].时间 + '</h4>', // 信息窗口标题


                    enableMessage: false, //设置允许信息窗发送短息


                }


                var infoWindow1 = new BMap.InfoWindow(winfowText1, optsCoincideChild);


                //开启信息窗口


                map.openInfoWindow(infoWindow1, point);


            }


@@ -215,8 +348,70 @@


                document.getElementById(x).style.color = "#000000";


            }




            function openInfoWindow() {


                map.openInfoWindow.apply(map, arguments); //开启信息窗口


            }




            function monitorDataSort(sensorMap, monitorData, monitorParameters) {


                for (var j = 0; j < monitorParameters.length; j++) {


                    $.map(sensorMap, function (value, key) {


                        if (monitorParameters[j] == key) {


                            monitorData[key] = sensorMap[key];


                        }


                    });


                }


                return monitorData;


            }




            function flyingDataSort(sensorMap, flyingData, flyingParameters) {


                for (var k = 0; k < flyingParameters.length; k++) {


                    $.map(sensorMap, function (value, key) {


                        if (flyingParameters[k] == key) {


                            flyingData[key] = sensorMap[key];


                        }


                    });


                }


                return flyingData;


            }




            function showMonitorMinOrMax(e, sensorInfoMinOrMax, monitorDataMinOrMax, monitorParameters) {


                var i = $("#" + e.id).attr('class');


                var monitorDataResultMinOrMax = monitorDataSort(sensorInfoMinOrMax[i], monitorDataMinOrMax, monitorParameters);


                $("#" + e.id).hide();


                $("#" + e.id.substr(0, 1) + e.id).html(monitorDataResultMinOrMax[monitorParameters[e.id.substr(1 + i.length, e.id.length)]]);


                $("#" + e.id.substr(0, 1) + e.id).show();


            }




            function showFlyingMinOrMax(e, sensorInfoMinOrMax, flyingDataMinOrMax, flyingParameters) {


                var i = $("#" + e.id).attr('class');


                var flyingDataResultMinOrMax = flyingDataSort(sensorInfoMinOrMax[i], flyingDataMinOrMax, flyingParameters);


                $("#" + e.id).hide();


                $("#" + e.id.substr(0, 1) + e.id).html(flyingDataResultMinOrMax[flyingParameters[e.id.substr(1 + i.length, e.id.length)]]);


                $("#" + e.id.substr(0, 1) + e.id).show();


            }




            if (count > 0) {


                var lab = new BMap.Label(count + 1, {position: startPoint, offset: new BMap.Size(-7, -23)});


                var lab;


                if (count > 0 && count <= 8) {


                    lab = new BMap.Label(count + 1, {position: startPoint, offset: new BMap.Size(-5, -9)});


                } else if (count > 8 && count <= 98) {


                    lab = new BMap.Label(count + 1, {position: startPoint, offset: new BMap.Size(-10, -9)});


                } else if (count > 98 && count <= 998) {


                    lab = new BMap.Label(count + 1, {position: startPoint, offset: new BMap.Size(-14, -9)});


                } else {


                    lab = new BMap.Label(count + 1, {position: startPoint, offset: new BMap.Size(-18, -9)});


                }


                lab.setStyle({


                    color: "#fff",


                    fontSize: "16px",


                    backgroundColor: "1",


                    border: "0",


                    fontWeight: "bold"


                });


                map.addOverlay(lab);


            }


            if (count == 0) {


                var lab = new BMap.Label(count + 1, {position: startPoint, offset: new BMap.Size(-7, -22)});


                lab.setStyle({


                    color: "#fff",


                    fontSize: "16px",


@@ -275,9 +470,19 @@


            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: "green", strokeWeight: 2, strokeOpacity: 1});


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


            map.addOverlay(Arrow);


        }


    };




    function showNoFlightTrajectory() {


        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>