工业级后台API v2
blame | history | patch | commit | commitdiff | ignore whitespace
jinpengyong
2020-08-10 47e42466d50e4293a05c8c9a9c9da09e8e554fb6 
 src/main/webapp/view/uavchannel.jsp


@@ -73,16 +73,53 @@


            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>


    <script type="text/javascript" src="../js/jquery.min.js"></script>


</head>


<body>


<div id="data">




<div id="data" style="display:none">


    <%--存放数据的表--%>


    <table id="tab" style="border:1px solid black;width: 280px"></table>


    <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> <!-- 百度地图容器-->


@@ -95,8 +132,8 @@


</html>


<script type="text/javascript">


    /*


    经纬度转换


    * */


   经纬度转换


   * */


    var GPS = {


        PI: 3.14159265358979324,


        x_pi: 3.14159265358979324 * 3000.0 / 180.0,


@@ -233,6 +270,7 @@


    var unit = params['unit'];


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


@@ -241,62 +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));


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


                    trackPoints.push(point);


                    $("#tab").append("<tr><td>" + time + "</td>" + "<td>" + lon2.toFixed(4) + "</td><td>" + lat2.toFixed(4) + "</td><td>" + heigh + "</td><td>" + concentration + "</td></tr>");//控制输出的数据格式




                    /*var myIcon = "";


                    if (concentration > 23) {


                        myIcon = new BMap.Icon('/img/uav_red.png', new BMap.Size(20, 20));


                        trackPoints.push(point);


                    } else if (concentration == 23) {


                        myIcon = new BMap.Icon('/img/uav_green.png', new BMap.Size(20, 20));


                    } else {


                        return true;


                    }*/


            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>");//控制输出的数据格式


            }


        )


        if(trackPoints.length==0){


            showNoDroppoint();


        });


    }


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


        }


        map.centerAndZoom(trackPoints, 17);// 根据经纬度显示地图的范围


        map.setViewport(trackPoints);// 根据提供的地理区域或坐标设置地图视野


        var polygon = new BMap.Polygon(trackPoints, {strokeColor: "none",fillColor:"red", strokeWeight: 2, strokeOpacity: 1});  //创建多边形


        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);  //增加多边形


        map.setViewport(polygon.getPath());    //调整视野


    }




    function showNoDroppoint() {


@@ -307,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>