cesium之地图切换展示效果篇

本篇实现cesium地图切换展示功能，效果图如下：

实现思路如下：

 

1.配置不同类型地图服务：

MapConfig.mapInitParams = {
        extent: {//初始化范围
            xmin: 12445986.749812808,
            ymin: 2460330.5958780753,
            xmax: 12450572.971510038,
            ymax: 2462313.1812992743
        },
        spatialReference: {//地图空间参考坐标系
            wkid: 3857
        },
        /*备注说明:配置底图列表
         *type代表地图服务类型(0代表ArcGisMapServerImageryProvider;1代表createOpenStreetMapImageryProvider;
                         2代表WebMapTileServiceImageryProvider;3代表createTileMapServiceImageryProvider;
                         4 代表UrlTemplateImageryProvider;5 代表WebMapServiceImageryProviderr)
         *proxyUrl代理请求服务
         *iconUrl图标
         *name显示名称
         *Url地图Url
         */
         imageryViewModels:[
                           //{"id":0,"label":"广东影像",className:"imgType",type:5,proxyUrl:'',Url:'http://gisserver:18081/geoserver/gwc/service/wms',credit:'wms服务',layers: 'GD:GDImage',tilingScheme:new Cesium.WebMercatorTilingScheme()},
                           //{"id":1,"label":"广东海图",className:"vecType",type:5,proxyUrl:'',Url:'http://gisserver:18081/geoserver/gwc/service/wms',credit:'wms服务',layers: 'GD:SeaMap',tilingScheme:new Cesium.WebMercatorTilingScheme()},
                           {"id":0,"label":"广东影像",className:"imgType",type:0,proxyUrl:GLOBAL.domainRest+'/mapproxy/support',Url:'http://GISSERVER:6080/arcgis/rest/services/GDImage/MapServer'},
                           {"id":1,"label":"广东海图",className:"vecType",type:0,proxyUrl:GLOBAL.domainRest+'/mapproxy/support',Url:'http://GISSERVER:6080/arcgis/rest/services/SeaMap/MapServer'},
                           {"id":2,"label":"影像图",className:"imgType",type:0,proxyUrl:'',Url:'http://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer'},
                           {"id":3,"label":"街道图",className:"vecType",type:0,proxyUrl:'',Url:'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer'},
                           {"id":4,"label":"WMS",className:"imgType",type:5,proxyUrl:'',Url:'http://gisserver:18081/geoserver/gwc/service/wms',credit:'wms服务',layers: 'GD:GDImage',tilingScheme:new Cesium.WebMercatorTilingScheme()},
                           {"id":5,"label":"OSM",className:"vecType",type:1,proxyUrl:'',Url:'https://a.tile.openstreetmap.org/'},
                           {"id":6,"label":"天地街道",className:"vecType",type:2,proxyUrl:'',Url:'http://t{l}.tianditu.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles',layer: 'tdtVecBasicLayer',style: 'default',format: 'image/jpeg',tileMatrixSetID:'tdtMap'},
                           {"id":7,"label":"天地影像",className:"imgType",type:2,proxyUrl:'',Url:'http://t{l}.tianditu.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles',layer: 'tdtImgBasicLayer',style: 'default',format: 'image/jpeg',tileMatrixSetID:'tdtMap'},
        ],
        
}

2.初始化调用：

//底图切换
cesium.loadSwitcherMap(MapConfig.mapInitParams.imageryViewModels);

3.地图切换核心部分代码：

    /**
     * 地图切换控件
     */
    loadSwitcherMap:function(data){
        var T = this;
        //设置底图不同类型
        var baseLayerSwitcherToolbar = new BaseLayerSwitcherToolBar({
            data: data
        });
        //$("#"+this.mapDivId).append(baseLayerSwitcherToolbar.target);
        $(".cesium-viewer").append(baseLayerSwitcherToolbar.target);
        var curlayer = null;
        var labellayer = null;
        baseLayerSwitcherToolbar.onItemClick = function(itemData,index,element){
            var data = itemData;
            //清空指定ID的底图imageryLayers
            T.removeLayerByID("baseMap");
            switch (data.type) {
                case 2://天地图，矢量和注记分开
                    var layers = T.cesiumViewer.scene.imageryLayers;
                    curlayer = layers.addImageryProvider(T.returnProviderViewModel(MapConfig.mapInitParams.imageryViewModels[data.id]));
                    //天地图注记配置信息
                    var tdtLabel = {type:2,proxyUrl:'',Url:'http://t{l}.tianditu.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles',layer: 'tdtCiaBasicLayer',style: 'default',format: 'image/jpeg',tileMatrixSetID:'tdtMap'};
                    labellayer = layers.addImageryProvider(T.returnProviderViewModel(tdtLabel));
                    layers.lowerToBottom(labellayer);
                    layers.lowerToBottom(curlayer);
                    T.cesiumLayerList.push({layer:curlayer,id:"baseMap"});
                    T.cesiumLayerList.push({layer:labellayer,id:"baseMap"});
                    break;
                default:
                    var layers = T.cesiumViewer.scene.imageryLayers;
                    curlayer = layers.addImageryProvider(T.returnProviderViewModel(MapConfig.mapInitParams.imageryViewModels[data.id]));
                    layers.lowerToBottom(curlayer);
                    T.cesiumLayerList.push({layer:curlayer,id:"baseMap"});
                    break;
            }
        };
    },

    /**
     * 返回地图服务imageryProvider
     * @method returnProviderViewModel
     * @param  model 配置文件中的底图服务列表其中一个选项
     * @return imageryProvider
     */
    returnProviderViewModel:function(model){
        var provider ={};
        if(model.proxyUrl && model.proxyUrl.length>0)
            provider = {proxy : new Cesium.DefaultProxy(model.proxyUrl),url : model.Url};
        else
            provider = {url : model.Url};
        switch (model.type) {
            case 0://ArcGisMapServerImageryProvider
                return new Cesium.ArcGisMapServerImageryProvider(provider);
                break;
            case 1://OpenStreetMapImageryProvider
                return Cesium.createOpenStreetMapImageryProvider(provider);
                break;
            case 2://WebMapTileServiceImageryProvider
                /*var obj= { layer:model.layer,style:model.style,format:model.format,tileMatrixSetID:model.tileMatrixSetID};
                provider = Object.assign(provider, obj);
                return new Cesium.WebMapTileServiceImageryProvider(provider);*/
                var obj= { layer:model.layer,style:model.style,format:model.format,tileMatrixSetID:model.tileMatrixSetID};
                provider = Object.assign(provider, obj);
                var tdtProvider = new TDTWMTSImageProvider(provider.url, false, 1, 18);
                return tdtProvider;
                break;
            case 3://TileMapServiceImageryProvider
                var obj= {credit:model.credit,fileExtension:model.fileExtension};
                provider = Object.assign(provider, obj);
                return Cesium.createTileMapServiceImageryProvider(provider);
                break;
            case 4://Cesium.UrlTemplateImageryProvider
                var obj= {credit:model.credit};
                provider = Object.assign(provider, obj);
                return new Cesium.UrlTemplateImageryProvider(provider);
                break;
            case 5://Cesium.WebMapServiceImageryProvider
                var obj= {credit:model.credit,layers:model.layers,tilingScheme:model.tilingScheme};
                provider = Object.assign(provider, obj);
                return new Cesium.WebMapServiceImageryProvider(provider);
                break;
            default:
                return new Cesium.ArcGisMapServerImageryProvider(provider);
                break;
        }
    },