<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
<!DOCTYPE html>
|
<head>
|
<meta charset="utf-8"/>
|
<title></title>
|
<script type="text/javascript"
|
src="http://api.map.baidu.com/api?v=2.0&ak=rER1sgBIcQxkfNSlm2wmBGZGgEERrooM"></script>
|
<script type="text/javascript" src="/js/jquery.min.js"></script>
|
</head>
|
<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;
|
}
|
</style>
|
|
<body>
|
<div class="main_body">
|
<div id="mapCanvas"></div> <!-- 百度地图 -->
|
<!-- 传sensorInfo,regionCode,regionName,monitorPoint,device-->
|
<div id="uavTrajectoryParams" style="display: none;">
|
${requestScope.uavTrajectoryParams}
|
</div>
|
</div>
|
</body>
|
</html>
|
|
<script type="text/javascript">
|
var moralMap = {};
|
/*var defaultParam = {
|
minZoom: 12,
|
maxZoom: 20
|
};*/
|
var mapStyle = {
|
features: ["road", "building", "water", "land"], // 隐藏地图上的poi
|
style: "normal" // 设置地图风格为高端黑
|
};
|
var params = $.parseJSON($("#uavTrajectoryParams").html());
|
moralMap['params'] = params;
|
var sensorInfo = params["sensorInfo"];
|
//var map = new BMap.Map("mapCanvas", defaultParam);
|
var map = new BMap.Map("mapCanvas", { enableMapClick: false });
|
var trackPoints = []; //用来存放从后台获取到的所有历史轨迹点的数据
|
if (sensorInfo.length > 0) {
|
$.each(sensorInfo, function (item, value) {
|
trackPoints.push(new BMap.Point(value.e76, value.e77));
|
})
|
for (var i = 0; i < trackPoints.length - 1; i++) {
|
var startPoint = trackPoints[i];
|
var endPoint = trackPoints[i + 1];
|
showPath(startPoint, endPoint);
|
}
|
$.each(sensorInfo, function (item, value) {
|
if(item==0){
|
map.centerAndZoom(new BMap.Point(value.e76, value.e77), 17);
|
}
|
var flyingPoint = new BMap.Point(value.e76, value.e77);
|
var marker = new BMap.Marker(flyingPoint);
|
var infoWindow = new BMap.InfoWindow("时间："+value.uavDate
|
+"</br> 经度："+value.e76
|
+"</br> 纬度："+value.e77
|
+"</br> 高度："+value.e78
|
+"</br> 速度x："+value.e79
|
+"</br> 速度y："+value.e80
|
+"</br> 速度z："+value.e81,
|
{ enableMessage: false, width: 30, height: 130 });
|
marker.addEventListener("click", function ()
|
{
|
this.openInfoWindow(infoWindow);
|
});
|
map.addOverlay(marker);
|
var label = new BMap.Label(item + 1, {position: flyingPoint, offset: item<=8?new BMap.Size(-5, -22):new BMap.Size(-9, -22)});
|
label.setStyle({
|
color: "#fff",
|
fontSize: "10px",
|
backgroundColor: "0.05",
|
border: "0",
|
fontWeight: "bold"
|
});
|
map.addOverlay(label);
|
});
|
}
|
|
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);
|
}
|
map.setCurrentCity("昆山");
|
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());
|
|
function showPath(startPoint, endPoint) {
|
var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true},
|
onMarkersSet:function(routes) {
|
map.removeOverlay(routes[0].marker); //删除起点
|
map.removeOverlay(routes[1].marker);//删除终点
|
}
|
});
|
var polyline = new BMap.Polyline([
|
startPoint,
|
endPoint
|
],
|
{strokeColor: "green", strokeWeight: 2, strokeOpacity: 1}
|
);
|
map.addOverlay(polyline);// 画两点间线
|
}
|
|
</script>
|
