TDataView_ui/scripts/meteo/f/ship.js

//船舶报数据
define([], function () {
    var ship = {
        id: 'ship',
        title: '船舶报',

        popupTo2d: null,

        isInit: false,
        layer: null,
        data: null,
        markerData: {},
        isLoad: false,
        isClose: false,
        isHide: false,

        getData: function () {
            meteo.c.http.httpFunction(meteo.c.http.ship, null, null, function (json) {
                ship.data = json;
                ship.showMarker();
            }, function () {
                ship.isLoad = false;
                ONEMAP.C.publisher.publish({ type: 'warning', message: '船舶报暂无数据' }, 'noteBar::add');
            })
        },
        showMarker: function () {
            var layerId = meteo.c.map.createLayer();    //新建图层展示marker
            ship.markerData = {};          //初始化数据存储对象
            var json = ship.data;

            var latlngs = meteo.c.map.getBounds();
            var zoom = meteo.c.map.getZoom();
            var level = ship.getLevel(zoom);
            for (var i = 0; i < json.length; i += level) {
                if (zoom < 4) break;
                if (json[i].lat < latlngs[0] || json[i].lat > latlngs[2]
                    || json[i].lng < latlngs[1] || json[i].lng > latlngs[3]) {
                    continue;
                }

                if (json[i].lat && json[i].lng && (json[i].wth == 0 || json[i].wth) && json[i].wth < 99) { //有经纬度和天气状态
                    var url = json[i].wth < 10 ? "0" + json[i].wth : json[i].wth;
                    url = meteo.c.http.markerUrl + "weatherImage/cww" + url + ".png";
                    var content = null;
                    var markerId = meteo.c.map.addMarker("", url, 26, 0, content, json[i].lat, json[i].lng, layerId);
                    map23DData.markers[markerId].station = json[i].station;
                    ship.markerData[markerId] = json[i].station; //根据merkerId记录marker所对应数据

                    //添加点击事件    2D
                    var marker = map2DViewer.markers[markerId];
                    marker.on('click', function (e) {
                        ship.showPopup(e);
                    });
                }
            }
            //判断是否有重复图层，有则替换
            if (!ship.layer || !ship.layer.tLayer || ship.isHide) {
                meteo.c.map.removeLayer(layerId);
            }
            if (ship.layer.cLayer) {
                meteo.c.map.removeLayer(ship.layer.cLayer);
            }
            ship.layer.cLayer = layerId;
            ship.isLoad = false;
        },
        getLevel: function (zoom) {     //根据地图缩放等级获取风羽疏密等级
            var level = zoom < 3 ? 5 :
                zoom < 5 ? 3 :
                    zoom < 6 ? 2 : 1;
            return level;
        },
        getPopup : function () {

        },
        showPopup: function (e) {    //固定位置弹窗
            var station = ship.markerData[e.target.guid];
            if (station) {
                meteo.c.http.httpFunction(meteo.c.http.shipInfo, station, null, function (json) {
                    var content = "<div class='popup_html'>"
                        + "<div class='popup-lt'></div>"
                        + "<div class='popup-lb'></div>"
                        + "<div class='popup-rt'></div>"
                        + "<div class='popup-rb'></div>"
                        + "<div class='popup-ct'>"
                        + "<div class='meteo-menu-top meteo-menu-top-airport'>"
                        + "<h3 class='meteo-title meteo-title-airport'>" + station + "</h3>"
                        + "</div>"
                        + "</div>"
                        + "<div class='popup-cb' style='padding-bottom:20px;'>"
                        + "<div class='meteo-popup-airport-warp content_scroll'>"
                        + "<ul class='meteo-popup-airportUl'>"
                        + "<li><h4 class='meteo-popup-airpory-h4'>----天气实况----</h4></li>"
                        // + "<li class='meteo-popup-airport-li'><span>观测时间：</span><span>" + meteo.c.process.setDate(json.ldate, "") + "</span></li>"
                        + "<li class='meteo-popup-airport-li'><span>观测时间：</span><span>" + meteo.c.process.setData(json.ldate, "") + "</span></li>"
                        + "<li class='meteo-popup-airport-li'><span>天气现象：</span><span>" + meteo.c.process.setWth(json.wth) + "</span></li>"
                        + "<li class='meteo-popup-airport-li'><span>气温：</span><span>" + meteo.c.process.setTt(json.tt) + "</span></li>"
                        + "<li class='meteo-popup-airport-li'><span>气压：</span><span>" + meteo.c.process.setPr(json.pr) + "</span></li>"
                        + "<li class='meteo-popup-airport-li'><span>能见度：</span><span>" + meteo.c.process.setVis(json.vis) + "</span></li>"
                        + "<li class='meteo-popup-airport-li'><span>云：</span><span>" + "--" + "</span></li>"
                        + "<li class='meteo-popup-airport-li'><span>风：</span><span>" + meteo.c.process.setWd(json.wd) + " " +
                        meteo.c.process.setWs(json.ws) + "</span></li>"
                        + "</ul>"
                        + "</div>";
                        + "</div>";

                    ship.popupTo2d = L.popup().setLatLng(e.latlng)
                        .setContent(content)
                        .openOn(map2DViewer.map)
                })
            }
        },
        showPopup3d: function (options) {    //固定位置弹窗
            var marker = map23DData.markers[options.feature.name];
            var station = marker.station;
            if (station) {
                meteo.c.http.httpFunction(meteo.c.http.shipInfo, station, null, function (json) {
                    var content = "<div class='popup_html TD'>"
                        + "<div class='popup-lt'></div>"
                        + "<div class='popup-lb'></div>"
                        + "<div class='popup-rt'></div>"
                        + "<div class='popup-rb'></div>"
                        + "<div class='popup-ct'>"
                        + "<div class='meteo-menu-top meteo-menu-top-airport'>"
                        + "<h3 class='meteo-title meteo-title-airport'>" + station + "</h3>"
                        + "</div>"
                        + "</div>"
                        + "<div class='popup-cb' style='padding-bottom:20px;'>"
                        + "<div class='meteo-popup-airport-warp content_scroll'>"
                        + "<ul class='meteo-popup-airportUl'>"
                        + "<li><h4 class='meteo-popup-airpory-h4'>----天气实况----</h4></li>"
                        // + "<li class='meteo-popup-airport-li'><span>观测时间：</span><span>" + meteo.c.process.setDate(json.ldate, "") + "</span></li>"
                        + "<li class='meteo-popup-airport-li'><span>观测时间：</span><span>" + meteo.c.process.setData(json.ldate, "") + "</span></li>"
                        + "<li class='meteo-popup-airport-li'><span>天气现象：</span><span>" + meteo.c.process.setWth(json.wth) + "</span></li>"
                        + "<li class='meteo-popup-airport-li'><span>气温：</span><span>" + meteo.c.process.setTt(json.tt) + "</span></li>"
                        + "<li class='meteo-popup-airport-li'><span>气压：</span><span>" + meteo.c.process.setPr(json.pr) + "</span></li>"
                        + "<li class='meteo-popup-airport-li'><span>能见度：</span><span>" + meteo.c.process.setVis(json.vis) + "</span></li>"
                        + "<li class='meteo-popup-airport-li'><span>云：</span><span>" + "--" + "</span></li>"
                        + "<li class='meteo-popup-airport-li'><span>风：</span><span>" + meteo.c.process.setWd(json.wd) + " " +
                        meteo.c.process.setWs(json.ws) + "</span></li>"
                        + "</ul>"
                        + "</div>";
                    + "</div>";

                    map3DViewer.showPopup({
                        x: options.evt.X,
                        y: options.evt.Y,
                        width: 150,//容器宽
                        height: 200,//容器高
                        content: content //冒泡窗内容
                    })
                })
            }
        },
        create: function () {
            ship.layer = {
                tLayer: meteo.c.map.createLayer(),
                cLayer: null,
            }
        },
        remove: function () {
            if (ship.layer) {
                meteo.c.map.removeLayer(ship.layer.tLayer);
                meteo.c.map.removeLayer(ship.layer.cLayer);
                ship.layer = null;
            }
        },
        show: function () {
            ship.isHide = false;
            ship.showMarker();
        },
        hide: function () {
            ship.isHide = true;
            if (ship.layer) {
                meteo.c.map.removeLayer(ship.layer.cLayer);
                ship.layer.cLayer = null;
                if (ship.popupTo2d) {       //2d弹窗存在时关闭
                    ship.popupTo2d.remove();
                }
            }
        },
        open: function () {
            if(ONEMAP.M.myLayers.checkLength() >= map23DConfig.layerMaxLength) {
                ONEMAP.C.publisher.publish({ type: 'warning', message: '图层数量已达上限' }, 'noteBar::add');
                return;
            }
            // ship.isLoad = true;
            ship.isClose = false;
            ship.isHide = false;
            //----------------地图缩放等级小于4时提高到4(暂时使用系列)----------------------
            if (meteo.c.map.getZoom() < 4) {
                if(map23DData.display.map2D){
                    map2DViewer.setView({
                        zoom: 4
                    })
                }else{
                    map3DViewer.setView({
                        distance: 5000000
                    })
                }
            }
            //-------------创建图层------------------
            if (ship.layer) {
                ship.remove();
            }
            ship.create();
            //----------------图层管理-------------------
            var options = {
                action: "add",
                // mod: "qixiang",
                DOM: {
                    guid: ship.layer.tLayer,
                    type: "group",
                    name: '船舶报',
                },
            }

            var guid = ONEMAP.M.myLayers.myLayerControl(options);
            ONEMAP.C.publisher.subscribe(function (option) {
                switch (option.action) {
                    case 'remove':
                        if (ship.isLoad) {
                            ship.isClose = true;
                            return;
                        }
                        ship.close();
                        break;
                    case 'opacity':
                        if (ship.isLoad) {
                            if (option.options.opacity) {
                                ship.isHide = false;
                            } else {
                                ship.isHide = true;
                            }
                            return;
                        }
                        if (option.options.opacity) {
                            ship.show();
                        } else {
                            ship.hide();
                        }
                        break;
                }
            }, guid);
            //-------------------------------------

            $("#meteo-bt-ship").parent().addClass('current');
            ship.getData();

            if (ship.isInit) return;
            ship.isInit = true;

            //添加3D地图marker点击事件监听
            // PubSub.subscribe('map3D.featureClick', function (msg, option) {
            //     ship.showPopup(option.feature.name);
            // })

            //地图移动/缩放监听
            map2DViewer.map.on("moveend", function (e) {
                if (ship.layer && ship.layer.cLayer) {
                    ship.showMarker();
                }
            });
        },
        close: function () {
            var options = {
                action: "remove",
                DOMid: ship.layer.tLayer,
            }
            ONEMAP.M.myLayers.myLayerControl(options);

            if (ship.popupTo2d) {       //2d弹窗存在时关闭
                ship.popupTo2d.remove();
            }

            $("#meteo-bt-ship").parent().removeClass('current');
            ship.remove();
        },
        update: function () { //用于时间变化时更新数据
            // ship.getData()
        },

        init: function () {
            $("#meteo-bt-ship").click(function () {
                if (ship.isLoad) return;
                if (ship.layer) {
                    ship.close();
                } else {
                    ship.open();
                }
            });

            //添加3D地图marker点击事件监听
            PubSub.subscribe('map3D.featureClick', function (msg, option) {
                ship.showPopup3d(option);
            })
        }
    }

    meteo.f.ship = ship;
    return meteo.f.ship;
})