前言
cesium 官网的api文档介绍地址cesium官网api，里面详细的介绍 cesium 各个类的介绍，还有就是在线例子：cesium 官网在线例子，这个也是学习 cesium 的好素材。
内容概览
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:'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'},
],
}
- 初始化调用
//底图切换
cesium.loadSwitcherMap(MapConfig.mapInitParams.imageryViewModels);
- 地图切换核心部分代码
更多的详情见：GIS之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波