| | |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | </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;"> |
|---|
| | |
|---|
| | | latitude = 31.391562; |
|---|
| | | point = new BMap.Point(longitude, latitude); |
|---|
| | | map.centerAndZoom(point, 17); |
|---|
| | | alert("查不到相关数据"); |
|---|
| | | document.getElementById("cpm").style.display='block'; |
|---|
| | | } |
|---|
| | | var trackPoints = []; //用来存放从后台获取到的所有历史轨迹点的数据 |
|---|
| | | var coincidentPoints = new Array(); |
|---|
| | | if (sensorInfo.length > 0) { |
|---|
| | | $.each(sensorInfo, function (item, value) { |
|---|
| | | trackPoints.push(new BMap.Point(value.经度, value.纬度)); |
|---|
| | | if(typeof(value.经度)=="undefined"){ |
|---|
| | | longitude = 120.987287; |
|---|
| | | latitude = 31.391562; |
|---|
| | | point = new BMap.Point(longitude, latitude); |
|---|
| | | map.centerAndZoom(point, 17); |
|---|
| | | document.getElementById("cpm").style.display='block'; |
|---|
| | | }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]; |
|---|
| | |
|---|
| | | startPoint, |
|---|
| | | endPoint |
|---|
| | | ], |
|---|
| | | {strokeColor: "green", strokeWeight: 2, strokeOpacity: 1} |
|---|
| | | {strokeColor: "#5298FF", strokeWeight: 5, strokeOpacity: 1} |
|---|
| | | ); |
|---|
| | | if (i < trackPoints.length - 1) { |
|---|
| | | if (i < trackPoints.length - 1 && trackPoints.length > 1) { |
|---|
| | | map.addOverlay(polyline);// 画两点间线 |
|---|
| | | if (i != 0) { |
|---|
| | | addArrow(polyline, arrowLength, 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) { |
|---|
| | | //判断是否已经已经显示过该点的信息，避免重复。 |
|---|
| | |
|---|
| | | |
|---|
| | | 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 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 = ""; |
|---|
| | | var winfowText = |
|---|
| | | '<div style="min-height:20px;overflow-y:auto;max-height:400px;" >'; |
|---|
| | | for (var j = i + 1; j < trackPoints.length; j++) { |
|---|
| | | distance = map.getDistance(trackPoints[i], trackPoints[j]).toFixed(5); |
|---|
| | | if (distance <= 1.9) { |
|---|
| | |
|---|
| | | } |
|---|
| | | 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 (j == trackPoints.length - 1) { |
|---|
| | | marker = new BMap.Marker(trackPoints[j], {icon: endIcon, offset: new BMap.Size(0, -20)}); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (coincidentPoints.indexOf(i) > -1) { |
|---|
| | | winfowText = '<p id="' + i + '" onclick="openInfo(this)" onmousemove="red(this.id)" onmouseout="black(this.id)">' + "时间：" + sensorInfo[i].时间 + "</p>" + winfowText; |
|---|
| | | winfowText = '<p id="' + i + '" onclick="openInfo(this)" onmousemove="red(this.id)" onmouseout="black(this.id)">' + "时间：" + sensorInfo[i].时间 + "</p>" + winfowText + "</div>"; |
|---|
| | | } else { |
|---|
| | | for(var prop in sensorInfo[i]){ |
|---|
| | | for (var prop in sensorInfo[i]) { |
|---|
| | | if (sensorInfo[i].hasOwnProperty(prop)) { |
|---|
| | | winfowText+=(prop+"："+sensorInfo[i][prop]+"</br>"); |
|---|
| | | winfowText += (prop + "：" + sensorInfo[i][prop] + "</br>"); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | winfowText += "</div>"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | (function (x) { |
|---|
| | | var infoWindow = new BMap.InfoWindow(winfowText, {enableMessage: false}); |
|---|
| | | marker.addEventListener("click", function () { |
|---|
| | |
|---|
| | | })(i); |
|---|
| | | |
|---|
| | | function openInfo(e) { |
|---|
| | | var point = new BMap.Point(sensorInfo[e.id].经度, sensorInfo[e.id].纬度); |
|---|
| | | var winfowText1=""; |
|---|
| | | for(var prop in sensorInfo[e.id]){ |
|---|
| | | 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 = ""; |
|---|
| | | for (var prop in sensorInfo[e.id]) { |
|---|
| | | if (sensorInfo[e.id].hasOwnProperty(prop)) { |
|---|
| | | winfowText1+=(prop+"："+sensorInfo[e.id][prop]+"</br>"); |
|---|
| | | winfowText1 += (prop + "：" + sensorInfo[e.id][prop] + "</br>"); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | var infoWindow1 = new BMap.InfoWindow(winfowText1, {enableMessage: false}); |
|---|
| | |
|---|
| | | map.openInfoWindow(infoWindow1, point); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function red(x) |
|---|
| | | { |
|---|
| | | document.getElementById(x).style.color="#FF1111"; |
|---|
| | | document.getElementById(x).style.cursor="pointer"; |
|---|
| | | 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 black(x) { |
|---|
| | | document.getElementById(x).style.color = "#000000"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | function openInfoWindow() { |
|---|
| | | map.openInfoWindow.apply(map, arguments); //开启信息窗口 |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (count > 0) { |
|---|
| | | var lab = new BMap.Label(count + 1, {position: startPoint, offset: new BMap.Size(-7, -23)}); |
|---|
| | | 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", |
|---|
| | |
|---|
| | | 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}); |
|---|
| | | {strokeColor: "#5298FF", strokeWeight: 5, strokeOpacity: 1}); |
|---|
| | | map.addOverlay(Arrow); |
|---|
| | | } |
|---|
| | | }; |
|---|
