| | |
|---|
| | | 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> <!-- 百度地图容器--> |
|---|
| | |
|---|
| | | var sensorKey = params['sensorKey']; |
|---|
| | | var unit = params['unit']; |
|---|
| | | var description = params['description']; |
|---|
| | | var backgroundValue = 32; |
|---|
| | | 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); |
|---|
| | |
|---|
| | | 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"*/) { |
|---|
| | |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | var point = new BMap.Point(lon2, lat2); |
|---|
| | | trackPoints.push(point); |
|---|
| | | var hashMap = {"time": time, "point": point, "heigh": heigh, "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>");//控制输出的数据格式 |
|---|
| | | |
|---|
| | | /* 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(trackPoints.length==0){ |
|---|
| | | showNoDroppoint(); |
|---|
| | | } |
|---|
| | | map.centerAndZoom(trackPoints, 17);// 根据经纬度显示地图的范围 |
|---|
| | | map.setViewport(trackPoints);// 根据提供的地理区域或坐标设置地图视野 |
|---|
| | | var polygon = new BMap.Polygon(trackPoints, { |
|---|
| | | |
|---|
| | | 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["time"]; |
|---|
| | | var heigh = value["heigh"]; |
|---|
| | | var concentration = value["concentration"]; |
|---|
| | | var point = value["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", |
|---|
| | | strokeWeight: 2, |
|---|
| | | strokeOpacity: 1 |
|---|
| | | }); //创建多边形 |
|---|
| | | map.addOverlay(polygon); //增加多边形 |
|---|
| | | map.setViewport(polygon.getPath()); //调整视野 |
|---|
| | | } |
|---|
| | | |
|---|
| | | function showNoDroppoint() { |
|---|
| | |
|---|
| | | document.getElementById("data").style.display = 'none'; |
|---|
| | | }, 250); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function getPoints(arry) { |
|---|
| | | var points = []; |
|---|
| | | $.each(arry, function (item, value) { |
|---|
| | | var point = value["point"]; |
|---|
| | | points.push(point); |
|---|
| | | }); |
|---|
| | | return points; |
|---|
| | | } |
|---|
| | | </script> |
|---|
