于紫祥_1901
2020-12-23 828915552e4f96b0cd898b87d4159852d620c63d
src/main/webapp/view/uavchannel.jsp
@@ -64,10 +64,6 @@
            border: 2px solid red;
        }
        .trr {
            border-collapse: collapse;
        }
        .trr th, td {
            border: 1px solid black;
            text-align: center;
@@ -77,6 +73,26 @@
            border-collapse: collapse;
            font-size: 12px;
        }
        #details {
            position: absolute;
            z-index: 1;
            width: 120px;
            right: 100px;
            bottom: 5px;
            font-size: 18px;
            background-color: white;
        }
        #form {
            position: absolute;
            z-index: 1;
            right: 400px;
            bottom: 5px;
            font-size: 18px;
            background-color: white;
            border: 1px solid black;
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=dmzBXk6VTBG1SKUvqSSEgGBU8HcuoajQ"></script>
@@ -84,33 +100,178 @@
</head>
<body>
<div id="data">
<div id="data" style="display:none">
    <%--存放数据的表--%>
    <table id="tab" style="border:1px solid black;width: 280px">
    </table>
</div>
<form id="form">
    高度:
    <input type="checkbox" value="one" checked>
    0-20m
    <input type="checkbox" value="two" checked>
    21-40m
    <input type="checkbox" value="three" checked>
    41-60m
    <input type="checkbox" value="four" checked>
    61-80m
    <input type="checkbox" value="five" checked>
    80m以上
