<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
|
<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
|
<style type="text/css">
|
body,
|
html,
|
#mapCanvas {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
margin: 0;
|
z-index: 0;
|
font-size: 14px;
|
font-family: "微软雅黑";
|
}
|
|
.main_body {
|
border: 0;
|
margin: 0;
|
width: 100%;
|
height: 100%;
|
position: relative;
|
}
|
|
* {
|
margin: 0;
|
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;
|
}
|
|
#data {
|
overflow: scroll;
|
width: 300px;
|
height: 400px;
|
top: 20px;
|
right: 5px;
|
position: absolute;
|
z-index: 1;
|
background-color: gainsboro;
|
opacity: 0.8;
|
border: 2px solid red;
|
}
|
|
.trr {
|
border-collapse: collapse;
|
}
|
|
.trr th, td {
|
border: 1px solid black;
|
text-align: center;
|
}
|
|
table {
|
border-collapse: collapse;
|
font-size: 12px;
|
}
|
</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">
|
<%--存放数据的表--%>
|
<table id="tab" style="border:1px solid black;width: 280px">
|
</table>
|
</div>
|
<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>
|
</div>
|
</body>
|
</html>
|
<script type="text/javascript">
|
var mapStyle = {
|
features: ["road", "building", "water", "land"], // 隐藏地图上的poi
|
style: "normal" // 设置地图风格为高端黑
|
};
|
var params = $.parseJSON($("#uavDroppointParams").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 map = new BMap.Map("mapCanvas", {enableMapClick: false});
|
map.setMapStyle(mapStyle);
|
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
|
var navigation = new BMap.NavigationControl({
|
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
|
type: BMAP_NAVIGATION_CONTROL_LARGE
|
});
|
map.addControl(navigation);
|
map.addControl(new BMap.ScaleControl());
|
if (sensorInfo.length == 0) {
|
showNoDroppoint();
|
}
|
var trackPoints = []; //用来存放从后台获取到的所有历史轨迹点的数据
|
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 < 70 || lon > 150 || lat > 60 || lat <= 0) {
|
return true;
|
}
|
//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 = "";
|
$.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);
|
trackPoints.push(point);
|
$("#tab").append("<tr><td>" + lon + "</td><td>" + lat + "</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;
|
}*/
|
}
|
}
|
)
|
map.centerAndZoom(trackPoints, 17);// 根据经纬度显示地图的范围
|
map.setViewport(trackPoints);// 根据提供的地理区域或坐标设置地图视野
|
var polygon = new BMap.Polygon(trackPoints, {strokeColor: "none",fillColor:"red", strokeWeight: 2, strokeOpacity: 1}); //创建多边形
|
map.addOverlay(polygon); //增加多边形
|
map.setViewport(polygon.getPath()); //调整视野
|
}
|
|
function showNoDroppoint() {
|
var point = new BMap.Point(120.987287, 31.391562);
|
map.centerAndZoom(point, 17);
|
setTimeout(function () {
|
document.getElementById("cpm").style.display = 'block';
|
document.getElementById("data").style.display = 'none';
|
}, 250);
|
}
|
</script>
|
