TDataView_ui/scripts/mod/menu/tianditu.js

/**
 * [ONEMAP.M.projectController]
 * @return {[object]}
 */
define(function(tplLayout) {

    /**
     * 初始化并订阅事件
     * @return {[type]} [description]
     */
    /**
     * 模块数据 用于数据存储和外部调用
     * @type {Object}
     * 数据存放
     */
    var modValue = {
        
    }

    /**
     * 状态值
     * @type {Boolean}
     * @default false
     * @private
     */
    var status = {
        initialized: false,
        isShowChild: false,
        connect: false,
        webSocketState: false,
        tdmapContent: false
    };
    function init() {
        if (!status.initialized) {
            subscribe();
            bindEvent();
            status.initialized = true;
            status.tdmapContent = true;
            // $("#TDMap").parent().find(".menu-content").show();
            
        }  

        setDixingList();
        if(status.tdmapContent){
            $("#menu .tdmapContent").addClass("active");
            $(this).addClass("active");
            status.tdmapContent = false;
        }
        else{
            $("#menu .tdmapContent").removeClass("active");
            $(this).removeClass("active");
            status.tdmapContent = true;
        }

        ONEMAP.C.publisher.publish({
            modName: 'TDMap'
        }, 'menuListClick');
    }

    function bindEvent(){

        $(".zhuanTi").unbind('click').bind('click',function(){
            setDixingList();
            if(status.tdmapContent){
                $("#menu .tdmapContent").addClass("active");
                $(this).addClass("active");
                status.tdmapContent = false;
            }
            else{
                $("#menu .tdmapContent").removeClass("active");
                $(this).removeClass("active");
                status.tdmapContent = true;
            }
            console.log(ONEMAP.D.globalSettingData);
            console.log(ONEMAP.D.globalSettingData.map2DThematicSetting);
            var secData = ONEMAP.D.globalSettingData.map2DThematicSetting;
            var secLength = ONEMAP.D.globalSettingData.map2DThematicSetting.length;
            // console.log(secLength);
            var ul = $('<ul class="im-3"></ul>');
            for(var i=0;i<secLength;i++){
                var secDlist = '<li class="p3 clearfix">'+secData[i].name+'</li>';
                ul.append(secDlist);
            }
            var data = ul.html();
            $(".zhuanTi").parent().addClass("active");
            $(".zhuanTi").parent().find(".im-3").html(data);
        }) 
    }

    //添加地形图组
    function setDixingList() {
        $(".tdmapContent").html("");
        var zt = $(".tdmapContent");
        var category = ONEMAP.D.globalSettingData.map2DThematicCategory;
        for (var i = 0; i < category.length; i++) {
            if(category[i] == "天地图"){
                 var liHtml = $('<section class="item"><div class="sectionbg"><span class="translate">' + category[i] + '</span></div></section>')
            var linkcontent = $('<ul class="linkContent" style="display:none"></ul>');
            $(ONEMAP.D.globalSettingData.map2DThematicSetting).each(function(index, el) {
                
                if(el.category===category[i] && el.category=="天地图"){
                    var thematicLink = $('<li class="item thematic-layer-link"><div class="linkLibg"></div><input type="checkbox" class="zt-cbx"/><span class="translate">' + el.name + '</span></li>');
                    thematicLink.find("input").bind('change', el, function(e) {
                        if (!$(this).is(":checked")) {
                            
                            $(this).removeClass('selected');
                            if(ONEMAP.M.toolWeatherMap){
                                ONEMAP.M.toolWeatherMap.remove();
                            }

                            // 从我的图层中移除
                            var guid = $(this).attr("layer");
                            // console.log(guid);
                            var options = {
                                action: "remove",
                                DOMid: guid
                            }
                            ONEMAP.M.myLayers.myLayerControl(options);    // 移除数据层
                            removeCurrentOverLayerGai(guid);
                        } else {
                            // console.log(el);
                            // console.log(el.type);
                            // console.log(e.data.type);

                            ONEMAP.C.publisher.publish('2D', 'layout::mapStyle');

                            if(el.type == "otherOrigin"){
                                el.guid = map23DControl.buildGuid("zhuanTi");
                            }
                            



                            if(ONEMAP.M.toolWeatherMap){
                                ONEMAP.M.toolWeatherMap.remove();
                            }
                            // removeCurrentOverLayer();
                            if(e.data.type === "weatherMap"){
                                //获取云图图集列表数据
                                var weatherData;
                                $.ajax({
                                    type:'get',
                                    dataType: 'jsonp',
                                    url: el.productUrl+'/production/product_category?production_id='+el.guid,
                                    beforeSend: ONEMAP.V.loading.load(),
                                    success: function(data) {
                                        weatherData = data;
                                        //添加云图控件
                                        addWeatherControl(weatherData,e.data);
                                    },
                                    error: function(data) {
                                        //console.log("有点小失败");
                                    },
                                    completer: ONEMAP.V.loading.loaded()
                                })
                                $('#userThematicList .selected').removeClass('selected');
                                $(this).addClass('selected');
                            }else if(e.data.type === "thematicOrigin"){
                                // console.log("thema");
                                
// 专题一张图（中国地图、海图）
                                url2D = e.data.url + '/' + e.data.guid + '?l={z}&x={x}&y={y}';
                                url3D = e.data.url + '/' + e.data.guid + '?z=%d&x=%d&y=%d';
                                modValue.currentOverLayerGuid = map23DControl.tileLayer({
                                    action: 'add',
                                    layer: {
                                        url2D: url2D,
                                        url3D: url3D,
                                        imageType: 'png',
                                        name:e.data.name,
                                        minZoom:e.data.min_zoom||1,
                                        maxZoom:e.data.max_zoom||19,
                                        guid:e.data.guid
                                    }
                                })


                                // 添加到我的图层
                                var options = {
                                    action: "add",
                                    DOM:{
                                        guid: modValue.currentOverLayerGuid,
                                        type: el.type,
                                        name: el.name,
                                    },
                                    mod: el.type
                                }
                                $(this).attr("layer",options.DOM.guid);
                                $(this).attr("class","zt-cbx " + options.DOM.guid);
                                modValue.DOMid = ONEMAP.M.myLayers.myLayerControl(options);  // 添加信息到“我的图层”
                                ONEMAP.C.publisher.subscribe(layerAction, options.DOM.guid);


//S 优化                                
                                //添加图层透明度控件
                                // overLayerOpacityControl = new L.Control.LayerOpacity(
                                //     map2DViewer.layers[modValue.currentOverLayerGuid], {
                                //         showFavBtn: false,
                                //         closeCallback: function() {
                                //             removeCurrentOverLayer();
                                //             $('#userThematicList .selected').removeClass('selected');
                                //         }
                                //     }
                                // ).addTo(map2DViewer.map);
                                thematicControl(
                                    map2DViewer.layers[modValue.currentOverLayerGuid], {
                                        data: e.data,
                                        showFavBtn: false,
                                        closeCallback: function() {
                                            removeCurrentOverLayer();
                                            $('#userThematicList .selected').removeClass('selected');
                                        }
                                    })
                                ONEMAP.D.overLayerCount++;

                                map2DViewer.map.setZoomScope(e.data['min_zoom'], e.data['max_zoom']);

                                map23DControl.setView({
                                    center: {
                                        lat: e.data['center'].lat,
                                        lng: e.data['center'].lng
                                    },
                                    zoom: e.data['zoom'],
                                    tilt: 0
                                })

                                $('#userThematicList .selected').removeClass('selected');
                                $(this).addClass('selected');
//E 优化


                            }else if(e.data.type === "vectorOrigin"){
                                var cartodbF = new cartodbParseF();
                                
                                cartodbF.getVizInfo({
                                    vizUrl:e.data['url']
                                },function(tileData){
                                    var tdTileLayerUrl = tileData['templateUrl'].replace('{z}/{x}/{y}', '%d/%d/%d');

                                    modValue.currentOverLayerGuid = map23DControl.tileLayer({
                                            action: 'add',
                                            layer: {
                                                url2D: tileData['templateUrl'],
                                                url3D: tdTileLayerUrl,
                                                imageType: 'png',
                                                name:e.data.name,
                                                minZoom:e.data.min_zoom||1,
                                                maxZoom:e.data.max_zoom||19
                                            }
                                        })
                                    map2DViewer.layers[modValue.currentOverLayerGuid]['utfgrids'] = [];

                                    //添加utfgrid
                                    _.each(tileData.utfgridUrl,function(el,index) {
                                        var aGridLayer = new L.UtfGrid(el+'?callback={cb}');
                                        map2DViewer.layers[modValue.currentOverLayerGuid]['utfgrids'].push(aGridLayer);
                                        aGridLayer.layerNum=index;
                                        aGridLayer.on('click', function (e) {
                                            L.DomEvent.stopPropagation(e);
                                            if(e.data){
                                                var layerNum = e.target._map._layers[e.target._leaflet_id].layerNum;
                                                $.ajax({
                                                    url: tileData.serverApiUrl+'/v1/map/'+tileData.layergroupid+'/'+layerNum+'/attributes/'+e.data.cartodb_id,
                                                    type: 'GET',
                                                    dataType: 'jsonp'
                                                })
                                                .done(function(data) {
                                                    if(data){
                                                        var popupContent = $('<div></div>');
                                                        _.each(data,function(pel,pindex) {
                                                            popupContent.append('<div><strong>'+pindex+'</strong>:'+pel+'</div>')
                                                        });
                                                        var popup = L.popup()
                                                            .setLatLng(e.latlng)
                                                            .setContent(popupContent.get(0))
                                                            .openOn(map2DViewer.map);
                                                    }

                                                }); 
                                            }                             
                                        });
                                        aGridLayer.addTo(map2DViewer.map);
                                    });
                                    

//S 优化                                
                                //添加图层透明度控件
                                overLayerOpacityControl = new L.Control.LayerOpacity(
                                    map2DViewer.layers[modValue.currentOverLayerGuid], {
                                        showFavBtn: false,
                                        closeCallback: function() {
                                            if(map2DViewer.layers[modValue.currentOverLayerGuid]['utfgrids'].length>0){
                                                _.each(map2DViewer.layers[modValue.currentOverLayerGuid]['utfgrids'],function(lel) {
                                                    map2DViewer.map.removeLayer(lel);
                                                });
                                            }
                                            removeCurrentOverLayer();
                                            $('#userThematicList .selected').removeClass('selected');
                                        }
                                    }
                                ).addTo(map2DViewer.map);
                                thematicControl(
                                    map2DViewer.layers[modValue.currentOverLayerGuid], {
                                        data: e.data,
                                        showFavBtn: false,
                                        closeCallback: function() {
                                            removeCurrentOverLayer();
                                            $('#userThematicList .selected').removeClass('selected');
                                        }
                                    })
                                ONEMAP.D.overLayerCount++;

                                map2DViewer.map.setZoomScope(e.data['min_zoom'], e.data['max_zoom']);

                                map23DControl.setView({
                                    center: {
                                        lat: e.data['center'].lat,
                                        lng: e.data['center'].lng
                                    },
                                    zoom: e.data['zoom'],
                                    tilt: 0
                                })

                                $('#userThematicList .selected').removeClass('selected');
                                $(this).addClass('selected');
//E 优化




                                });
// 天地图
                            }else{
                                // console.log("other 天地图");
                                var tdTileLayerUrl = e.data['url'].replace('?x={x}&y={y}&z={z}', '?z=%d&x=%d&y=%d');
                                tdTileLayerUrl = tdTileLayerUrl.replace('?z={z}&x={x}&y={y}', '?z=%d&x=%d&y=%d');
                                tdTileLayerUrl = tdTileLayerUrl.replace('{z}/{y}/{x}', '%d/%d/%d');

                                modValue.currentOverLayerGuid = map23DControl.tileLayer({
                                    action: 'add',
                                    layer: {
                                        url2D: e.data['url'],
                                        url3D: tdTileLayerUrl,
                                        imageType: 'png',
                                        name:e.data.name,
                                        minZoom:e.data.min_zoom||1,
                                        maxZoom:e.data.max_zoom||19
                                    }
                                })

                                // 添加到我的图层
                                var options = {
                                    action: "add",
                                    DOM:{
                                        guid: modValue.currentOverLayerGuid,
                                        type: el.type,
                                        name: el.name,
                                    },
                                    mod: el.type
                                }
                                $(this).attr("layer",options.DOM.guid);
                                $(this).attr("class","zt-cbx " + options.DOM.guid);
                                modValue.DOMid = ONEMAP.M.myLayers.myLayerControl(options);  // 添加信息到“我的图层”
                                ONEMAP.C.publisher.subscribe(layerAction, options.DOM.guid);


//S 优化                                
                                //添加图层透明度控件
                                // overLayerOpacityControl = new L.Control.LayerOpacity(
                                //     map2DViewer.layers[modValue.currentOverLayerGuid], {
                                //         showFavBtn: false,
                                //         closeCallback: function() {
                                //             removeCurrentOverLayer();
                                //             $('#userThematicList .selected').removeClass('selected');
                                //         }
                                //     }
                                // ).addTo(map2DViewer.map);
                                thematicControl(
                                    map2DViewer.layers[modValue.currentOverLayerGuid], {
                                        data: e.data,
                                        showFavBtn: false,
                                        closeCallback: function() {
                                            removeCurrentOverLayer();
                                            $('#userThematicList .selected').removeClass('selected');
                                        }
                                    })
                                ONEMAP.D.overLayerCount++;

                                map2DViewer.map.setZoomScope(e.data['min_zoom'], e.data['max_zoom']);

                                map23DControl.setView({
                                    center: {
                                        lat: e.data['center'].lat,
                                        lng: e.data['center'].lng
                                    },
                                    zoom: e.data['zoom'],
                                    tilt: 0
                                })

                                $('#userThematicList .selected').removeClass('selected');
                                $(this).addClass('selected');
//E 优化




                            }
                            
                        }
                    });
                    thematicLink.appendTo(linkcontent);
                }
                
            });
            
            liHtml.find('.sectionbg').bind('click',function(){
                $(this).parent().find('.linkContent').toggle();
                if($(this).hasClass('open')){
                    $(this).removeClass('open');
                }else{
                    $(this).addClass('open');
                    $(this).parent().siblings().find('.linkContent').hide();
                    $(this).parent().siblings().find('.sectionbg').removeClass('open');
                }
            })
            linkcontent.appendTo(liHtml);
            // liHtml.appendTo($("#userThematicList"));
            liHtml.appendTo(zt);
        }
        }
        // zt.html($("#userThematicList").html());
        // $("#userThematicList section").eq(0).find('.linkContent').show();
        // $("#userThematicList section").eq(0).find('.sectionbg').addClass('open');
        //更新滚动条
        // $('#userThematic .ii-body').mCustomScrollbar('update');
    }

    //添加三维专题图控制条
    function thematicControl(layer, options) {
        modValue.thematicControlHtml = $("<div class='thematicControl'>" +
            "<iframe frameborder='0' class='cover-iframe'></iframe>" +
            "</div>");
        var cover_content = $("<div class='cover-content'></div>");
        cover_content.appendTo(modValue.thematicControlHtml);
        if (options.showFavBtn || !options.onlyShow) {
            var optionsWrap = $("<div class='options-wrap'></div>");
            optionsWrap.appendTo(cover_content);
        }
        $("<div class='thematicName'>名称：" + options.data.name + "</div>").appendTo(cover_content);
        if (options.atlas) {
            var atlasHtml = $("<a class='info_Btntd'>详情</a>");
            atlasHtml.appendTo(optionsWrap);
            atlasHtml.bind('click', function() {

            });
        }
        if (options.showFavBtn) {
            var favBtnHtml = $("<a class='fav_abtntd'>收藏</a>");
            favBtnHtml.appendTo(optionsWrap);
            favBtnHtml.bind('click', function() {

            });
        }
        if (!options.onlyShow) {
            var closeBtnHtml = $("<a class='close_abtntd'>关闭</a>");
            closeBtnHtml.appendTo(optionsWrap);
            closeBtnHtml.bind('click', function() {
                options.closeCallback();
                modValue.thematicControlHtml.remove();
            })
        }
        modValue.thematicControlHtml.appendTo($('#thematicControlContent'));
    };
    function removeCurrentOverLayer() {
        if (modValue.currentOverLayerGuid) {
            modValue.thematicControlHtml.remove();
            map23DControl.tileLayer({
                action: 'remove',
                guid: modValue.currentOverLayerGuid
            })
            modValue.currentOverLayerGuid = null;
            // map2DViewer.map.removeControl(overLayerOpacityControl);
            overLayerOpacityControl = null;
        }

        ONEMAP.D.overLayerCount--;
        if (ONEMAP.D.overLayerCount == 0) {
            map2DViewer.map.setZoomScope(1, 19);
        }
    }
    function removeCurrentOverLayerGai(guid) {
        if (guid) {
            modValue.thematicControlHtml.remove();
            map23DControl.tileLayer({
                action: 'remove',
                guid: guid
            })
            guid = null;
            // map2DViewer.map.removeControl(overLayerOpacityControl);
            overLayerOpacityControl = null;
        }

        ONEMAP.D.overLayerCount--;
        if (ONEMAP.D.overLayerCount == 0) {
            map2DViewer.map.setZoomScope(1, 19);
        }
    }

    /**
     * 设置界面
     */
    function setLayout() {

    }

    /**
     * 界面重置
     * @return {[type]} [description]
     */
    function layoutResize(options) {
        if (options.modName != "TDMap") {
            remove();
        } else {
            if (status.isShowChild) {
                remove();
                $("#menu #TDMap").removeClass('active');
            } else {
                $("#menu #TDMap").addClass('active');
                status.isShowChild = true;
            }
        }
    }

    /**
     * 模块移除
     * @return {[type]} [description]
     */
    function remove() {
        //取消订阅
        unSubscribe();

        $("#menu #TDMap").removeClass('active');
        status.isShowChild = false;
    }

    /**
     * 注册订阅
     * @type {Function}
     * 推送：ONEMAP.C.publisher.publish(options,'moduleName::type');
     * 订阅：ONEMAP.C.publisher.subscribe(layoutResize,'sideBarLayoutChange');
     */
    function subscribe() {
        ONEMAP.C.publisher.subscribe(layoutResize, 'menuListClick');
        // ONEMAP.C.publisher.subscribe(remove, 'cleanMap');
    }

    /**
     * 取消订阅
     * @type {Function}
     * 取消订阅：ONEMAP.C.publisher.unSubscribe(layoutResize,'sideBarLayoutChange');
     */
    function unSubscribe() {

    }

    // 监听图层操作动作
    function layerAction(options){
        // console.log(options);
        // console.log(modValue.ids);
        if(options.action == "remove"){
            // console.log("remove");
            removeLayer(options.guid);
        }
        else if(options.action == "opacity"){
            var opt = options.options.opacity;
            setOpacity(options.guid,opt);
        }
        else if(options.action == "up" || options.action == "down"){
            ONEMAP.M.myLayerActions.changeFloor();
        }
    }

    // 更改层级
    function changeFloor(){
        var li = $("#layerControlMenu .myLayers .mn-content li");
        var layer = $("#mapHolder #map2DWrap .leaflet-layer");
        var liLength = li.length;
        var zidArr = new Array();
        for(var i=0;i<liLength;i++){
            zidArr.push(li.eq(i).attr("zid"));
            for(var j=0;j<layer.length;j++){
                if(layer.eq(j).attr("zid") == zidArr[i]){
                    layer.eq(j).css("z-index",layer.length-i);
                }
            }
        }
    }

    // 设置透明度
    function setOpacity(zid,opt){
        map23DControl.tileLayer({
            action: 'update',
            guid: zid,
            layer: { 
                opacity: opt
            }
        })
    }

    // 检查我的图层是否为空
    function checkLayerNull(){
        // 我的图层暂无数据时
        if(typeof($("#layerControlMenu .myLayers .mn-content li").eq(0).html()) == "undefined"){
            $("#layerControlMenu .mn-content p.tip-none").show();
        }
        else{
            $("#layerControlMenu .mn-content p.tip-none").hide();
        }
    }

    // 添加图层
    function addLayer(data){
        $("#layerControlMenu .mn-content p.tip-none").hide();
        //添加到23D地图上
        modValue.currentOverLayerGuid = map23DControl.tileLayer({
            action: 'add',
            layer: {   
                url2D: onemapUrlConfig.thematicTileUrl + '/' + data.guid + '?l={z}&x={x}&y={y}',
                url3D: onemapUrlConfig.thematicTileFo3DUrl + '/' + data.guid + '?z=%d&x=%d&y=%d',
                minZoom: data['min_zoom'],
                maxZoom: data['max_zoom'],
                maxNativeZoom: data['max_zoom'],
                attribution: '',
                opacity: 1,
                imageType: 'png',
                name:data.name,
                guid:data.guid
            }
        }) 
        map23DControl.setView({
            center: {
                lat: data['center_lat'],
                lng: data['center_lon']
            },
            zoom: data['zoom']
        })
        map2DViewer.map.setZoomScope(data['min_zoom'],data['max_zoom']);
    }
    
    // 移除图层
    function removeLayer(data){
        if (data) {
            modValue.thematicControlHtml.remove();
            map23DControl.tileLayer({
                action: 'remove',
                guid: data
            })
            data = null;
            // map2DViewer.map.removeControl(overLayerOpacityControl);
            overLayerOpacityControl = null;
        }

        ONEMAP.D.overLayerCount--;
        if (ONEMAP.D.overLayerCount == 0) {
            map2DViewer.map.setZoomScope(1, 19);
        }
    }

    // 更改层级
    function changeFloor(){
        var li = $("#layerControlMenu .myLayers .mn-content li");
        var layer = $("#mapHolder #map2DWrap .leaflet-layer");
        var liLength = li.length;
        var zidArr = new Array();
        for(var i=0;i<liLength;i++){
            zidArr.push(li.eq(i).attr("zid"));
            for(var j=0;j<layer.length;j++){
                if(layer.eq(j).attr("zid") == zidArr[i]){
                    layer.eq(j).css("z-index",layer.length-i);
                }
            }
        }
    }

    return ONEMAP.M.tianditu = {
        init: init
    }
});