内容概览
1.基于cesium 实现地图切换展示效果
2.源代码 demo 下载
本篇实现 cesium 地图切换展示功能，效果图如下：
实现思路
-
配置不同类型地图服务
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:'server.arcgisonline.com/arcgis/rest…'}, {"id":3,"label":"街道图",className:"vecType",type:0,proxyUrl:'',Url:'cache1.arcgisonline.cn/arcgis/rest…'}, {"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:'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'}, ],
}
-
初始化调用
//底图切换 cesium.loadSwitcherMap(MapConfig.mapInitParams.imageryViewModels);
-
地图切换核心部分代码
/** * 地图切换控件 */ 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; } }
