|  |  |  | 
|---|
|  |  |  | border: 2px solid red; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .trr { | 
|---|
|  |  |  | border-collapse: collapse; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .trr th, td { | 
|---|
|  |  |  | border: 1px solid black; | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | 
|---|
|  |  |  | 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> | 
|---|
|  |  |  | 
|---|
|  |  |  | </head> | 
|---|
|  |  |  | <body> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <div id="data"> | 
|---|
|  |  |  | <div id="data" style="display:none"> | 
|---|
|  |  |  | <%--存放数据的表--%> | 
|---|
|  |  |  | <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> <!-- 百度地图容器--> | 
|---|
|  |  |  | 
|---|
|  |  |  | </body> | 
|---|
|  |  |  | </html> | 
|---|
|  |  |  | <script type="text/javascript"> | 
|---|
|  |  |  | /* | 
|---|
|  |  |  | 经纬度转换 | 
|---|
|  |  |  | * */ | 
|---|
|  |  |  | var GPS = { | 
|---|
|  |  |  | PI: 3.14159265358979324, | 
|---|
|  |  |  | x_pi: 3.14159265358979324 * 3000.0 / 180.0, | 
|---|
|  |  |  | delta: function (lat, lon) { | 
|---|
|  |  |  | var a = 6378245.0; //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。 | 
|---|
|  |  |  | var ee = 0.00669342162296594323; //  ee: 椭球的偏心率。 | 
|---|
|  |  |  | var dLat = this.transformLat(lon - 105.0, lat - 35.0); | 
|---|
|  |  |  | var dLon = this.transformLon(lon - 105.0, lat - 35.0); | 
|---|
|  |  |  | var radLat = lat / 180.0 * this.PI; | 
|---|
|  |  |  | var magic = Math.sin(radLat); | 
|---|
|  |  |  | magic = 1 - ee * magic * magic; | 
|---|
|  |  |  | var sqrtMagic = Math.sqrt(magic); | 
|---|
|  |  |  | dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI); | 
|---|
|  |  |  | dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI); | 
|---|
|  |  |  | return {'lat': dLat, 'lon': dLon}; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | //WGS-84 to GCJ-02 | 
|---|
|  |  |  | gcj_encrypt: function (wgsLat, wgsLon) { | 
|---|
|  |  |  | if (this.outOfChina(wgsLat, wgsLon)) | 
|---|
|  |  |  | return {'lat': wgsLat, 'lon': wgsLon}; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | var d = this.delta(wgsLat, wgsLon); | 
|---|
|  |  |  | return {'lat': wgsLat + d.lat, 'lon': wgsLon + d.lon}; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | //GCJ-02 to WGS-84 | 
|---|
|  |  |  | gcj_decrypt: function (gcjLat, gcjLon) { | 
|---|
|  |  |  | if (this.outOfChina(gcjLat, gcjLon)) | 
|---|
|  |  |  | return {'lat': gcjLat, 'lon': gcjLon}; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | var d = this.delta(gcjLat, gcjLon); | 
|---|
|  |  |  | return {'lat': gcjLat - d.lat, 'lon': gcjLon - d.lon}; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | //GCJ-02 to WGS-84 exactly | 
|---|
|  |  |  | gcj_decrypt_exact: function (gcjLat, gcjLon) { | 
|---|
|  |  |  | var initDelta = 0.01; | 
|---|
|  |  |  | var threshold = 0.000000001; | 
|---|
|  |  |  | var dLat = initDelta, dLon = initDelta; | 
|---|
|  |  |  | var mLat = gcjLat - dLat, mLon = gcjLon - dLon; | 
|---|
|  |  |  | var pLat = gcjLat + dLat, pLon = gcjLon + dLon; | 
|---|
|  |  |  | var wgsLat, wgsLon, i = 0; | 
|---|
|  |  |  | while (1) { | 
|---|
|  |  |  | wgsLat = (mLat + pLat) / 2; | 
|---|
|  |  |  | wgsLon = (mLon + pLon) / 2; | 
|---|
|  |  |  | var tmp = this.gcj_encrypt(wgsLat, wgsLon) | 
|---|
|  |  |  | dLat = tmp.lat - gcjLat; | 
|---|
|  |  |  | dLon = tmp.lon - gcjLon; | 
|---|
|  |  |  | if ((Math.abs(dLat) < threshold) && (Math.abs(dLon) < threshold)) | 
|---|
|  |  |  | break; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | if (dLat > 0) pLat = wgsLat; else mLat = wgsLat; | 
|---|
|  |  |  | if (dLon > 0) pLon = wgsLon; else mLon = wgsLon; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | if (++i > 10000) break; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | return {'lat': wgsLat, 'lon': wgsLon}; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | //GCJ-02 to BD-09 | 
|---|
|  |  |  | bd_encrypt: function (gcjLat, gcjLon) { | 
|---|
|  |  |  | var x = gcjLon, y = gcjLat; | 
|---|
|  |  |  | var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi); | 
|---|
|  |  |  | var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.x_pi); | 
|---|
|  |  |  | bdLon = z * Math.cos(theta) + 0.0065; | 
|---|
|  |  |  | bdLat = z * Math.sin(theta) + 0.006; | 
|---|
|  |  |  | return {'lat': bdLat, 'lon': bdLon}; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | //BD-09 to GCJ-02 | 
|---|
|  |  |  | bd_decrypt: function (bdLat, bdLon) { | 
|---|
|  |  |  | var x = bdLon - 0.0065, y = bdLat - 0.006; | 
|---|
|  |  |  | var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi); | 
|---|
|  |  |  | var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi); | 
|---|
|  |  |  | var gcjLon = z * Math.cos(theta); | 
|---|
|  |  |  | var gcjLat = z * Math.sin(theta); | 
|---|
|  |  |  | return {'lat': gcjLat, 'lon': gcjLon}; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | //WGS-84 to Web mercator | 
|---|
|  |  |  | //mercatorLat -> y mercatorLon -> x | 
|---|
|  |  |  | mercator_encrypt: function (wgsLat, wgsLon) { | 
|---|
|  |  |  | var x = wgsLon * 20037508.34 / 180.; | 
|---|
|  |  |  | var y = Math.log(Math.tan((90. + wgsLat) * this.PI / 360.)) / (this.PI / 180.); | 
|---|
|  |  |  | y = y * 20037508.34 / 180.; | 
|---|
|  |  |  | return {'lat': y, 'lon': x}; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // Web mercator to WGS-84 | 
|---|
|  |  |  | // mercatorLat -> y mercatorLon -> x | 
|---|
|  |  |  | mercator_decrypt: function (mercatorLat, mercatorLon) { | 
|---|
|  |  |  | var x = mercatorLon / 20037508.34 * 180.; | 
|---|
|  |  |  | var y = mercatorLat / 20037508.34 * 180.; | 
|---|
|  |  |  | y = 180 / this.PI * (2 * Math.atan(Math.exp(y * this.PI / 180.)) - this.PI / 2); | 
|---|
|  |  |  | return {'lat': y, 'lon': x}; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // two point's distance | 
|---|
|  |  |  | distance: function (latA, lonA, latB, lonB) { | 
|---|
|  |  |  | var earthR = 6371000.; | 
|---|
|  |  |  | var x = Math.cos(latA * this.PI / 180.) * Math.cos(latB * this.PI / 180.) * Math.cos((lonA - lonB) * this.PI / 180); | 
|---|
|  |  |  | var y = Math.sin(latA * this.PI / 180.) * Math.sin(latB * this.PI / 180.); | 
|---|
|  |  |  | var s = x + y; | 
|---|
|  |  |  | if (s > 1) s = 1; | 
|---|
|  |  |  | if (s < -1) s = -1; | 
|---|
|  |  |  | var alpha = Math.acos(s); | 
|---|
|  |  |  | var distance = alpha * earthR; | 
|---|
|  |  |  | return distance; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | outOfChina: function (lat, lon) { | 
|---|
|  |  |  | if (lon < 72.004 || lon > 137.8347) | 
|---|
|  |  |  | return true; | 
|---|
|  |  |  | if (lat < 0.8293 || lat > 55.8271) | 
|---|
|  |  |  | return true; | 
|---|
|  |  |  | return false; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | transformLat: function (x, y) { | 
|---|
|  |  |  | var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x)); | 
|---|
|  |  |  | ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0; | 
|---|
|  |  |  | ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0; | 
|---|
|  |  |  | ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0; | 
|---|
|  |  |  | return ret; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | transformLon: function (x, y) { | 
|---|
|  |  |  | var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x)); | 
|---|
|  |  |  | ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0; | 
|---|
|  |  |  | ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0; | 
|---|
|  |  |  | ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0; | 
|---|
|  |  |  | return ret; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | var mapStyle = { | 
|---|
|  |  |  | features: ["road", "building", "water", "land"], // 隐藏地图上的poi | 
|---|
|  |  |  | style: "normal" // 设置地图风格为高端黑 | 
|---|
|  |  |  | 
|---|
|  |  |  | 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 description = params['description']; | 
|---|
|  |  |  | 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); | 
|---|
|  |  |  | map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 | 
|---|
|  |  |  | 
|---|
|  |  |  | 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") { | 
|---|
|  |  |  | 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 <= 0 || lat <= 0 || lon > 180 || lat > 180) { | 
|---|
|  |  |  | return true; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | var heigh = 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); | 
|---|
|  |  |  | var myIcon = ""; | 
|---|
|  |  |  | if (concentration > backgroundValue) { | 
|---|
|  |  |  | myIcon = new BMap.Icon('/img/uav_red.png', new BMap.Size(20, 20)); | 
|---|
|  |  |  | } else if (concentration == backgroundValue) { | 
|---|
|  |  |  | myIcon = new BMap.Icon('/img/uav_green.png', new BMap.Size(20, 20)); | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | return true; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | //var myIcon = new BMap.Icon('/img/uav_red.png', new BMap.Size(20, 20)); | 
|---|
|  |  |  | var marker = new BMap.Marker(point, {icon: myIcon}); | 
|---|
|  |  |  | map.addOverlay(marker); | 
|---|
|  |  |  | trackPoints.push(point); | 
|---|
|  |  |  | $("#tab").append("<tr><td>" + lon + "</td><td>" + lat + "</td><td>" + heigh + "</td><td>" + concentration + "</td></tr>");//控制输出的数据格式 | 
|---|
|  |  |  | var opts = { | 
|---|
|  |  |  | width: 80,     // 信息窗口宽度 | 
|---|
|  |  |  | height: 80,     // 信息窗口高度 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | var msg = "经度: " + value.e76 + "<br>纬度: " + value.e77 + "<br>高度: " + value.e78 + "<br>" +description+":  "+concentration+unit; | 
|---|
|  |  |  | if (concentration == "") { | 
|---|
|  |  |  | msg = "经度: " + value.e76 + "<br>纬度: " + value.e77 + "<br>高度: " + value.e78; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | var infoWindow = new BMap.InfoWindow(msg, opts);  // 创建信息窗口对象 | 
|---|
|  |  |  | marker.addEventListener("click", function () { | 
|---|
|  |  |  | map.openInfoWindow(infoWindow, point); //开启信息窗口 | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | if (typeof (value.e76) == "undefined" /*|| typeof (value.e78) == "undefined"*/) { | 
|---|
|  |  |  | showNoDroppoint(); | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | var lon = parseFloat(value.e76.substr(0, value.e76.length - 1)); | 
|---|
|  |  |  | var lat = parseFloat(value.e77.substr(0, value.e77.length - 1)); | 
|---|
|  |  |  | if (lon < 70 || lon > 150 || lat > 60 || lat <= 0) { | 
|---|
|  |  |  | return true; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | var lon1 = GPS.gcj_encrypt(lat, lon).lon; | 
|---|
|  |  |  | var lat1 = GPS.gcj_encrypt(lat, lon).lat; | 
|---|
|  |  |  | var lon2 = GPS.bd_encrypt(lat1, lon1).lon; | 
|---|
|  |  |  | var lat2 = GPS.bd_encrypt(lat1, lon1).lat; | 
|---|
|  |  |  | //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 = ""; | 
|---|
|  |  |  | var time = ""; | 
|---|
|  |  |  | $.each(value, function (key, data) { | 
|---|
|  |  |  | if (key == sensorKey) { | 
|---|
|  |  |  | concentration = data == "undefined" ? "" : parseFloat(data.substr(0, data.length - 1)); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (key == "time") { | 
|---|
|  |  |  | time = data.toString().split(" ")[1]; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | var point = new BMap.Point(lon2, lat2); | 
|---|
|  |  |  | 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>");//控制输出的数据格式 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | ) | 
|---|
|  |  |  | map.centerAndZoom(trackPoints, 17);// 根据经纬度显示地图的范围 | 
|---|
|  |  |  | map.setViewport(trackPoints);// 根据提供的地理区域或坐标设置地图视野 | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (trackPoints.length == 0) { | 
|---|
|  |  |  | showNoDroppoint(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 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", | 
|---|
|  |  |  | strokeOpacity: 1 | 
|---|
|  |  |  | });  //创建多边形 | 
|---|
|  |  |  | map.addOverlay(polygon);  //增加多边形 | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function showNoDroppoint() { | 
|---|
|  |  |  | 
|---|
|  |  |  | document.getElementById("data").style.display = 'none'; | 
|---|
|  |  |  | }, 250); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function getPoints(arry) { | 
|---|
|  |  |  | var points = []; | 
|---|
|  |  |  | $.each(arry, function (item, value) { | 
|---|
|  |  |  | var point = value["point"]; | 
|---|
|  |  |  | points.push(point); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | return points; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </script> | 
|---|