/** * 本地数据台风功能 typhoon * Created by Administrator on 2017/10/20. */ define([], function (_myLayerActions) { var typhoon = { layers: [], radiusLayers: [], //大风半径所在图层 data: null, markerIds: [], markerDatas: [], popup:null, getTyphIndex: function (callback) { //台风列表 meteo.c.http.httpFunction(meteo.c.http.typhIndex, null, null, function (json) { typhoon.data = []; for (var i = 0; i < json.length; i++) { if (json[i].cccc == 'BABJ') typhoon.data.push(json[i]); } // typhoon.data = json; typhoon.showTyphList(typhoon.data); callback ? callback() : null; }, function (error) { }) }, showTyphList: function (json) { //填充台风列表 var content = ''; for (var i = 0; i < json.length; i++) { content += "
  • " + ""; // content += typhoon.getId(adata.id) + " " + adata.cname + " " + adata.ccc; var name = json[i].cname ? json[i].cname : json[i].ename; content += json[i].id1 + " " + name + " " + json[i].cccc; content += "
  • "; } $('#meteo-list-typh').html(content); }, showTyphoon: function (index) { var data = typhoon.data[index].data; if (data) { var layerId = meteo.c.map.createLayer(); var layer = map2DViewer.groups[layerId]; typhoon.radiusLayers[index] = meteo.c.map.createLayer(); var hLatlngs = []; //台风历史路径点的位置集合(用来绘制台风路径 //1.遍历所有点,找到预报第一个点的编号 var count = 0; for (var i = 0; i < data.length; i++) { if (data[i].vti != 0) { break; } count = i; } //1.绘制台风的历史路径点 for (var i = 0; i < count - 1; i++) { var point = data[i]; // var latlng = [point.clat, point.clng]; var latlng = [point.clng, point.clat]; var url = typhoon.getIcon(point.cws); hLatlngs.push(latlng); // var icon = L.icon({ // iconUrl: url, // iconSize: [16, 16], // iconAnchor: [8, 8], // }) // L.marker(latlng, { // icon: icon, // typhIndex: index, // pointIndex: i // }).addTo(layer).on('click', function (e) { // typhoon.showTyphPopup(e); // }); // var content = typhoon.getPopup(); var markerId = meteo.c.map.addMarker('', url, 14, 0, '', point.clat, point.clng, layerId); var marker = map2DViewer.markers[markerId]; map23DData.markers[markerId].typhIndex = index; map23DData.markers[markerId].pointIndex = i; marker.on('click', function (e) { typhoon.showTyphPopup(e); }) } //2.绘制台风当前位置 //2.1 绘制位置点 var point = data[count]; // var latlng = [point.clat, point.clng]; var latlng = [point.clng, point.clat]; // var icon; // if (typhoon.data[index].cccc == 'BABJ') { // icon = L.icon({ // iconUrl: meteo.c.http.markerUrl + 'typhoon/typhoon.png', // iconSize: [30, 30], // iconAnchor: [15, 15], // }) // } else { // icon = L.icon({ // iconUrl: typhoon.getIcon(point.cws), // iconSize: [16, 16], // iconAnchor: [8, 8], // }) // } hLatlngs.push(latlng); // L.marker(latlng, { // icon: icon, // typhIndex: index, // pointIndex: count // }).addTo(layer).on('click', function (e) { // typhoon.showTyphPopup(e); // }); var markerId1 = meteo.c.map.addMarker('', meteo.c.http.markerUrl + 'typhoon/typhoon.png', 32, 0, '', point.clat, point.clng, layerId); var marker1 = map2DViewer.markers[markerId1]; map23DData.markers[markerId1].typhIndex = index; map23DData.markers[markerId1].pointIndex = count; marker1.on('click', function (e) { typhoon.showTyphPopup(e); }) //移动到当前位置点 map23DControl.setView({ center: { lat: point.clat, lng: point.clng, }, zoom: 6, tilt: 0 }) //2.2 标台风名称 var color = typhoon.getTyphoonColor(typhoon.data[index].cccc); if (point.ename == "TD") name = '热带低压';//标热带低压 var name = point.cname ? point.cname : point.ename; if (name) meteo.c.map.addText(name, name, 16, color, 1, hLatlngs[0][1], hLatlngs[0][0], layerId, true, -3, -3); //2.3 绘制风圈 //测试用大风半径 // point.r30 = [{wd: 45, radius: 300}, {wd: 135, radius: 280}, // {wd: 225, radius: 250}, {wd: 315, radius: 370}]; // point.r50 = [{wd: 45, radius: 200}, {wd: 135, radius: 180}, // {wd: 225, radius: 150}, {wd: 315, radius: 270}]; typhoon.drawTyphoonRange( point.clat, point.clng, point.r30, '#00ff00',typhoon.radiusLayers[index]); typhoon.drawTyphoonRange( point.clat, point.clng, point.r50, '#ffff00',typhoon.radiusLayers[index]); typhoon.drawTyphoonRange( point.clat, point.clng, point.r70, '#ff0000',typhoon.radiusLayers[index]); //3.绘制台风的历史路径 if (hLatlngs.length >= 2) { // L.polyline(hLatlngs, {color: '#4b73f6'}).addTo(layer); meteo.c.map.addPolyline('', '#4b73f6', 2, false, hLatlngs, layerId, true); } // 5.绘制台风预测路径(已消亡台风不绘制) var nLatlngs = [latlng]; for (var i = count + 1; i < data.length; i++) { var point = data[i]; // var latlng = [point.clat, point.clng]; var latlng = [point.clng, point.clat]; var url = typhoon.getIcon(point.cws); nLatlngs.push(latlng); // var icon = L.icon({ // iconUrl: url, // iconSize: [16, 16], // iconAnchor: [8, 8], // }) // L.marker(latlng, { // icon: icon, // typhIndex: index, // pointIndex: i // }).addTo(layer).on('click', function (e) { // typhoon.showTyphFcstPopup(e); // }); var markerId = meteo.c.map.addMarker('', url, 16, 0, '', point.clat, point.clng, layerId); var marker = map2DViewer.markers[markerId]; map23DData.markers[markerId].typhIndex = index; map23DData.markers[markerId].pointIndex = i; map23DData.markers[markerId].isFcst = true; marker.on('click', function (e) { typhoon.showTyphFcstPopup(e); }) } if (nLatlngs.length >= 2) { // L.polyline(nLatlngs, { // color: color, // dashArray: '5' // }).addTo(layer); meteo.c.map.addPolyline('', color, 2, '5', nLatlngs, layerId, true); } //6.加入台风 if (!typhoon.layers[index] || !typhoon.layers[index].tLayer || typhoon.layers[index].isHide) { meteo.c.map.removeLayer(layerId); return; } if (typhoon.layers[index].tLayer) { if (typhoon.layers[index].cLayer) { meteo.c.map.removeLayer(typhoon.layers[index].cLayer); } typhoon.layers[index].cLayer = layerId; } else { meteo.c.map.removeLayer(layerId); } } }, getIcon: function (ws) { //根据台风中心风速更改台风marker图标 var url = ws >= 51.0 ? 'point_red.png' : ws >= 41.5 ? 'point_purple.png' : ws >= 32.7 ? 'point_orange.png' : ws >= 24.5 ? 'point_yellow.png' : ws >= 17.2 ? 'point_blue.png' : 'point_green.png'; url = meteo.c.http.markerUrl + 'typhoon/' + url; return url; }, drawTyphoonRange: function (lat, lng, rValues, color,layer) { //台风影响范围 if (rValues != null) { var circle; if (!rValues.length) { // circle = L.circle([lat, lng], {radius: rValues * 1000, color: color}); circle = meteo.c.map.addCircle('', rValues * 1000, color, '', lat, lng, layer); } else if (rValues.length == 4) { //不规则风圈 var radiusPoint = []; for (var i = rValues.length - 1; i >= 0; i--) { var wd = rValues[i].wd < 90 ? 45 : rValues[i].wd < 180 ? 135 : rValues[i].wd < 270 ? 225 : 315; wd = 90 - wd; var deltaDegree = 1.0; //间隔的角度 var sDegree = wd - 45.0; //开始的角度 var eDegree = wd + 45.0; //结束的角度 var num = Math.round((eDegree - sDegree) / deltaDegree); var resR = (rValues[i].radius * 1.0) / 110.0; //todo:目前认为1经纬度相当于110公里! for (var j = 0; j < num; j++) { radiusPoint.push([lat + Math.sin((sDegree + j * deltaDegree) * Math.PI / 180.0) * resR, lng + Math.cos((sDegree + j * deltaDegree) * Math.PI / 180.0) * resR]); } } if (radiusPoint.length >= 2) { // circle = L.polygon(radiusPoint, {color: color}); circle = meteo.c.map.addPolygon('', color, '', radiusPoint, '', layer) } } return circle; } }, getTyphoonColor: function (ccc) { //传入观测站,得到台风预测路径颜色 switch (ccc) { case "BABJ": return '#ff0000'; case "日本": return '#00ff00'; // case "美国": // break; // case "欧洲": // break; // case "韩国": // break; // case "": // break; } return '#4b73f6'; }, //显示台风数据 showTyphPopup: function (e) { var marker = map23DData.markers[e.target.guid]; var ti = marker.typhIndex; var pi = marker.pointIndex; var data = typhoon.data[ti]; var title = data.cname ? data.cname : data.ename; var cccc = data.cccc; data = data.data[pi]; var html = ""; typhoon.popup = L.popup().setLatLng(e.latlng).setContent(html); typhoon.popup.openOn(map2DViewer.map); // meteo.c.map.clearLayer(fqlayerid); if(typhoon.radiusLayers[ti]){ meteo.c.map.removeLayer(typhoon.radiusLayers[ti]); typhoon.radiusLayers[ti] = meteo.c.map.createLayer(); } typhoon.drawTyphoonRange( data.clat, data.clng, data.r30, '#00ff00',typhoon.radiusLayers[ti]); typhoon.drawTyphoonRange( data.clat, data.clng, data.r50, '#ffff00',typhoon.radiusLayers[ti]); typhoon.drawTyphoonRange( data.clat, data.clng, data.r70, '#ff0000',typhoon.radiusLayers[ti]); }, //预报点数据弹窗 showTyphFcstPopup: function (e) { var marker = map23DData.markers[e.target.guid]; var ti = marker.typhIndex; var pi = marker.pointIndex; var data = typhoon.data[ti]; var title = data.cname ? data.cname : data.ename; var cccc = data.cccc; data = data.data[pi]; var html = ""; typhoon.popup = L.popup().setLatLng(e.latlng).setContent(html); typhoon.popup.openOn(map2DViewer.map); }, showTyphPopup3d: function (options) { //显示台风数据 var marker = map23DData.markers[options.feature.name]; var ti = marker.typhIndex; var pi = marker.pointIndex; if ((ti != 0 && !ti) || (pi != 0 && !pi)) return; var data = typhoon.data[ti]; var title = data.cname ? data.cname : data.ename; var cccc = data.cccc; data = data.data[pi]; var html = ""; map3DViewer.showPopup({ x: options.evt.X, y: options.evt.Y, width: 150,//容器宽 height: 200,//容器高 content: html //冒泡窗内容 }) }, showTyphFcstPopup3d: function (options) { //预报点数据弹窗 var marker = map23DData.markers[options.feature.name]; var ti = marker.typhIndex; var pi = marker.pointIndex; if ((ti != 0 && !ti) || (pi != 0 && !pi)) return; var data = typhoon.data[ti]; var title = data.cname ? data.cname : data.ename; var cccc = data.cccc; data = data.data[pi]; var html = ""; map3DViewer.showPopup({ x: options.evt.X, y: options.evt.Y, width: 150,//容器宽 height: 200,//容器高 content: html //冒泡窗内容 }) }, clickTyphoonList: function (index) { //点击台风数据 if (typhoon.layers[index] != null) { typhoon.removeTyphoon(index); } else { typhoon.createTyphoon(index); } }, getTyphInfo: function (index) { //获取台风数据,并且在获取数据后绘制台风 var params = { id: typhoon.data[index].id1, cccc: typhoon.data[index].cccc }; meteo.c.http.httpFunction(meteo.c.http.typhInfo, null, params, function (json) { typhoon.data[index].data = json; typhoon.showTyphoon(index); }) }, createTyphoon: function (index) { //创建台风所需图层,同时去获取台风数据 if(ONEMAP.M.myLayers.checkLength() >= map23DConfig.layerMaxLength) { ONEMAP.C.publisher.publish({ type: 'warning', message: '图层数量已达上限' }, 'noteBar::add'); return; } $("#meteo-typhoon-item" + index).parent().addClass('current'); //选中台风按钮 typhoon.layers[index] = { tLayer: meteo.c.map.createLayer(), cLayer: null, } //----------------图层管理------------------- var name = typhoon.data[index].cname ? typhoon.data[index].cname : typhoon.data[index].ename; var options = { action: "add", // mod: "qixiang", DOM: { guid: typhoon.layers[index].tLayer, type: "group", name: name + " " + typhoon.data[index].cccc, }, } var guid = ONEMAP.M.myLayers.myLayerControl(options); ONEMAP.C.publisher.subscribe(function (option) { switch (option.action) { case 'remove': typhoon.removeTyphoon(index); break; case 'opacity': if (option.options.opacity) { typhoon.show(index); } else { typhoon.hide(index); } break; } }, guid); //------------------------------------- typhoon.getTyphInfo(index); //获取台风数据 }, removeTyphoon: function (index) { //删除指定台风, if (typhoon.layers[index]) { $("#meteo-typhoon-item" + index).parent().removeClass('current'); //取消台风按钮的选中 //---------------------图层管理---------------------- var options = { action: "remove", DOMid: typhoon.layers[index].tLayer, } ONEMAP.M.myLayers.myLayerControl(options); meteo.c.map.removeLayer(typhoon.layers[index].tLayer); meteo.c.map.removeLayer(typhoon.layers[index].cLayer); typhoon.layers[index] = null; meteo.c.map.removeLayer(typhoon.radiusLayers[index]); //风圈图层 typhoon.radiusLayers[index] = null; //------------------------取消弹窗-------------------------- if (typhoon.popup) { typhoon.popup.remove(); typhoon.popup = null; } } }, hide: function (index) { //台风隐藏 if (typhoon.layers[index]) {console.log(typhoon.radiusLayers[index]) meteo.c.map.removeLayer(typhoon.layers[index].cLayer); meteo.c.map.removeLayer(typhoon.radiusLayers[index]); //风圈图层 // typhoon.radiusLayers[index] = null; //------------------------取消弹窗-------------------------- if (typhoon.popup) { typhoon.popup.remove(); typhoon.popup = null; } } }, show: function (index) { //台风显示 typhoon.showTyphoon(index); }, open: function () { //开启台风功能 }, close: function () { //关闭台风功能 var isOpen = false; for (var i = 0; i < typhoon.layers.length; i++) { if (typhoon.layers[i] != null) { typhoon.removeTyphoon(i); isOpen = true; } } return isOpen; }, init: function () { $('#meteo-bt-controld').click(function () { if (!typhoon.data) { typhoon.getTyphIndex(); } }); $("#meteo-bt-sc-typh").click(function () { //如果有台风,则全部删除 var isOpen = typhoon.close(); if (isOpen) return false; typhoon.getTyphIndex(function () { var count = 0; for (var i = 0; i < typhoon.data.length; i++) { if (!typhoon.data[i].finish) { // if (i == 5) { typhoon.clickTyphoonList(i); count = 1; } } if (count == 0) { alert('没有未消亡台风'); } }) return false; }); PubSub.subscribe('map3D.featureClick', function (msg, options) { markerData = map23DData.markers[options.feature.name]; if (markerData.isFcst) { typhoon.showTyphFcstPopup3d(options); } else { typhoon.showTyphPopup3d(options) } }); } } meteo.f.typhoon = typhoon; return meteo.f.typhoon; })