| | |
| | | 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; |
| | | } |
| | | |
| | | .BMap_top { |
| | | display: none; |
| | | } |
| | | |
| | | .BMap_center { |
| | | display: none; |
| | | } |
| | | |
| | | .BMap_bubble_title { |
| | | color: white; |
| | | font-size: 13px; |
| | | font-weight: bold; |
| | | text-align: left; |
| | | padding-left: 5px; |
| | | padding-top: 5px; |
| | | background-color: #2DA0EB; |
| | | } |
| | | |
| | | .BMap_bubble_content { |
| | | background-color: white; |
| | | padding-left: 5px; |
| | | padding-top: 5px; |
| | | padding-bottom: 10px; |
| | | } |
| | | |
| | | .BMap_pop img { |
| | | top: 45px !important; |
| | | left: 220px !important; |
| | | } |
| | | |
| | | .BMap_pop div:nth-child(1) div { |
| | | display: none; |
| | | } |
| | | |
| | | .BMap_pop div:nth-child(3) { |
| | | display: none; |
| | | } |
| | | |
| | | .BMap_pop div:nth-child(5) { |
| | | display: none; |
| | | } |
| | | |
| | | .BMap_pop div:nth-child(7) { |
| | | display: none; |
| | | } |
| | | |
| | | .BMap_pop div:nth-child(9) { |
| | | top: 35px !important; |
| | | border-radius: 5px; |
| | | } |
| | | |
| | | </style> |
| | | |
| | | <body> |
| | | <div class="main_body"> |
| | | <div id="cpm">查无飞行轨迹</div> |
| | | <div id="mapCanvas"></div> <!-- 百度地图 --> |
| | | <!-- 传sensorInfo,regionCode,regionName,monitorPoint,device--> |
| | | <div id="uavTrajectoryParams" style="display: none;"> |
| | |
| | | var sensorInfo = params["sensorInfo"]; |
| | | //var map = new BMap.Map("mapCanvas", defaultParam); |
| | | var map = new BMap.Map("mapCanvas", {enableMapClick: false}); |
| | | 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()); |
| | | if (sensorInfo.length == 0) { |
| | | showNoFlightTrajectory(); |
| | | } |
| | | var trackPoints = []; //用来存放从后台获取到的所有历史轨迹点的数据 |
| | | var coincidentPoints = new Array(); |
| | | if (sensorInfo.length > 0) { |
| | | $.each(sensorInfo, function (item, value) { |
| | | trackPoints.push(new BMap.Point(value.e76, value.e77)); |
| | | if (typeof (value.经度) == "undefined") { |
| | | showNoFlightTrajectory(); |
| | | } else { |
| | | trackPoints.push(new BMap.Point(value.经度.substr(0, value.经度.length - 1), value.纬度.substr(0, value.纬度.length - 1))); |
| | | } |
| | | }) |
| | | for (var i = 0; i < trackPoints.length; i++) { |
| | | var startPoint = trackPoints[i]; |
| | | var endPoint = trackPoints[i + 1]; |
| | | var marker; |
| | | var startIcon = new BMap.Icon("/img/start.png", new BMap.Size(48, 48)); |
| | | var endIcon = new BMap.Icon("/img/end.png", new BMap.Size(48, 48)); |
| | | if (i == 0) { |
| | | map.centerAndZoom(startPoint, 17); |
| | | marker = new BMap.Marker(startPoint, {icon: startIcon, offset: new BMap.Size(0, -20)}); |
| | | var distance = parseInt(map.getDistance(startPoint, endPoint)).toFixed(5); |
| | | var arrowLength;//两点间箭头长度 |
| | | if (distance <= 5) { |
| | | arrowLength = 0; |
| | | } else if (distance > 5 && distance <= 20) { |
| | | arrowLength = 2; |
| | | } else if (distance > 20 && distance <= 50) { |
| | | arrowLength = 3; |
| | | } else if (distance > 50 && distance <= 100) { |
| | | arrowLength = 5; |
| | | } else if (distance > 100 && distance <= 200) { |
| | | arrowLength = 10; |
| | | } else if (distance > 200 && distance <= 500) { |
| | | arrowLength = 20; |
| | | } else if (distance > 500 && distance <= 1000) { |
| | | arrowLength = 40; |
| | | } else if (distance > 1000 && distance <= 2000) { |
| | | arrowLength = 80; |
| | | } else if (distance > 2000 && distance <= 3000) { |
| | | arrowLength = 120; |
| | | } else if (distance > 3000 && distance <= 10000) { |
| | | arrowLength = 500; |
| | | } else if (distance > 10000 && distance <= 20000) { |
| | | arrowLength = 1000; |
| | | } else if (distance > 20000 && distance <= 50000) { |
| | | arrowLength = 2500; |
| | | } else if (distance > 50000 && distance <= 100000) { |
| | | arrowLength = 5000; |
| | | } else if (distance > 100000 && distance <= 200000) { |
| | | arrowLength = 10000; |
| | | } else if (distance > 200000 && distance <= 500000) { |
| | | arrowLength = 25000; |
| | | } else if (distance > 500000 && distance <= 1000000) { |
| | | arrowLength = 50000; |
| | | } else if (distance > 1000000 && distance <= 2000000) { |
| | | arrowLength = 100000; |
| | | } else { |
| | | arrowLength = 150000; |
| | | } |
| | | if (i == trackPoints.length - 1) { |
| | | marker = new BMap.Marker(startPoint, {icon: endIcon, offset: new BMap.Size(0, -20)}); |
| | | } else if (i != 0 && i!=trackPoints.length - 1) { |
| | | marker = new BMap.Marker(startPoint); |
| | | } |
| | | winfowText = "时间:" + sensorInfo[i].uavDate |
| | | + "</br> 经度:" + sensorInfo[i].e76 |
| | | + "</br> 纬度:" + sensorInfo[i].e77 |
| | | + "</br> 高度:" + sensorInfo[i].e78 |
| | | + "</br> 速度x:" + sensorInfo[i].e79 |
| | | + "</br> 速度y:" + sensorInfo[i].e80 |
| | | + "</br> 速度z:" + sensorInfo[i].e81; |
| | | (function (x) { |
| | | var infoWindow = new BMap.InfoWindow(winfowText, {enableMessage: false, width: 30, height: 130}); |
| | | marker.addEventListener("click", function () { |
| | | this.openInfoWindow(infoWindow); |
| | | }); |
| | | })(i); |
| | | map.addOverlay(marker); |
| | | var polyline = new BMap.Polyline([ |
| | | startPoint, |
| | | endPoint |
| | | ], |
| | | {strokeColor: "green", strokeWeight: 2, strokeOpacity: 1} |
| | | {strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1} |
| | | ); |
| | | if(i < trackPoints.length-1){ |
| | | if (i < trackPoints.length - 1 && trackPoints.length > 1) { |
| | | map.addOverlay(polyline);// 画两点间线 |
| | | addArrow(polyline, 5, Math.PI / 7); |
| | | if (i == 0) { |
| | | map.centerAndZoom(startPoint, 17); |
| | | } |
| | | addArrow(polyline, arrowLength, Math.PI / 7); |
| | | } else if (trackPoints.length == 1) { |
| | | map.centerAndZoom(trackPoints[0], 17); |
| | | } |
| | | if (coincidentPoints.indexOf(i) > -1) { |
| | | //判断是否已经已经显示过该点的信息,避免重复。 |
| | | continue; |
| | | } |
| | | |
| | | var startIcon = new BMap.Icon("/img/start.png", new BMap.Size(48, 48)); |
| | | var endIcon = new BMap.Icon("/img/end.png", new BMap.Size(48, 48)); |
| | | var aggregationIcon = new BMap.Icon("/img/aggregation.png", new BMap.Size(48, 48)); |
| | | if (i == trackPoints.length - 1) { |
| | | marker = new BMap.Marker(startPoint, {icon: endIcon, offset: new BMap.Size(0, -20)}); |
| | | } |
| | | if (i == 0) { |
| | | marker = new BMap.Marker(startPoint, {icon: startIcon, offset: new BMap.Size(0, -20)}); |
| | | } |
| | | if (i != 0 && i != trackPoints.length - 1) { |
| | | marker = new BMap.Marker(startPoint); |
| | | } |
| | | var count = 0; |
| | | var winfowText = |
| | | '<div style="min-height:20px;overflow:auto;max-height:400px;" >'; |
| | | var opts = { |
| | | width: 220, |
| | | title: '<h4>无人机信息</h4>', // 信息窗口标题 |
| | | enableMessage: false, //设置允许信息窗发送短息 |
| | | } |
| | | |
| | | for (var j = i + 1; j < trackPoints.length; j++) { |
| | | distance = map.getDistance(trackPoints[i], trackPoints[j]).toFixed(5); |
| | | if (distance <= 1.9) { |
| | | if (coincidentPoints.indexOf(i) == -1) { |
| | | coincidentPoints.push(i); |
| | | winfowText +='<p id="' + i + '" onclick="openInfo(this)" onmousemove="red(this.id)" onmouseout="black(this.id)">' + "时间:" + sensorInfo[i].时间 + "</p>"; |
| | | } |
| | | coincidentPoints.push(j); |
| | | count++; |
| | | marker = new BMap.Marker(startPoint, {icon: aggregationIcon}); |
| | | winfowTextAdd = '<p id="' + j + '" onclick="openInfo(this)" onmousemove="red(this.id)" onmouseout="black(this.id)">' + "时间:" + sensorInfo[j].时间 + "</p>"; |
| | | winfowText += winfowTextAdd; |
| | | } |
| | | } |
| | | |
| | | if (coincidentPoints.indexOf(i) > -1) { |
| | | winfowText = winfowText + "</div>"; |
| | | } else { |
| | | for (var prop in sensorInfo[i]) { |
| | | if (sensorInfo[i].hasOwnProperty(prop)) { |
| | | winfowText += (prop + ":" + sensorInfo[i][prop] + "</br>"); |
| | | } |
| | | } |
| | | winfowText += "</div>"; |
| | | } |
| | | |
| | | (function (x) { |
| | | var infoWindow = new BMap.InfoWindow(winfowText, opts); |
| | | marker.addEventListener("click", function () { |
| | | this.openInfoWindow(infoWindow); |
| | | }); |
| | | })(i); |
| | | |
| | | function openInfo(e) { |
| | | var point = new BMap.Point(sensorInfo[e.id].经度.substr(0, sensorInfo[e.id].经度.length - 1), sensorInfo[e.id].纬度.substr(0, sensorInfo[e.id].纬度.length - 1)); |
| | | var winfowText1 = |
| | | '<div style="min-height:20px;overflow:auto;max-height:400px;" >'; |
| | | for (var prop in sensorInfo[e.id]) { |
| | | if (sensorInfo[e.id].hasOwnProperty(prop)) { |
| | | winfowText1 += (prop + ":" + sensorInfo[e.id][prop] + "</br>"); |
| | | } |
| | | } |
| | | winfowText1 += "</div>"; |
| | | var infoWindow1 = new BMap.InfoWindow(winfowText1, opts); |
| | | //开启信息窗口 |
| | | map.openInfoWindow(infoWindow1, point); |
| | | } |
| | | |
| | | function red(x) { |
| | | document.getElementById(x).style.color = "#FF1111"; |
| | | document.getElementById(x).style.cursor = "pointer"; |
| | | } |
| | | |
| | | function black(x) { |
| | | document.getElementById(x).style.color = "#000000"; |
| | | } |
| | | |
| | | function openInfoWindow() { |
| | | map.openInfoWindow.apply(map, arguments); //开启信息窗口 |
| | | } |
| | | |
| | | if (count > 0) { |
| | | var lab; |
| | | if (count > 0 && count <= 8) { |
| | | lab = new BMap.Label(count + 1, {position: startPoint, offset: new BMap.Size(-5, -9)}); |
| | | } else if (count > 8 && count <= 98) { |
| | | lab = new BMap.Label(count + 1, {position: startPoint, offset: new BMap.Size(-10, -9)}); |
| | | } else if (count > 98 && count <= 998) { |
| | | lab = new BMap.Label(count + 1, {position: startPoint, offset: new BMap.Size(-14, -9)}); |
| | | } else { |
| | | lab = new BMap.Label(count + 1, {position: startPoint, offset: new BMap.Size(-18, -9)}); |
| | | } |
| | | lab.setStyle({ |
| | | color: "#fff", |
| | | fontSize: "16px", |
| | | backgroundColor: "1", |
| | | border: "0", |
| | | fontWeight: "bold" |
| | | }); |
| | | map.addOverlay(lab); |
| | | } |
| | | map.addOverlay(marker); |
| | | } |
| | | } |
| | | 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); |
| | | alert("查不到相关数据"); |
| | | } |
| | | 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 addArrow(polyline, length, angleValue) { |
| | | var linePoint = polyline.getPath();// 线的坐标串 |
| | | var arrowCount = linePoint.length; |
| | | for (var i = 1; i < arrowCount; i++) { // 在拐点处绘制箭头 |
| | | var pixelStart = map.pointToPixel(linePoint[i - 1]); |
| | | var pixelEnd = map.pointToPixel(linePoint[i]); |
| | | var angle = angleValue;// 箭头和主线的夹角 |
| | | var r = length; // r/Math.sin(angle)代表箭头长度 |
| | | var delta = 0; // 主线斜率,垂直时无斜率 |
| | | var param = 0; // 代码简洁考虑 |
| | | var pixelTemX, pixelTemY, poMiddleX, poMiddleY;// 临时点坐标 |
| | | var pixelX, pixelY, pixelX1, pixelY1;// 箭头两个点 |
| | | poMiddleX = (pixelEnd.x + pixelStart.x) / 2; |
| | | poMiddleY = (pixelEnd.y + pixelStart.y) / 2; |
| | | if (poMiddleX - pixelStart.x == 0) { // 斜率不存在时 |
| | | pixelTemX = poMiddleX; |
| | | if (poMiddleY > pixelStart.y) { |
| | | pixelTemY = poMiddleY - r; |
| | | } else { |
| | | pixelTemY = poMiddleY + r; |
| | | } |
| | | // 已知直角三角形两个点坐标及其中一个角,求另外一个点坐标算法 |
| | | pixelX = pixelTemX - r * Math.tan(angle); |
| | | pixelX1 = pixelTemX + r * Math.tan(angle); |
| | | pixelY = pixelY1 = pixelTemY; |
| | | } else { // 斜率存在时 |
| | | delta = (poMiddleY - pixelStart.y) / (poMiddleX - pixelStart.x); |
| | | param = Math.sqrt(delta * delta + 1); |
| | | if ((poMiddleX - pixelStart.x) < 0) { // 第二、三象限 |
| | | pixelTemX = poMiddleX + r / param; |
| | | pixelTemY = poMiddleY + delta * r / param; |
| | | } else { // 第一、四象限 |
| | | pixelTemX = poMiddleX - r / param; |
| | | pixelTemY = poMiddleY - delta * r / param; |
| | | } |
| | | // 已知直角三角形两个点坐标及其中一个角,求另外一个点坐标算法 |
| | | pixelX = pixelTemX + Math.tan(angle) * r * delta / param; |
| | | pixelY = pixelTemY - Math.tan(angle) * r / param; |
| | | pixelX1 = pixelTemX - Math.tan(angle) * r * delta / param; |
| | | pixelY1 = pixelTemY + Math.tan(angle) * r / param; |
| | | function addArrow(polyline, length, angleValue) { |
| | | var linePoint = polyline.getPath();// 线的坐标串 |
| | | var arrowCount = linePoint.length; |
| | | for (var i = 1; i < arrowCount; i++) { // 在拐点处绘制箭头 |
| | | var pixelStart = map.pointToPixel(linePoint[i - 1]); |
| | | var pixelEnd = map.pointToPixel(linePoint[i]); |
| | | var angle = angleValue;// 箭头和主线的夹角 |
| | | var r = length; // r/Math.sin(angle)代表箭头长度 |
| | | var delta = 0; // 主线斜率,垂直时无斜率 |
| | | var param = 0; // 代码简洁考虑 |
| | | var pixelTemX, pixelTemY, poMiddleX, poMiddleY;// 临时点坐标 |
| | | var pixelX, pixelY, pixelX1, pixelY1;// 箭头两个点 |
| | | poMiddleX = (pixelEnd.x + pixelStart.x) / 2; |
| | | poMiddleY = (pixelEnd.y + pixelStart.y) / 2; |
| | | if (poMiddleX - pixelStart.x == 0) { // 斜率不存在时 |
| | | pixelTemX = poMiddleX; |
| | | if (poMiddleY > pixelStart.y) { |
| | | pixelTemY = poMiddleY - r; |
| | | } else { |
| | | pixelTemY = poMiddleY + r; |
| | | } |
| | | var pointArrow = map.pixelToPoint(new BMap.Pixel(pixelX, pixelY)); |
| | | var pointArrow1 = map.pixelToPoint(new BMap.Pixel(pixelX1, pixelY1)); |
| | | var pointMiddle = map.pixelToPoint(new BMap.Pixel(poMiddleX, poMiddleY)); |
| | | var Arrow = new BMap.Polyline([pointArrow, pointMiddle, pointArrow1], |
| | | {strokeColor: "green", strokeWeight: 2, strokeOpacity: 1}); |
| | | map.addOverlay(Arrow); |
| | | // 已知直角三角形两个点坐标及其中一个角,求另外一个点坐标算法 |
| | | pixelX = pixelTemX - r * Math.tan(angle); |
| | | pixelX1 = pixelTemX + r * Math.tan(angle); |
| | | pixelY = pixelY1 = pixelTemY; |
| | | } else { // 斜率存在时 |
| | | delta = (poMiddleY - pixelStart.y) / (poMiddleX - pixelStart.x); |
| | | param = Math.sqrt(delta * delta + 1); |
| | | if ((poMiddleX - pixelStart.x) < 0) { // 第二、三象限 |
| | | pixelTemX = poMiddleX + r / param; |
| | | pixelTemY = poMiddleY + delta * r / param; |
| | | } else { // 第一、四象限 |
| | | pixelTemX = poMiddleX - r / param; |
| | | pixelTemY = poMiddleY - delta * r / param; |
| | | } |
| | | // 已知直角三角形两个点坐标及其中一个角,求另外一个点坐标算法 |
| | | pixelX = pixelTemX + Math.tan(angle) * r * delta / param; |
| | | pixelY = pixelTemY - Math.tan(angle) * r / param; |
| | | pixelX1 = pixelTemX - Math.tan(angle) * r * delta / param; |
| | | pixelY1 = pixelTemY + Math.tan(angle) * r / param; |
| | | } |
| | | }; |
| | | var pointArrow = map.pixelToPoint(new BMap.Pixel(pixelX, pixelY)); |
| | | var pointArrow1 = map.pixelToPoint(new BMap.Pixel(pixelX1, pixelY1)); |
| | | var pointMiddle = map.pixelToPoint(new BMap.Pixel(poMiddleX, poMiddleY)); |
| | | var Arrow = new BMap.Polyline([pointArrow, pointMiddle, pointArrow1], |
| | | {strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1}); |
| | | map.addOverlay(Arrow); |
| | | } |
| | | }; |
| | | |
| | | function showNoFlightTrajectory() { |
| | | var longitude = 120.987287; |
| | | var latitude = 31.391562; |
| | | var point = new BMap.Point(longitude, latitude); |
| | | map.centerAndZoom(point, 17); |
| | | setTimeout(function () { |
| | | document.getElementById("cpm").style.display = 'block'; |
| | | }, 250); |
| | | }; |
| | | |
| | | </script> |