cesium 之地图切换展示效果篇（附源码下载）

时间：2022-05-23 08:33:01

前言

cesium 官网的api文档介绍地址cesium官网api，里面详细的介绍 cesium 各个类的介绍，还有就是在线例子：cesium 官网在线例子，这个也是学习 cesium 的好素材。

内容概览

1.基于cesium 实现地图切换展示效果
2.源代码 demo 下载

本篇实现 cesium 地图切换展示功能，效果图如下：
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之家小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

相关文章