前言

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);

  • 地圖切換核心部分代碼

更多的詳情見：

cesium 之地圖切換展示效果篇（附源碼下載） － 小專欄?

xiaozhuanlan.com圖標

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波

GIS之家店鋪：GIS之家

GIS之家源碼諮詢：GIS之家webgis入門開發系列demo源代碼諮詢


推薦閱讀：
相關文章