TDataView_ui/scripts/meteo/f/airPlume.js

/**
 * 风羽功能
 * Created by Administrator on 2017/11/7.
 */
define([], function () {
    var airPlume = {
        id: 'air',
        title: '风场',    //风羽功能标题
        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跨度
        ws: null,       //风速数组
        wd: null,       //风向数组
        image: null,    //风羽图标所在图片
        interval: 1,    //风羽绘制间隔（控制风羽疏密程度）
        timeOutId: null,

        elem: 'WS',
        elem2: 'WD',
        level: null,
        levelName: {
            '9999': '10米',
            '0925': '925hPa',
            '0850': '850hPa',
            '0700': '700hPa',
            '0500': '500hPa'
        },
        buttons: {
            '9999': null,
            '0925': null,
            '0850': null,
            '0700': null,
            '0500': null
        },
        isHide: false,
        getData: function () {      //获取风羽数据
            var dateStr = meteo.c.time.getTime();
            // var dateStr = '2018-01-07 14:00:00';
            var level = airPlume.level == '9999' ? '1000' : airPlume.level;
            var vti = meteo.c.time.getVti();
            var params = {
                dateStr: dateStr,
                vti: vti,
                elem: airPlume.elem,
                level: level
            }

            meteo.c.http.httpFunction(meteo.c.http.tData, null, params, function (json) {
                airPlume.slat = json.slat;
                airPlume.slng = json.slng;
                airPlume.elat = json.elat;
                airPlume.elng = json.elng;
                airPlume.delta = json.delta;
                airPlume.rowNum = json.rowNum;
                airPlume.colNum = json.colNum;
                airPlume.ws = json.vals;

                params.elem = airPlume.elem2;
                meteo.c.http.httpFunction(meteo.c.http.tData, null, params, function (json) {
                    airPlume.wd = json.vals;

                    meteo.c.title.updateTitle(airPlume.id,
                        meteo.c.process.setTitleTime(json.odate, json.vti, airPlume.title, airPlume.levelName[airPlume.level]));
                    
                    $('#meteo-video-query-startDate').val(json.odate);
                    airPlume.showAirplume();
                }, function () {
                    // ONEMAP.C.publisher.publish({ type: 'warning', message: '暂无当前时次/层次风羽WD数据' }, 'noteBar::add');
                    // meteo.c.title.updateTitle(airPlume.id, '暂无当前时次/层次风羽WD数据');
                    // if (airPlume.layer.cLayer) {
                    //
                    // } else {
                    //     airPlume.close();
                    // }
                });
            }, function () {
                // ONEMAP.C.publisher.publish({ type: 'warning', message: '暂无当前时次/层次风羽WS数据' }, 'noteBar::add');
                // meteo.c.title.updateTitle(airPlume.id, '暂无当前时次/层次风羽WS数据');
                // if (airPlume.layer.cLayer) {
                //
                // } else {
                //     airPlume.close();
                // }
            });
        },
        showAirplume: function () {     //在当前显示区域内绘制风羽
            if (!airPlume.layer) {
                return;
            }

            var zoom = meteo.c.map.getZoom();
            // airPlume.getAirPlumeLevel(zoom);
            var interval = zoom < 3 ? 8 :
                zoom < 4 ? 6 :
                    zoom < 5 ? 4 :
                        zoom < 6 ? 2 : 1;
            // var se = airPlume.getBounds();
            var se = meteo.c.map.getBounds();

            var layerId = meteo.c.map.createLayer();
            var layer = map2DViewer.groups[layerId];

            //------------------------------
            //计算当前屏幕内显示的风羽索引

            // var istart = se[0] - airPlume.slat / airPlume.delta >> 0;
            var istart = (airPlume.elat - se[2]) / airPlume.delta >> 0;
            var jstart = (se[1] - airPlume.slng) / airPlume.delta >> 0;
            if (istart < 0) istart = 0;
            if (jstart < 0) jstart = 0;

            var row = Math.abs(se[0] - airPlume.elat) / airPlume.delta + 1;
            var col = Math.abs(se[3] - airPlume.slng) / airPlume.delta + 1;
            if (row > airPlume.rowNum) row = airPlume.rowNum;
            if (col > airPlume.colNum) col = airPlume.colNum;

            for (var i = istart; i < row; i += interval) {
                for (var j = jstart; j < col; j += interval) {
                    var lng = airPlume.slng + j * airPlume.delta;
                    var lat = airPlume.elat - i * airPlume.delta;
                    var ws = airPlume.ws[i][j]
                    var wd = airPlume.wd[i][j]
                    var icon = airPlume.getIcon(ws, wd, 30);
                    L.marker([lat, lng], {icon: icon}).addTo(layer);
                }
            }
            if (!airPlume.layer || !airPlume.layer.tLayer || airPlume.isHide) {
                meteo.c.map.removeLayer(layerId);
                return;
            }
            if (airPlume.layer.cLayer != null) {
                meteo.c.map.removeLayer(airPlume.layer.cLayer);
            }
            airPlume.layer.cLayer = layerId;

            if (airPlume.timeOutId) airPlume.timeOutId = null;

        },
        getIcon: function (ws, 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);
                // var as = getWindImageX(ws);
                // var bs = getWindImageY(ws, false);
                ctx.drawImage(airPlume.image, airPlume.getWindImageX(ws), airPlume.getWindImageY(ws, false), 15, 31,
                    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;
        },
        getWindImageX: function (ws) {
            var index = ws > 72 ? 72 : ws;//最大72
            index = index < 0 ? 0 : index; //最小为0，同时0与1为同一张图片
            if (index < 3) {  //当ws为1（包括0），取第0张图片  ws为2时，取第一张
                index = index >= 2 ? 1 : 0;
            } else {
                index = ((index + 1) / 2) >> 0;// 3和4为风速4,即第三张,则取角标2  依次类推
            }
            index = index % 10;
            return index * 16;
        },
        getWindImageY: function (ws, isGray) {
            var index = ws > 72 ? 72 : ws; //最大72
            index = index < 0 ? 0 : index;  //最小为0，同时0与1为同一张图片
            if (ws < 3) {  //当ws为1（包括0），取第0张图片  ws为2时，取第一张
                index = ws >= 2 ? 1 : 0;
            } else {
                index = ((ws + 1) / 2) >> 0;// 3和4为风速4,即第三张,则取角标2  依次类推
            }
            index = (index / 10) >> 0;
            if (isGray) {
                return index * 32 + 128;
            }
            return index * 32;
        },
        getAirPlumeLevel: function (zoom) {     //根据地图缩放等级获取风羽疏密等级
            // var zoom = map2DViewer.map.getZoom();
            airPlume.interval = zoom < 3 ? 18 :
                zoom < 4 ? 12 :
                    zoom < 5 ? 6 :
                        zoom < 6 ? 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 () {
            airPlume.layer = {
                tLayer: meteo.c.map.createLayer(),
                cLayer: null,
            }
        },
        remove: function () {
            if (airPlume.layer) {
                meteo.c.map.removeLayer(airPlume.layer.tLayer);
                meteo.c.map.removeLayer(airPlume.layer.cLayer);
                airPlume.layer = null;
            }
        },
        show: function () {
            airPlume.isHide = false
            airPlume.showAirplume();
        },
        hide: function () {
            airPlume.isHide = true;
            if (airPlume.layer) {
                meteo.c.map.removeLayer(airPlume.layer.cLayer);
                airPlume.layer.cLayer = null;
            }
        },
        open: function () {
            if(ONEMAP.M.myLayers.checkLength() >= map23DConfig.layerMaxLength) {
                ONEMAP.C.publisher.publish({ type: 'warning', message: '图层数量已达上限' }, 'noteBar::add');
                return;
            }
            //-------------创建图层------------------
            if (airPlume.layer) {
                airPlume.close();
            }
            airPlume.create();
            //----------------图层管理-------------------
            var options = {
                action: "add",
                // mod: "qixiang",
                DOM: {
                    guid: airPlume.layer.tLayer,
                    type: "group",
                    name: airPlume.title,
                },
            }

            var guid = ONEMAP.M.myLayers.myLayerControl(options);
            ONEMAP.C.publisher.subscribe(function (option) {
                switch (option.action) {
                    case 'remove':
                        airPlume.close();
                        break;
                    case 'opacity':
                        if (option.options.opacity) {
                            airPlume.show();
                        } else {
                            airPlume.hide();
                        }
                        break;
                }
            }, guid);
            //------------------勾选选择框及添加标题-------------------
            airPlume.buttons[airPlume.level].parent().addClass('current');
            meteo.c.title.addTitle(airPlume.id);
            meteo.c.time.open();

            //----------------------获取数据----------------------------
            airPlume.getData();
            //-----------------第一次开启功能时添加动态绘制--------------------
            // if (airPlume.isInit) return;
            // airPlume.isInit = true;
            // map2DViewer.map.on("moveend", function (e) {
            //     if (airPlume.layer && airPlume.layer.cLayer) {
            //         if (airPlume.timeOutId) { //如果有未开始的风羽绘制，就取消对应任务
            //             window.clearTimeout(airPlume.timeOutId);
            //         }
            //         airPlume.timeOutId = window.setTimeout(function () {
            //             airPlume.showAirplume();
            //         }, 800)
            //     }
            // });
        },
        close: function () {    //关闭功能调用
            var options = {
                action: "remove",
                DOMid: airPlume.layer.tLayer,
            }
            ONEMAP.M.myLayers.myLayerControl(options);

            airPlume.buttons[airPlume.level].parent().removeClass('current');
            meteo.c.title.removeTitle(airPlume.id);
            meteo.c.time.close();

            airPlume.level = null;
            airPlume.remove();
        },
        onMove: function () { //移动地图时触发，控制当前是否需要重新绘制
            if (airPlume.layer && !airPlume.isHide && meteo.c.map.mapType == '2d') {
                if (airPlume.timeOutId) { //如果有未开始的风羽绘制，就取消对应任务
                    window.clearTimeout(airPlume.timeOutId);
                }
                airPlume.timeOutId = window.setTimeout(function () {
                    airPlume.showAirplume();
                }, 800)
            }
        },
        update: function () { //用于时间变化时更新数据
            if (!airPlume.layer || airPlume.isHide) return;
            // var option = {
            //     action: 'update',
            //     DOMid: airPlume.layer.tLayer,
            //     DOM: {
            //         name: '风羽' + meteo.c.time.getTimeOnTitle()
            //     }
            // }
            // ONEMAP.M.myLayers.myLayerControl(option);

            airPlume.getData()
        },
        updateLevel: function () {
            airPlume.buttons[airPlume.level].parent().siblings().removeClass('current');
            airPlume.buttons[airPlume.level].parent().addClass('current');
            airPlume.getData();
        },
        click: function (level) {
            if (airPlume.level && level != airPlume.level) {
                airPlume.level = level;
                airPlume.updateLevel();
            } else {
                airPlume.level = level;
                if (airPlume.layer) {
                    airPlume.close();
                } else {
                    airPlume.open();
                }
            }
        },
        init: function () {
            airPlume.image = new Image();
            airPlume.image.src = meteo.c.http.myImageUrlJs + "windy.png";
            var buttons = $('.meteo-button-799');
            airPlume.buttons['9999'] = buttons.eq(16);
            airPlume.buttons['0925'] = buttons.eq(17);
            airPlume.buttons['0850'] = buttons.eq(18);
            airPlume.buttons['0700'] = buttons.eq(19);
            airPlume.buttons['0500'] = buttons.eq(20);
        }
    }

    meteo.f.air = airPlume;
    return meteo.f.air;

})