</form>
<button id="details" onclick="show()">详细数据</button>
<div class="main_body">
    <div id="cpm">查无落点</div>
    <div id="mapCanvas"></div> <!-- 百度地图容器-->
    <!-- 传sensorInfo,regionCode,regionName,monitorPoint,device-->
    <div id="uavDroppointParams" style="display: none;">
        ${requestScope.uavDroppointParams}
    <div id="uavChannelParams" style="display: none;">
        ${requestScope.uavChannelParams}
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    /*
   经纬度转换
   * */
    var GPS = {
        PI: 3.14159265358979324,
        x_pi: 3.14159265358979324 * 3000.0 / 180.0,
        delta: function (lat, lon) {
            var a = 6378245.0; //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
            var ee = 0.00669342162296594323; //  ee: 椭球的偏心率。
            var dLat = this.transformLat(lon - 105.0, lat - 35.0);
            var dLon = this.transformLon(lon - 105.0, lat - 35.0);
            var radLat = lat / 180.0 * this.PI;
            var magic = Math.sin(radLat);
            magic = 1 - ee * magic * magic;
            var sqrtMagic = Math.sqrt(magic);
            dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI);
            dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI);
            return {'lat': dLat, 'lon': dLon};
        },
        //WGS-84 to GCJ-02
        gcj_encrypt: function (wgsLat, wgsLon) {
            if (this.outOfChina(wgsLat, wgsLon))
                return {'lat': wgsLat, 'lon': wgsLon};
            var d = this.delta(wgsLat, wgsLon);
            return {'lat': wgsLat + d.lat, 'lon': wgsLon + d.lon};
        },
        //GCJ-02 to WGS-84
        gcj_decrypt: function (gcjLat, gcjLon) {
            if (this.outOfChina(gcjLat, gcjLon))
                return {'lat': gcjLat, 'lon': gcjLon};
            var d = this.delta(gcjLat, gcjLon);
            return {'lat': gcjLat - d.lat, 'lon': gcjLon - d.lon};
        },
        //GCJ-02 to WGS-84 exactly
        gcj_decrypt_exact: function (gcjLat, gcjLon) {
            var initDelta = 0.01;
            var threshold = 0.000000001;
            var dLat = initDelta, dLon = initDelta;
            var mLat = gcjLat - dLat, mLon = gcjLon - dLon;
            var pLat = gcjLat + dLat, pLon = gcjLon + dLon;
            var wgsLat, wgsLon, i = 0;
            while (1) {
                wgsLat = (mLat + pLat) / 2;
                wgsLon = (mLon + pLon) / 2;
                var tmp = this.gcj_encrypt(wgsLat, wgsLon)
                dLat = tmp.lat - gcjLat;
                dLon = tmp.lon - gcjLon;
                if ((Math.abs(dLat) < threshold) && (Math.abs(dLon) < threshold))
                    break;
                if (dLat > 0) pLat = wgsLat; else mLat = wgsLat;
                if (dLon > 0) pLon = wgsLon; else mLon = wgsLon;
                if (++i > 10000) break;
            }
            return {'lat': wgsLat, 'lon': wgsLon};
        },
        //GCJ-02 to BD-09
        bd_encrypt: function (gcjLat, gcjLon) {
            var x = gcjLon, y = gcjLat;
            var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi);
            var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.x_pi);
            bdLon = z * Math.cos(theta) + 0.0065;
            bdLat = z * Math.sin(theta) + 0.006;
            return {'lat': bdLat, 'lon': bdLon};
        },
        //BD-09 to GCJ-02
        bd_decrypt: function (bdLat, bdLon) {
            var x = bdLon - 0.0065, y = bdLat - 0.006;
            var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi);
            var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi);
            var gcjLon = z * Math.cos(theta);
            var gcjLat = z * Math.sin(theta);
            return {'lat': gcjLat, 'lon': gcjLon};
        },
        //WGS-84 to Web mercator
        //mercatorLat -> y mercatorLon -> x
        mercator_encrypt: function (wgsLat, wgsLon) {
            var x = wgsLon * 20037508.34 / 180.;
            var y = Math.log(Math.tan((90. + wgsLat) * this.PI / 360.)) / (this.PI / 180.);
            y = y * 20037508.34 / 180.;
            return {'lat': y, 'lon': x};
        },
        // Web mercator to WGS-84
        // mercatorLat -> y mercatorLon -> x
        mercator_decrypt: function (mercatorLat, mercatorLon) {
            var x = mercatorLon / 20037508.34 * 180.;
            var y = mercatorLat / 20037508.34 * 180.;
            y = 180 / this.PI * (2 * Math.atan(Math.exp(y * this.PI / 180.)) - this.PI / 2);
            return {'lat': y, 'lon': x};
        },
        // two point's distance
        distance: function (latA, lonA, latB, lonB) {
            var earthR = 6371000.;
            var x = Math.cos(latA * this.PI / 180.) * Math.cos(latB * this.PI / 180.) * Math.cos((lonA - lonB) * this.PI / 180);
            var y = Math.sin(latA * this.PI / 180.) * Math.sin(latB * this.PI / 180.);
            var s = x + y;
            if (s > 1) s = 1;
            if (s < -1) s = -1;
            var alpha = Math.acos(s);
            var distance = alpha * earthR;
            return distance;
        },
        outOfChina: function (lat, lon) {
            if (lon < 72.004 || lon > 137.8347)
                return true;
            if (lat < 0.8293 || lat > 55.8271)
                return true;
            return false;
        },
        transformLat: function (x, y) {
            var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
            ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
            ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0;
            ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0;
            return ret;
        },
        transformLon: function (x, y) {
            var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
            ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
            ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0;
            ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0;
            return ret;
        }
    };
    var mapStyle = {
        features: ["road", "building", "water", "land"], // 隐藏地图上的poi
        style: "normal" // 设置地图风格为高端黑
    };
    var params = $.parseJSON($("#uavDroppointParams").html());
    var params = $.parseJSON($("#uavChannelParams").html());
    var sensorInfo = params["sensorInfo"];
    var sensorKey = params['sensorKey'];
    var unit = params['unit'];
    var description=params['description'];
    var backgroundValue=32;
    $("#tab").append("<tr><td>经度(°)</td><td>纬度(°)</td><td>高度(m)</td><td>"+description+"(" + unit + ")</td></tr>");//控制输出的数据格式
    var description = params['description'];
    var backgroundValue = "";
    $("#tab").append("<tr><td>时间</td><td>经度(°)</td><td>纬度(°)</td><td>高度(m)</td><td>" + description + "(" + unit + ")</td></tr>");//控制输出的数据格式
    var map = new BMap.Map("mapCanvas", {enableMapClick: false});
    map.setMapStyle(mapStyle);
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
@@ -118,60 +279,160 @@
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        type: BMAP_NAVIGATION_CONTROL_LARGE
    });
    var mapType = new BMap.MapTypeControl(
        {
            mapTypes: [BMAP_HYBRID_MAP, BMAP_NORMAL_MAP],
            anchor: BMAP_ANCHOR_TOP_LEFT
        }
    );
    map.addControl(navigation);
    map.addControl(mapType);
    map.setMapType(BMAP_HYBRID_MAP);
    map.addControl(new BMap.ScaleControl());
    if (sensorInfo.length == 0) {
        showNoDroppoint();
    }
    var trackPoints = []; //用来存放从后台获取到的所有历史轨迹点的数据
    var trackPoints = [];
    var trackPointsOne = [];
    var trackPointsTwo = [];
    var trackPointsThree = [];
    var trackPointsFour = [];
    var trackPointsFive = [];
    if (sensorInfo.length > 0) {
        $.each(sensorInfo, function (item, value) {
                if (typeof (value.e76) == "undefined" || typeof (value.e78) == "undefined") {
                    showNoDroppoint();
                } else {
                    var lon = parseFloat(value.e76.substr(0, value.e76.length - 1)).toFixed(4);
                    var lat = parseFloat(value.e77.substr(0, value.e77.length - 1)).toFixed(4);
                    if (lon <= 0 || lat <= 0 || lon > 180 || lat > 180) {
                        return true;
                    }
                    var heigh = parseFloat(value.e78.substr(0, value.e78.length - 1));
                    var concentration = "";
                    $.each(value, function (key, data) {
                        if (key == sensorKey) {
                            concentration = data == "undefined" ? "" : parseFloat(data.substr(0, data.length - 1));
                        }
                    });
                    var point = new BMap.Point(lon, lat);
                    var myIcon = "";
                     if (concentration > backgroundValue) {
                         myIcon = new BMap.Icon('/img/uav_red.png', new BMap.Size(20, 20));
                     } else if (concentration == backgroundValue) {
                         myIcon = new BMap.Icon('/img/uav_green.png', new BMap.Size(20, 20));
                     } else {
                         return true;
                     }
                    //var myIcon = new BMap.Icon('/img/uav_red.png', new BMap.Size(20, 20));
                    var marker = new BMap.Marker(point, {icon: myIcon});
                    map.addOverlay(marker);
                    trackPoints.push(point);
                    $("#tab").append("<tr><td>" + lon + "</td><td>" + lat + "</td><td>" + heigh + "</td><td>" + concentration + "</td></tr>");//控制输出的数据格式
                    var opts = {
                        width: 80,     // 信息窗口宽度
                        height: 80,     // 信息窗口高度
                    }
                    var msg = "经度: " + value.e76 + "<br>纬度: " + value.e77 + "<br>高度: " + value.e78 + "<br>" +description+":  "+concentration+unit;
                    if (concentration == "") {
                        msg = "经度: " + value.e76 + "<br>纬度: " + value.e77 + "<br>高度: " + value.e78;
                    }
                    var infoWindow = new BMap.InfoWindow(msg, opts);  // 创建信息窗口对象
                    marker.addEventListener("click", function () {
                        map.openInfoWindow(infoWindow, point); //开启信息窗口
                    });
            if (typeof (value.e76) == "undefined" /*|| typeof (value.e78) == "undefined"*/) {
                showNoDroppoint();
            } else {
                var lon = parseFloat(value.e76.substr(0, value.e76.length - 1));
                var lat = parseFloat(value.e77.substr(0, value.e77.length - 1));
                if (lon < 70 || lon > 150 || lat > 60 || lat <= 0) {
                    return true;
                }
                var lon1 = GPS.gcj_encrypt(lat, lon).lon;
                var lat1 = GPS.gcj_encrypt(lat, lon).lat;
                var lon2 = GPS.bd_encrypt(lat1, lon1).lon;
                var lat2 = GPS.bd_encrypt(lat1, lon1).lat;
                //var heigh = parseFloat(value.e78.substr(0, value.e78.length - 1));
                var heigh = typeof (value.e78) == "undefined" ? "" : parseFloat(value.e78.substr(0, value.e78.length - 1));
                var concentration = "";
                var time = "";
                $.each(value, function (key, data) {
                    if (key == sensorKey) {
                        concentration = data == "undefined" ? "" : parseFloat(data.substr(0, data.length - 1));
                    }
                    if (key == "time") {
                        time = data.toString().split(" ")[1];
                    }
                });
                var point = new BMap.Point(lon2, lat2);
                var hashMap = new Map();
                hashMap.set("time", time);
                hashMap.set("point", point);
                hashMap.set("heigh", heigh);
                hashMap.set("concentration", concentration);
                if (heigh > 0 && heigh <= 20) {
                    trackPointsOne.push(hashMap);
                } else if (heigh >= 21 && heigh <= 40) {
                    trackPointsTwo.push(hashMap);
                } else if (heigh >= 41 && heigh <= 60) {
                    trackPointsThree.push(hashMap);
                } else if (heigh >= 61 && heigh <= 80) {
                    trackPointsFour.push(hashMap);
                } else if (heigh >= 81) {
                    trackPointsFive.push(hashMap);
                }
                trackPoints.push(hashMap);
                $("#tab").append("<tr><td>" + time + "</td>" + "<td>" + lon2.toFixed(4) + "</td><td>" + lat2.toFixed(4) + "</td><td>" + heigh + "</td><td>" + concentration + "</td></tr>");//控制输出的数据格式
            }
        )
        map.centerAndZoom(trackPoints, 17);// 根据经纬度显示地图的范围
        map.setViewport(trackPoints);// 根据提供的地理区域或坐标设置地图视野
        });
    }
    if (trackPoints.length == 0) {
        showNoDroppoint();
    }
    var points = getPoints(trackPoints);
    map.centerAndZoom(points, 17);// 根据经纬度显示地图的范围
    map.setViewport(points);// 根据提供的地理区域或坐标设置地图视野
    listen(trackPoints);
    $("#form").change(function () {
        map.clearOverlays();
        var result = [];
        $('input:checkbox:checked').each(function () {
            var val = $(this).val();
            if (val == "one") {
                getResult(result, trackPointsOne);
            } else if (val == "two") {
                getResult(result, trackPointsTwo);
            } else if (val == "three") {
                getResult(result, trackPointsThree);
            } else if (val == "four") {
                getResult(result, trackPointsFour);
            } else if (val == "five") {
                getResult(result, trackPointsFive);
            }
        });
        var zoom = map.getZoom();
        if (zoom > 17) {
            addMarkers(result);
        }
        addPolygon(getPoints(result));
        listen(result);
    });
    function show() {
        $("#data").toggle();
    }
    function getResult(result, arry) {
        $.each(arry, function (index, value) {
            result.push(value);
        });
    }
    function listen(arry) {
        map.addEventListener("zoomend", function () {
            var points = getPoints(arry);
            var zoom = map.getZoom();
            map.clearOverlays();
            if (zoom > 17) {
                addMarkers(arry);
            }
            addPolygon(points);
        });
    }
    function addMarkers(arry) {
        $.each(arry, function (item, value) {
            var myIcon = new BMap.Icon('/img/uav_red.png', new BMap.Size(50, 50));
            var time = value.get("time");
            var heigh = value.get("heigh");
            var concentration = value.get("concentration");
            var point = value.get("point");
            var marker = new BMap.Marker(point, {icon: myIcon});
            map.addOverlay(marker);
            var lon = marker.getPosition().lng;
            var lat = marker.getPosition().lat;
            var opts = {
                width: 200,     // 信息窗口宽度
                height: 100,     // 信息窗口高度
            }
            var infoWindow = new BMap.InfoWindow("时间:  " + time + "</br>经度:  " + lon.toFixed(4) + "°</br>纬度:  " + lat.toFixed(4) + "°</br>高度:  " + heigh + "m</br>" + description + ":  " + concentration + unit, opts);  // 创建信息窗口对象
            if (heigh == "") {
                infoWindow = new BMap.InfoWindow("时间:  " + time + "</br>经度:  " + lon.toFixed(4) + "°</br>纬度:  " + lat.toFixed(4) + "</br>" + description + ":  " + concentration + unit, opts);  // 创建信息窗口对象
            }
            marker.addEventListener("click", function () {
                map.openInfoWindow(infoWindow, point); //开启信息窗口
            });
        });
    }
    function addPolygon(points) {
        var polygon = new BMap.Polygon(points, {
            strokeColor: "none",
            fillColor: "red",
            strokeOpacity: 1
        });  //创建多边形
        map.addOverlay(polygon);  //增加多边形
    }
    function showNoDroppoint() {
@@ -182,4 +443,13 @@
            document.getElementById("data").style.display = 'none';
        }, 250);
    }
</script>
    function getPoints(arry) {
        var points = [];
        $.each(arry, function (item, value) {
            var point = value.get("point");
            points.push(point);
        });
        return points;
    }
</script>