$.getScript("/js/jquery.tablesorter.min.js"); /** * @namespace 放在Typhoon命名空间下 */ var Typhoon = window.Typhoon = Typhoon || {}; (function () { var infoBoxs = null; var postUrl = "/Typhoon/Handler.aspx"; var map = null; var FA = { "BABJ": ["#FF4050", "北京"], "BCGZ": ["#FF66FF", "广州"], "PGTW": ["#FFA040", "关岛"], "RJTD": ["#43FF4B", "日本"], "VHHH": ["#669999", "香港"], "ECMWF": ["#40DDFF", "欧洲"], "GZRD9KM": ["#373591", "热带所"] };//北京,广州,关岛,日本,香港,欧洲,热带所 var CityPoint = { "佛山": [113.123192, 23.023212], "广州": [113.265771, 23.138112], "海口": [110.329677, 20.035035], "三亚": [109.515596, 18.255983], "湛江": [110.366471, 21.281832], "阳江": [111.985434, 21.866942], "台山": [112.788016, 22.186441], "珠海": [113.5768, 22.24747], "深圳": [114.071227, 22.529779], "惠来": [116.308798, 22.964926], "汕尾": [115.379735, 22.793381], "汕头": [116.727337, 23.359387], "厦门": [118.148528, 24.492477], "福州": [119.298359, 26.077327] } var CityDistance = null;//城市的距离 [{ "海口": "1", "海口2": "2", "海口3": "13" }, { "海口": "1", "海口2": "2", "海口3": "13" }] var typhoon_Data = null; var Main = Typhoon.Main = function (scene) { //scene 调用场景 InitMap(); TyphonList(); $("tr.tr_tab td").bind("click", function () { $(this).siblings("td").css("backgroundColor", "#0656B4").removeClass("curr") $(this).css("backgroundColor", "#ff6c00").addClass("curr"); $("." + $(this).parent('tr').attr("targetCtrl")).hide().eq($(this).index()).show(); }).css("cursor", "pointer"); //控制面板 $(".flexBtn").bind("click", function () { var flexBtn = $(this); var hidClass = scene == "index" ? "flex_index" : ""; if (flexBtn.hasClass("flex"))//当前隐藏 { flexBtn.removeClass("flex"); flexBtn.removeClass(hidClass); $(".tfLeft").show(); $("#map_Typhoon").css({ width: scene=="index"?528:689 }) } else { flexBtn.addClass("flex"); flexBtn.addClass(hidClass); $(".tfLeft").hide(); $("#map_Typhoon").css({width:scene=="index"?752:900}) } }) //台风信息显示窗口控制 $("#stretchContractIcon").bind("click", function () { if ($(this).hasClass("open")) { $("#typhoon-path-detail").addClass("contract") $(this).removeClass("open"); } else { $(this).addClass("open"); $("#typhoon-path-detail").removeClass("contract") } }) //预报机构-显示 $.each(FA, function (k,v) { $("
" + v[1] + "
━ ━
").appendTo($(".typhoon-legend-main")); }) //预报机构点击事件 $("input[name='typhoon-legend']").bind('click', function () { $("input[name='typhoon_id']:checked").click() }) $(".typhoon-legend-command:odd").after("
"); //预报机构-控制 $(".leaflet-control-legend-top-center").bind("click", function () { var w = $(".leaflet-control-legend-top-center").parents('table').width(); if (w > 72) { $(".leaflet-control-legend-mid-center-hid").show() $(".leaflet-control-legend-mid-center").hide() $(".leaflet-control").width("72") $(".leaflet-control-legend-title-down").attr("class", "leaflet-control-legend-title-up") } else { $(".leaflet-control").width("235") $(".leaflet-control-legend-mid-center").show() $(".leaflet-control-legend-mid-center-hid").hide() $(".leaflet-control-legend-title-up").attr("class", "leaflet-control-legend-title-down") } }) $(".leaflet-control-legend-top-center").click(); } //初始化地图 var InitMap = function () { // 百度地图-地球此时 map = new BMap.Map("map_Typhoon"); map.centerAndZoom(new BMap.Point(130.06957, 23.859657), 5); map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用 map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件 var myStyleJson = [ { "featureType": "water", "elementType": "all", "stylers": { "color": "#3d85c6" } } ] map.setMapStyle({styleJson: myStyleJson}); } //绘制台风折线- 实况、预报路径 function draCurveLine(json) { var table="
时间经纬度气压
"; $("#typhoonDetails").empty().append(table); var typhoon_info = $("#typhoon_info"); map.clearOverlays();//清除覆盖物 $(".typhoon_info_lj").remove();//清除路径信息 var intlid = json[0].intlid; intlid = "****" == intlid ? "TD" : intlid; $(".typhoon_name").html(json[0].tscname + "(" + intlid + ")路径信息"); var mySize=new BMap.Size(6, 6) CityDistance = "["; var first = true; var legend = Getlegend(); $.each(json, function (index, content) { var tsname = content.tscname; var tscode = content.intlid; var tsename = content.tsename; if ("****" == tscode) { tscode = tsname = "TD"; } var fcid=content.fcid; var fa_name = FA[fcid][1]; var myIcon = new BMap.Icon('/images/Typhoon/' + fcid + '.png', mySize); var lineColor = FA[fcid][0]; //实况路径 var points = new Array();//实况路径经纬度 var real_list = content.real; //按时间倒叙排序 real_list.sort(function (a, b) { return new Date(b.ddatetime) - new Date(a.ddatetime); }); $.each(real_list, function (index, content) { var point = new BMap.Point(content.longitude, content.latitude); points.push(point); var time = new Date(content.ddatetime.replace(/\-/g, "\/")); time = SubHours(time, 8); if (first) { //路径信息 var cluetipTitle = tscode + tsname + "(" + tsename + ")"; cluetipTitle += "|时    间:" + time.format('yyyy-MM-dd hh:mm'); cluetipTitle += "|中心位置:" + content.longitude + "°E, " + content.latitude + "°N"; if (content.windspeed != "") cluetipTitle += "|风力风速:" + (wind_scale[parseInt(content.windspeed)] + "级 " + parseInt(content.windspeed) + "米/秒"); if (content.pressure != "") cluetipTitle += "|中心气压:" + Math.round(content.pressure) + " 百帕"; if (content.rr07 != "") cluetipTitle += "|七级风圈半径:" + Math.round(content.rr07) + " 公里"; if (content.rr10!="") cluetipTitle += "|十级风圈半径:" + Math.round(content.rr10) + " 公里"; typhoon_info.append($("" + time.format('MM-dd hh') + "" + parseFloat(content.longitude).toFixed(1) + "/" + parseFloat(content.latitude).toFixed(1) + "" + (content.windspeed != undefined ? wind_scale[parseInt(content.windspeed)] + "/" + parseInt(content.windspeed) : "") + "" + (content.pressure != undefined ? parseFloat(content.pressure).toFixed(1) : "") + "")); //求移动速度, 距离/时间=速度 var nextPoint_lon = null;//下一点 var netTime = null; if (index < real_list.length - 1) { nextPoint_lon = new BMap.Point(real_list[index + 1].longitude, real_list[index + 1].latitude); netTime = new Date(real_list[index + 1].ddatetime.replace(/\-/g, "\/")) netTime = SubHours(netTime, 8); } var wf = 0;//km 距离 if (nextPoint_lon) { var wf_distance = map.getDistance(nextPoint_lon, point) / 1000; var caluTime = netTime - time; var leave1 = caluTime % (24 * 3600 * 1000) //计算天数后剩余的毫秒数 var hours = Math.floor(leave1 / (3600 * 1000)) wf = Math.round(wf_distance / hours); } //城市距离计算 CityDistance += CityDistance.length > 1 ? ",{" : "{"; var distancd_json_item = ""; $.each(CityPoint, function (index, content) { //获取两点距离 return 米 var distance = map.getDistance(new BMap.Point(content[0], content[1]), point) / 1000; //转换千米 distancd_json_item += ',"' + index + '":"' + parseInt(distance) + 'km"'; }) if (distancd_json_item.length > 0) CityDistance += distancd_json_item.substring(1); CityDistance += "}"; } //点标注 addMarker(point, myIcon, InboBoxContent(tsname, tscode, content, "real", fa_name, wf)); }) draw(points, lineColor, "solid");//实况 if (first) { CityDistance += "]"; CityDistance = eval(CityDistance); } $(".typhoon_info_lj:odd").addClass("odd"); Typhoon_info_Click(); if (legend.indexOf(fcid) != -1) { // 预报路径 var points_fst = new Array();//预报路线 points_fst.push(points[0])//预报起始点 var fst_list = content.fst; if (fst_list == undefined) return true; //按leadtime 排序 解决预测路径错误问题 fst_list.sort(function (a, b) { return a.leadtime - b.leadtime; }); var arrarfstPoint = new Array(); var real_last_time = new Date(real_list[real_list.length - 1].ddatetime.replace(/\-/g, "\/"));//实况最后时间 //console.log(content.fcid+ real_last_time);//输出最后时间 $.each(fst_list, function (index, content) { var point = new BMap.Point(content.longitude, content.latitude); var time = new Date(content.ddatetime.replace(/\-/g, "\/")); if (real_last_time > time) return true; points_fst.push(point); addMarker(point, myIcon, InboBoxContent(tsname, tscode, content, "fst", fa_name,0)); }) draw(points_fst, lineColor, "dashed");//预报 } first = false; }) $(".sortTable").tablesorter(); $(".typhoon_info_lj:first").click(); $('#typhoon_info tr td').cluetip({ splitTitle: '|', cluetipClass: "taifeng", showTitle: false, width:'200' }); } /*台风路径时间序列选择 */ function Typhoon_info_Click() { $(".typhoon_info_lj").bind('click', function () { $(this).siblings('tr').removeClass("currData") $(this).addClass("currData"); var indexNum = $(this).index(); //城市距离数据显示 var distacne_josn = CityDistance[indexNum]; var city_distacne_ctrl = $(".city_distacne"); city_distacne_ctrl.empty(); var indexTmp = 1; var tr_tmp = ""; $.each(distacne_josn, function (k, v) { var tdStyle_border = indexTmp % 2 != 0 ? "style='border-right: 1px #ddd solid'" : ""; tr_tmp += "" + k + "" + v + ""; if (indexTmp % 2 == 0) tr_tmp += ""; indexTmp++; }) tr_tmp += ""; city_distacne_ctrl.append(tr_tmp) //显示当前时间序列的台风信息 $.each(typhoon_Data, function (index, content) { var detail_talbe = ""; var intlid = content.intlid; var tscname = content.tscname; var tsename = content.tsename; var showName = intlid + tscname + "(" + tsename + ")"; if ("****" == intlid) { intlid = tscname = tsename = "TD"; showName = "TD"; } detail_talbe += ""; var real_list = content.real; //按指定字段指定顺序排序 real_list.sort(function (a, b) { var columnIndex = $("#typhoon_info th[aria-sort!='none']").attr("data-column");//按个列排序(所以从0开始) var sortDesc = $("#typhoon_info th[aria-sort!='none']").attr("aria-sort");//升序还是降序 var temp = a; if (sortDesc != "descending") { a = b; b = temp } switch (columnIndex) { case "0": return new Date(b.ddatetime) - new Date(a.ddatetime); break; case "1": if (b.longitude == a.longitude) { return b.latitude - a.latitude; } else { return b.longitude - a.longitude; } break; case "2": return b.windspeed - a.windspeed; break; case "3": return b.pressure - a.pressure; break; } }); var changIndex = indexNum; var json = real_list[changIndex]; var time = new Date(json.ddatetime.replace(/\-/g, "\/")) time = SubHours(time, 8); detail_talbe += ""; // detail_talbe+=""; detail_talbe += ""; detail_talbe += ""; detail_talbe += ""; //detail_talbe += "
" + showName + "
时   间:" + time.format('yyyy年MM月dd日hh时') + "
强   度:热带低压(TD)
中心位置:" + json.longitude + "°E, " + json.latitude + "°N
风力风速:" + wind_scale[parseInt(json.windspeed)] + "级 " + (json.windspeed == undefined ? " " : Math.round(json.windspeed) + "米/秒") + "
中心气压:" + (json.pressure == undefined ? " " : Math.round(json.pressure) + " 百帕") + "
风圈半径:" + (json.rr07 == undefined ? " " : Math.round(json.rr07) + "公里(7级风圈)") + (json.rr10 == undefined ? "" : "
" + Math.round(json.rr10) + "公里(10级风圈)") + "
"; $(".typhoon-path-point-detail-container").show(); $("#typhoon-path-detail .content .right").empty().append(detail_talbe); return false; }) }) } /** 绘制折线 ** points 经纬度数组 ** color 线条颜色 ** strokeStyle 实线或虚线,solid或dashed **/ function draw(points, color, strokeStyle) { color = color == null ? "black" : color; if (null == points || points == undefined) return; var polyline = new BMap.Polyline(points, { strokeColor: color, strokeWeight: 1.5, strokeOpacity: 1 }); polyline.setStrokeStyle(strokeStyle) map.addOverlay(polyline); } /** 添加标注 ** point 经纬度 ** color 线条颜色 **/ function addMarker(point, myIcon, sContentjt) { var markerjt = new BMap.Marker(point, { icon: myIcon }); // 创建标注 map.addOverlay(markerjt); // 将标注添加到地图中 //创建信息窗口 var infoBoxjt01 = new BMapLib.InfoBox(map, sContentjt, { offset: { width: 90, height: -2 }, boxStyle: { width: "240px", height: "auto" }, boxClass: "infobox", closeIconMargin: "30px 8px 0 0", closeIconUrl: "/images/iw_close1d3.gif", //enableAutoPan: true, align: INFOBOX_AT_TOP }); markerjt.addEventListener("mouseover", function () { //if (infoBoxs != null) infoBoxs.close(); //关闭之前窗口 //infoBoxjt01.open(markerjt); //infoBoxs = infoBoxjt01; //获取当前对象 infoBoxjt01.open(markerjt) }) markerjt.addEventListener("mouseout", function () { infoBoxjt01.close(markerjt) }) } //台风信息 function InboBoxContent(tsname, tscode, content, type, fa_name, wf) { var sContentjt01 = "
"; sContentjt01 += "
" + tsname + "(" + tscode + ")
"; sContentjt01 += "
"; sContentjt01 += "
    "; var time = new Date(content.ddatetime.replace(/\-/g, "\/")); time = SubHours(time, 8); var timestr=time.format('yyyy年MM月dd日hh时'); if (type == "fst") { time = SubHours(time, content.leadtime); timestr = time.format('yyyy年MM月dd日hh时'); sContentjt01 += "
  • 预报机构:
  • " + fa_name + "
  • "; sContentjt01 += "
  • 到达时间:
  • " + timestr + "
  • "; } else { sContentjt01 += "
  • 时间:
  • " + timestr + "
  • "; } sContentjt01 += "
  • 中心位置:
  • " + content.longitude + "°E," + content.latitude + "°N
  • "; if (content.windspeed != "") { sContentjt01 += "
  • 最大风力:
  • " + (content.windspeed == undefined ? " " : wind_scale[parseInt(content.windspeed)] + "级") + "
  • "; sContentjt01 += "
  • 最大风速:
  • " + (content.windspeed == undefined ? " " : Math.round(content.windspeed) + "米/秒") + "
  • "; } if (content.pressure != "") sContentjt01 += "
  • 中心气压:
  • " + (content.pressure == undefined ? " " : Math.round(content.pressure) + "百帕") + "
  • "; if (wf>0) sContentjt01 += "
  • 移动速度:
  • " + (wf > 0 ? wf + "公里/小时" : " ") + "
  • "; //sContentjt01 += "
  • 移动速度:
  • "+(wf>0?wf+"公里/小时":" ")+"
  • "; // sContentjt01 += "
  • 移动方向:
  •  
  • "; if (content.rr07 != "") sContentjt01 += "
  • 七级风圈半径:
  • " + (content.rr07 == undefined ? " " : Math.round(content.rr07) + "公里") + "
  • "; if (content.rr10 != "") sContentjt01 += "
  • 十级风圈半径:
  • " + (content.rr10 == undefined ? " " : Math.round(content.rr10) + "公里") + "
  • "; sContentjt01 += "
"; sContentjt01 += "
"; return sContentjt01; } //台风列表 var TyphonList = function () { var minDate = new Date(); var year = minDate.getFullYear(); var t = new Date(year, 0, 1, 0, 0, 0, 0); $("#typhoonList tr").remove(); $("#typhoonList_history tr").remove(); //$.getJSON(postUrl + "?action=yyphoonlist", function (json) { $.getJSON("/typhoon/data/typhoonlist.js?t="+Math.random(), function (json) { $.each(json, function (index, content) { var tscname = content.tscname; var tsename = content.tsename; var intlid = content.intlid; if ("****" == intlid) { tscname =intlid= tsename = "TD"; } var mint = content.min_ddatetime;//台风最早时间 var t2 = new Date(mint.replace(/\-/g, "\/")) var typhoon_info_tr = $("" + intlid + "" + tscname + "" + tsename + ""); if (t2 > t) {//当年 typhoon_info_tr.appendTo($("#typhoonList")) } else {//历年 typhoon_info_tr.appendTo($("#typhoonList_history")); } }) $("#typhoonList tr:odd,#typhoonList_history tr:odd").css("background", "#f6f6f6"); Typhoon_radio_Click(); $("#typhoonList input:first").click(); }); } //选择台风 function Typhoon_radio_Click() { $("input[name='typhoon_id']").bind('click', function () { var tsid = $(this).attr("tsid"); //$.getJSON(postUrl + "?action=real&tsid=" + tsid, function (json) { $.getJSON("/typhoon/data/real-"+tsid+".js", function (json) { typhoon_Data = json; draCurveLine(json) }); }) } //获取预报台 function Getlegend() { var legend = new Array(); $("input[name='typhoon-legend']:checked").each(function () { legend.push($(this).val()); }) return legend; } if (!Array.indexOf) { Array.prototype.indexOf = function (obj) { for (var i = 0; i < this.length; i++) { if (this[i] == obj) { return i; } } return -1; } } })(); function SubHours(nd, hours) { //date = date.replace(/-/g, "/"); //更改日期格式 //var nd = new Date(); nd = nd.valueOf(); nd = nd + hours * 60 * 60 * 1000; nd = new Date(nd); return nd; //alert(nd.getFullYear() + "年" + (nd.getMonth() + 1) + "月" + nd.getDate() + "日"); var y = nd.getFullYear(); var m = nd.getMonth() + 1; var d = nd.getDate(); var h = nd.getHours(); var mm = nd.getMinutes(); var ss = nd.getSeconds(); m = m <= 9 ? m = "0" + m : m; d = d <= 9 ? d = "0" + d : d; h = h <= 9 ? h = "0" + h : h; mm = mm <= 9 ? mm = "0" + mm : mm; ss = ss <= 9 ? ss = "0" + ss : ss; var cdate = y + "-" + m + "-" + d +" "+h+":"+mm+":"+ss; //var cdate = y + "/" + m + "/" + d + " " + h + ":00:00"; return cdate; //调用方法 (注意日期格式) //console.log(SubHours("2014/4/30 16:40:00",25)) }