/** * 海流功能 * Created by Administrator on 2017/11/7. */ define([], function () { var ocean = { id: 'ocean', title: '海流', legend: 'images/meteo/legend/ocean.png', isInit: false, level: null, //当前要显示的层级 layer: null, //所在地图图层id slat: null, //开始lat slng: null, //开始lng elat: null, //结束lat elng: null, //结束lng delta: null, //每个数据地理间隔 rowNum: null, //lng跨度 colNum: null, //lat跨度 wd: null, //流向数组 ws: null, //流速数据 image: null, //图标所在图片 interval: 1, //绘制间隔(控制疏密程度) timeOutId: null, elem: 'OWD', elem2: 'OWS', level: null, levelName: { '0000': '海表', '0010': '10米', '0020': '20米', '0030': '30米', '0050': '50米' }, buttons: {}, isHide: false, getData: function () { //获取风羽数据 var dateStr = meteo.c.time.getTime(); // var dateStr = '2018-01-07 14:00:00'; var vti = meteo.c.time.getVti(); var params = { dateStr: dateStr, vti: vti, elem: ocean.elem, level: ocean.level } meteo.c.http.httpFunction(meteo.c.http.oceanData, null, params, function (json) { ocean.slat = json.slat; ocean.slng = json.slng; ocean.elat = json.elat; ocean.elng = json.elng; ocean.delta = json.delta; ocean.rowNum = json.rowNum; ocean.colNum = json.colNum; ocean.wd = json.vals; ocean.showOceanWd(); }, function () { // ONEMAP.C.publisher.publish({ type: 'warning', message: '海流流向暂无当前时次/层次数据' }, 'noteBar::add'); }); var params2 = { dateStr: dateStr, vti: vti, elem: ocean.elem2, level: ocean.level } meteo.c.http.httpFunction(meteo.c.http.oceanImage, null, params2, function (json) { meteo.c.title.updateTitle(ocean.id, meteo.c.process.setTitleTime(json.odate, json.vti, ocean.title, ocean.levelName[ocean.level])); $('#meteo-video-query-startDate').val(json.odate); json = JSON.parse(json.data); ocean.ws = json; ocean.showOceanWs(json); }, function () { // ONEMAP.C.publisher.publish({ type: 'warning', message: '海流流速暂无当前时次/层次数据' }, 'noteBar::add'); // meteo.c.title.updateTitle(ocean.id,'海流暂无当前时次/层次数据'); }) params2.vti = parseInt(vti) + 3; meteo.c.http.httpFunction(meteo.c.http.oceanImage, null, params2, function (json) { json = json.data; json = JSON.parse(json); ocean.loadImage(json); }, function () { }) }, showOceanWs: function (data) { var images = []; var latI = (data.elat - data.slat) / data.row; var lngI = (data.elng - data.slng) / data.col; for (var i = 0; i < data.files.length; i++) { var value = data.files[i]; if (value) { var str = value.split("\.")[0]; str = str.split("_"); var x = str[0]; var y = str[1]; // var slat = 75 - (x + 1) * 47.5; var slat = data.slat + x * latI; var slng = data.slng + y * lngI; var elat = slat + latI; var elng = slng + lngI; elat = elat > data.elat ? data.elat : elat; elng = elng > data.elng ? data.elat : elng; var url = data.url + value + '.mkt'; images.push(meteo.c.map.addImage(url, slat, slng, elat, elng)); // L.imageOverlay( // // data.url + value + '.mkt', // "scripts/meteo/test/wyl/WYL_2018010520_000_OWS_0000_" + x + "_" + y + ".png.mkt", // L.latLngBounds(L.latLng(slat, slng), L.latLng(elat, elng)) // ).addTo(layer); } } if (!ocean.layer|| !ocean.layer.tLayer || ocean.isHide) { for (var i = 0; i < images.length; i++) { meteo.c.map.removeImage(images[i]); } } else { if (ocean.layer.images) { ocean.removeImage(); } ocean.layer.images = images; } // setTimeout(function () { // // }, 300); }, loadImage:function (data) { //预先加载图片 for (var i = 0; i < data.files.length; i++) { var value = data.files[i]; if (value) { var url = data.url + value + '.mkt'; var img = $('').attr('src', url); img = null; } } }, showOceanWd: function () { //在当前显示区域内绘制 if (!ocean.layer) { return; } //计算当前屏幕内显示的索引 ocean.getAirPlumeLevel(); var se = ocean.getBounds(); var layerId = meteo.c.map.createLayer(); var layer = map2DViewer.groups[layerId]; //计算流向绘制屏幕内的初始索引 var istart = (ocean.elat - se[2]) / ocean.delta >> 0; var jstart = (se[1] - ocean.slng) / ocean.delta >> 0; if (istart < 0) istart = 0; if (jstart < 0) jstart = 0; //计算流向绘制屏幕内的最大索引 var row = Math.abs(se[0] - ocean.elat) / ocean.delta + 1; // var row = Math.abs(se[2] - ocean.slat) / ocean.delta + 1; var col = Math.abs(se[3] - ocean.slng) / ocean.delta + 1; if (row > ocean.rowNum) row = ocean.rowNum; if (col > ocean.colNum) col = ocean.colNum; for (var i = istart; i < row; i += ocean.interval) { for (var j = jstart; j < col; j += ocean.interval) { var lat = ocean.elat - i * ocean.delta; var lng = ocean.slng + j * ocean.delta; var wd = ocean.wd[i][j]; if (wd < 0) continue; var icon = ocean.getIcon(wd, 30); L.marker([lat, lng], {icon: icon}).addTo(layer); // meteo.c.map.addText('', i + "*" + j, 16, "#000000", 1, lat, lng, layerId); //打印数据 } } if (!ocean.layer || !ocean.layer.tLayer || ocean.isHide) { meteo.c.map.removeLayer(layerId); return; } if (ocean.layer.cLayer != null) { meteo.c.map.removeLayer(ocean.layer.cLayer); } ocean.layer.cLayer = layerId; //判断延时是否取消 if (ocean.timeOutId) ocean.timeOutId = null; }, getIcon: function (wd, size) { //获得图标 var width = size * 1.2; var a = size * 0.6; var b = size / 2; var canvas = document.createElement('canvas'); canvas.width = width; canvas.height = width; if (canvas.getContext) { //获取对应的CanvasRenderingContext2D对象(画笔) var ctx = canvas.getContext("2d"); ctx.save(); ctx.translate(a, a); ctx.rotate(wd * Math.PI / 180); ctx.translate(-a, -a); ctx.drawImage(ocean.image, a - b / 2, a - b, b, size); ctx.restore(); var url = canvas.toDataURL('image/png'); return L.icon({ iconUrl: url, iconSize: [size, size], iconAnchor: [size / 2, size / 2], }); } return null; }, getAirPlumeLevel: function () { //根据地图缩放等级获取风羽疏密等级 var zoom = map2DViewer.map.getZoom(); ocean.interval = zoom < 2 ? 32 : zoom < 4 ? 24 : zoom < 5 ? 16 : zoom < 6 ? 12 : zoom < 7 ? 8 : zoom < 8 ? 4 : zoom < 10 ? 2 : 1; }, getBounds: function () { //获取当前显示范围 var se = []; se.push(map2DViewer.map.getBounds().getSouthWest().lat); se.push(map2DViewer.map.getBounds().getSouthWest().lng); se.push(map2DViewer.map.getBounds().getNorthEast().lat); se.push(map2DViewer.map.getBounds().getNorthEast().lng); return se; }, create: function () { ocean.layer = { tLayer: meteo.c.map.createLayer(), cLayer: null, images: null, //图片图层列表 } }, remove: function () { if (ocean.layer) { meteo.c.map.removeLayer(ocean.layer.tLayer); meteo.c.map.removeLayer(ocean.layer.cLayer); ocean.removeImage(); ocean.layer = null; } }, removeImage: function () { if (ocean.layer.images) { for (var i = 0; i < ocean.layer.images.length; i++) { meteo.c.map.removeImage(ocean.layer.images[i]); } ocean.layer.images = null; } }, show: function () { ocean.isHide = false; ocean.showOceanWd(); ocean.showOceanWs(ocean.ws); }, hide: function () { ocean.isHide = true; if (ocean.layer) { meteo.c.map.removeLayer(ocean.layer.cLayer); ocean.layer.cLayer = null; ocean.removeImage(); } }, open: function () { if(ONEMAP.M.myLayers.checkLength() >= map23DConfig.layerMaxLength) { ONEMAP.C.publisher.publish({ type: 'warning', message: '图层数量已达上限' }, 'noteBar::add'); return; } //-------------创建图层------------------ if (ocean.layer) { ocean.close(); } ocean.create(); //----------------图层管理------------------- var options = { action: "add", // mod: "qixiang", DOM: { guid: ocean.layer.tLayer, type: "group", name: ocean.title, }, } var guid = ONEMAP.M.myLayers.myLayerControl(options); ONEMAP.C.publisher.subscribe(function (option) { switch (option.action) { case 'remove': ocean.close(); break; case 'opacity': if (option.options.opacity) { ocean.show(); } else { ocean.hide(); } break; } }, guid); //------------------------------------- ocean.buttons[ocean.level].parent().addClass('current'); meteo.c.title.addTitle(ocean.id); meteo.c.legend.addLegend(ocean.id, ocean.legend); meteo.c.time.open(true); //-------------------------------------- ocean.isHide = false; ocean.getData(); //-----------------第一次开启功能时添加动态绘制-------------------- // if (ocean.isInit) return; // ocean.isInit = true; // map2DViewer.map.on("moveend", function (e) { // if (ocean.layer && ocean.layer.cLayer) { // if (ocean.timeOutId) { //如果有未开始的流向绘制,就取消对应任务 // window.clearTimeout(ocean.timeOutId); // } // ocean.timeOutId = window.setTimeout(function () { // ocean.showOceanWd(); // }, 800) // } // }); }, close: function () { var options = { action: "remove", DOMid: ocean.layer.tLayer, } ONEMAP.M.myLayers.myLayerControl(options); ocean.buttons[ocean.level].parent().removeClass('current'); meteo.c.title.removeTitle(ocean.id); meteo.c.legend.removeLegend(ocean.id); meteo.c.time.close(); ocean.level = null; ocean.remove(); }, update: function () { //用于时间变化时更新数据 if (!ocean.layer || ocean.isHide) return; // var option = { // action: 'update', // DOMid: ocean.layer.tLayer, // DOM: { // name: '海流' // } // } // ONEMAP.M.myLayers.myLayerControl(option); ocean.getData() }, updateLevel: function () { ocean.buttons[ocean.level].parent().siblings().removeClass('current'); ocean.buttons[ocean.level].parent().addClass('current'); ocean.getData(); }, click: function (level) { if (ocean.level && level != ocean.level) { ocean.level = level; ocean.updateLevel(); } else { ocean.level = level; if (ocean.layer) { ocean.close(); } else { ocean.open(); } } }, onMove: function () { if (ocean.layer && !ocean.isHide && meteo.c.map.mapType == '2d') { if (ocean.timeOutId) { //如果有未开始的流向绘制,就取消对应任务 window.clearTimeout(ocean.timeOutId); } ocean.timeOutId = window.setTimeout(function () { ocean.showOceanWd(); }, 800) } }, init: function () { ocean.image = new Image(); ocean.image.src = meteo.c.http.myImageUrlJs + "oceanCurrent/red.png"; var buttons = $('.meteo-button-ocean'); ocean.buttons['0000'] = buttons.eq(10); ocean.buttons['0010'] = buttons.eq(11); ocean.buttons['0020'] = buttons.eq(12); ocean.buttons['0030'] = buttons.eq(13); ocean.buttons['0050'] = buttons.eq(14); } } meteo.f.ocean = ocean; return meteo.f.ocean; })