"use script"; //开发环境建议开启严格模式
|
|
//对应widget.js中MyWidget实例化后的对象
|
var thisWidget;
|
|
//当前页面业务
|
function initWidgetView(_thisWidget) {
|
thisWidget = _thisWidget;
|
|
// $(window).resize(refHeight)
|
// refHeight()
|
|
//获取台风列表
|
queryTyphoonList().then(function (arr) {
|
//启动正在发送的台风
|
arr.forEach((item) => {
|
if (item.state == "start") {
|
item.show = true;
|
selectOneTyphoon(item);
|
}
|
});
|
showTyphoonTable(arr);
|
});
|
}
|
|
//显示台风列表
|
function showTyphoonTable(data) {
|
$("#listTable").bootstrapTable({
|
data: data,
|
height: 390,
|
pagination: false,
|
singleSelect: false,
|
checkboxHeader: false,
|
columns: [
|
{
|
title: "是否显示",
|
field: "show",
|
align: "center",
|
checkbox: true,
|
with: 50,
|
},
|
{
|
title: "台风编号",
|
field: "typnumber",
|
align: "center",
|
},
|
{
|
title: "台风名（中文）",
|
field: "name_cn",
|
align: "center",
|
},
|
{
|
title: "台风名（英文）",
|
field: "name_en",
|
align: "center",
|
},
|
],
|
onCheck: function (row) {
|
selectOneTyphoon(row);
|
},
|
onUncheck: function (row) {
|
unSelectOneTyphoon(row);
|
},
|
onClickRow: function (row) {
|
if (typhoonListObj[row.id] && typhoonListObj[row.id].show) {
|
selectOneTyphoon(row);
|
}
|
},
|
});
|
|
$("#btnPlay").click(function () {
|
if (!selectTF) {
|
return;
|
}
|
|
if (selectTF.playTyphoon?.isStart) {
|
stopTyphoon();
|
} else {
|
startTyphoon();
|
}
|
});
|
}
|
|
function startTyphoon() {
|
$("#btnPlay").html('<span class="fa fa-stop" aria-hidden="true"></span> 停止');
|
|
thisWidget.startTyphoon(selectTF);
|
}
|
|
//停止播放
|
function stopTyphoon() {
|
$("#btnPlay").html('<span class="fa fa-play" aria-hidden="true"></span> 播放');
|
thisWidget.stopTyphoon(selectTF);
|
}
|
|
var typhoonListObj = {};
|
|
//取消勾选台风
|
function unSelectOneTyphoon(row) {
|
let typhoon = typhoonListObj[row.id];
|
if (typhoon) {
|
typhoon.show = false;
|
}
|
if (typhoon == selectTF) {
|
stopTyphoon();
|
$("#typhoonPath").hide();
|
}
|
}
|
|
//勾选了台风
|
function selectOneTyphoon(row) {
|
$("#typhoonPath").show();
|
$("#lblName").html("[" + row.typnumber + "]" + "" + row.name_cn);
|
stopTyphoon();
|
|
if (typhoonListObj[row.id]) {
|
let typhoon = typhoonListObj[row.id];
|
typhoon.show = true;
|
typhoon.flyTo();
|
showPathTable(typhoon); //已有的，直接展示
|
} else {
|
queryTyphoonItem(row.id).then(function (newData) {
|
let typhoon = thisWidget.createTyphoon({
|
...row,
|
...newData,
|
});
|
typhoon.flyTo();
|
|
showPathTable(typhoon);
|
|
typhoonListObj[row.id] = typhoon; //绑定到数据中，方便使用
|
});
|
}
|
}
|
|
let selectTF;
|
|
//台风路径表格的显示
|
function showPathTable(typhoon) {
|
selectTF = typhoon;
|
|
$("#pathTable").bootstrapTable("destroy");
|
$("#pathTable").bootstrapTable({
|
height: getHeight(),
|
pagination: false,
|
singleSelect: true,
|
data: typhoon.options.path,
|
columns: [
|
{
|
title: "时间",
|
field: "time_str",
|
align: "center",
|
},
|
|
{
|
title: "风速",
|
field: "centerSpeed",
|
align: "center",
|
formatter: function (value, row, index) {
|
return value + "m/s";
|
},
|
},
|
{
|
title: "移向",
|
field: "moveTo_str",
|
align: "center",
|
},
|
{
|
title: "强度",
|
field: "level_str",
|
align: "center",
|
},
|
],
|
onClickRow: function (row) {
|
typhoon.showPointFQ(row);
|
let graphic = typhoon.getPointById(row.id);
|
if (graphic) {
|
graphic.flyTo({
|
radius: 1600000,
|
complete() {
|
graphic.openTooltip();
|
},
|
});
|
}
|
},
|
});
|
}
|
|
function getHeight() {
|
return $(window).height() - 450;
|
}
|
|
//访问后端接口，取台风列表数据
|
function queryTyphoonList() {
|
return new Promise(function (resolve, reject) {
|
function typhoon_jsons_list_default(data) {
|
var arr = [];
|
data.typhoonList.forEach((item) => {
|
arr.push({
|
id: item[0],
|
name_en: item[1],
|
name_cn: item[2],
|
typnumber: item[3],
|
state: item[7],
|
});
|
});
|
resolve(arr);
|
}
|
window.typhoon_jsons_list_default = typhoon_jsons_list_default;
|
|
$.ajax({
|
// url: './data/typhoon/list_2020.json',
|
url: "http://typhoon.nmc.cn/weatherservice/typhoon/jsons/list_default", //在线实时接口
|
type: "GET",
|
dataType: "jsonp",
|
data: {
|
t: new Date().getTime(),
|
callback: "typhoon_jsons_list_default",
|
},
|
success: typhoon_jsons_list_default,
|
error: function (data) {
|
console.log("台风列表数据获取失败", data);
|
// haoutil.msg('台风列表数据获取失败！')
|
reject(data);
|
},
|
});
|
});
|
}
|
|
//访问后端接口，取单个台风路径数据
|
function queryTyphoonItem(id) {
|
return new Promise(function (resolve, reject) {
|
function typhoon_jsons_view(res) {
|
var newData = conversionPathData(res.typhoon); //在Typhoon.js中
|
// console.log('台风数据==>', newData)
|
resolve(newData);
|
}
|
window["typhoon_jsons_view_" + id] = typhoon_jsons_view;
|
|
$.ajax({
|
// url: 'data/typhoon/view_' + typId + '.json',
|
url: "http://typhoon.nmc.cn/weatherservice/typhoon/jsons/view_" + id, //在线实时接口
|
type: "GET",
|
dataType: "jsonp",
|
data: {
|
t: new Date().getTime(),
|
callback: "typhoon_jsons_view",
|
},
|
success: function (res) {},
|
error: function (data) {
|
console.log("获取台风单个数据失败");
|
reject(data);
|
},
|
});
|
});
|
}
|
|
//转换数据,将后端接口数据转换为需要的格式
|
function conversionPathData(oldData) {
|
var path = [];
|
oldData[8].forEach((message) => {
|
let circle7;
|
let circle10;
|
let circle12;
|
message[10].forEach((level) => {
|
let radiusObj = {
|
speed: level[0],
|
radius1: level[1],
|
radius2: level[2],
|
radius3: level[3],
|
radius4: level[4],
|
};
|
|
if (level[0] == "30KTS") {
|
circle7 = radiusObj;
|
} else if (level[0] == "50KTS") {
|
circle10 = radiusObj;
|
} else if (level[0] == "64KTS") {
|
circle12 = radiusObj;
|
} else {
|
console.log("未处理风圈", radiusObj);
|
}
|
});
|
|
//预测路径
|
let babj = message[11]?.BABJ;
|
let arrForecast;
|
if (babj) {
|
arrForecast = [];
|
babj.forEach((element) => {
|
let newArr = {
|
time: element[0], //几小时预报
|
time_str: element[1],
|
lon: element[2], //预报经度
|
lat: element[3], //预报纬度
|
strength: element[4], //中心气压
|
centerSpeed: element[5], //最大风速 m/s
|
level: element[7], //预报台风等级, 代码
|
color: getColor(element[7]), //对应等级的颜色
|
};
|
arrForecast.push(newArr);
|
});
|
}
|
|
let time = new Date(message[2]); //时间
|
|
path.push({
|
id: message[0], //唯一标识
|
time: new Date(message[2]), //时间
|
time_str: time.format("MM-dd HH:mm"), //时间格式化字符串
|
|
level: message[3], //台风等级, 代码
|
level_str: getLevelStr(message[3]),
|
color: getColor(message[3]), //对应等级的颜色
|
lon: message[4], //经度
|
lat: message[5], //纬度
|
strength: message[6], //中心气压,百帕
|
centerSpeed: message[7], //最大风速,米/秒
|
moveTo: message[8], //移动方向, 代码
|
moveTo_str: getMoveToStr(message[8]),
|
windSpeed: message[9], //移动速度,公里/小时
|
|
circle7: circle7, //7级风圈, 对象
|
circle10: circle10, //10级风圈, 对象
|
circle12: circle12, //12级风圈, 对象
|
forecast: arrForecast, //预测路径, 数组
|
});
|
});
|
|
return {
|
id: oldData[0],
|
name_en: oldData[1], //台风名字,英文
|
name_cn: oldData[2], //台风名字
|
typnumber: oldData[3], //台风编号
|
state: oldData[7],
|
path: path,
|
};
|
}
|
|
function getLevelStr(value) {
|
switch (value) {
|
default:
|
case "TD":
|
return "热带低压";
|
case "TS":
|
return "热带风暴";
|
case "STS":
|
return "强热带风暴";
|
case "TY":
|
return "台风";
|
case "STY":
|
return "强台风";
|
case "SuperTY":
|
return "超强台风";
|
}
|
}
|
|
function getMoveToStr(value) {
|
switch (value) {
|
default:
|
case "N":
|
return "北";
|
case "NNE":
|
return "北东北";
|
case "NE":
|
return "东北";
|
case "ENE":
|
return "东东北";
|
case "E":
|
return "东";
|
case "ESE":
|
return "东东南";
|
case "ES":
|
return "东南";
|
case "SSE":
|
return "南东南";
|
case "S":
|
return "南";
|
case "SSW":
|
return "南西南";
|
case "SW":
|
return "西南";
|
case "WSW":
|
return "西西南";
|
case "W":
|
return "西";
|
case "WNW":
|
return "西北西";
|
case "NW":
|
return "北西";
|
case "NNW":
|
return "北西北";
|
}
|
}
|
|
//不同等级的台风对应不同的颜色
|
function getColor(level) {
|
switch (level) {
|
default:
|
case "TD": //热带低压
|
return "rgb(238,209,57)";
|
case "TS": //热带风暴
|
return "rgb(0,0,255)";
|
case "STS": //强热带风暴
|
return "rgb(15,128,0)";
|
case "TY": //台风
|
return "rgb(254,156,69)";
|
case "STY": //强台风
|
return "rgb(254,0,254)";
|
case "SuperTY": //超强台风
|
return "rgb(254,0,0)";
|
}
|
}
|
