TDataView_ui/scripts/meteo/f/oceanCurrent.js

/**
 * 海流功能
 * 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 = $('<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;

})