一:加载原理:

1.天地图影像服务

                                        
 var layerT=new Cesium.WebMapTileServiceImageryProvider({
    url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
    layer: "tdtBasicLayer",
    style: "default",
    format: "image/jpeg",
    show: false
});
           
                                        
                                    

2.天地图影像注记服务

                                        
var layerTZ=new Cesium.WebMapTileServiceImageryProvider({
    url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg",
        layer: "tdtAnnoLayer",
        style: "default",
        format: "image/jpeg",
        show: false
}); 
                                        
                                    

3.Arcgis在线地图服务

                                        
esriImageryProvider = new Cesium.ArcGisMapServerImageryProvider({
    url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
}); 
                                        
                                    

4.cesiumblack

                                        
var balckMarble = new Cesium.createTileMapServiceImageryProvider({
    url : 'https://cesiumjs.org/blackmarble',
    credit : 'Black Marble imagery courtesy NASA Earth Observatory',
    flipXY : true
});
                                        
                                    

5.GoogleMap

                                        
var GoogleMap = new Cesium.UrlTemplateImageryProvider({
    url:"http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
});
                                        
                                    

6.OSM

                                        
var osm = Cesium.createOpenStreetMapImageryProvider({
    url : 'https://stamen-tiles.a.ssl.fastly.net/toner/'  //https://stamen-tiles.a.ssl.fastly.net/watercolor/、https://stamen-tiles.a.ssl.fastly.net/toner/
});
                                        
                                    

7.MapBox:Mapbox需要去官网注册账号，添加一个Token才可以访问地图服务

                                        
var mapbox =new Cesium.MapboxImageryProvider({
    mapId: 'mapbox.streets',  //mapbox提供了三种类型 mapbox.streets  mapbox.satellite mapbox.streets-basic
    accessToken: 'sk.eyJ1IjoicG9wc3RhciIsImEiOiJjam1rZXc4cXQwYW5vM3BwOWJ3MHd5eXVtIn0.QFM5ceDQ17WwBXVssyVJYA'
});
                                        
                                    

二:全部代码

1、代码实例

                                        
var viewer = new Cesium.CesiumWidget("cesiumContainer");
var layers=viewer.imageryLayers;
document.getElementById('mapserverselect').onchange=function(){
var dom=document.getElementById('mapserverselect');
var value=dom.value;
switch(value){
case 'TDT':
    var layerT=new Cesium.WebMapTileServiceImageryProvider({
    url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
    layer: "tdtBasicLayer",
    style: "default",
    format: "image/jpeg",
    show: false
    });
    layers.addImageryProvider(layerT);
break;
case'TDTZJ':
    var layerTZ=new Cesium.WebMapTileServiceImageryProvider({
    url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg",
    layer: "tdtAnnoLayer",
    style: "default",
    format: "image/jpeg",
    show: false
    });
    layers.addImageryProvider(layerTZ);
break;
case 'ArcGIS':
    esriImageryProvider = new Cesium.ArcGisMapServerImageryProvider({
    url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
    });
    layers.addImageryProvider(esriImageryProvider);
break;
case 'cesiumBlack':
    var balckMarble = new Cesium.createTileMapServiceImageryProvider({
    url : 'https://cesiumjs.org/blackmarble',
    credit : 'Black Marble imagery courtesy NASA Earth Observatory',
    flipXY : true
    });
    balckMarble.splitDirection = Cesium.ImagerySplitDirection.LEFT;
    layers.addImageryProvider(balckMarble);
break;
case 'GoogleMap':
    var GoogleMap = new Cesium.UrlTemplateImageryProvider({
    url:"http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
    });
    layers.addImageryProvider(GoogleMap);
break;
case 'osm':
    var osm = Cesium.createOpenStreetMapImageryProvider({
    url : 'https://stamen-tiles.a.ssl.fastly.net/toner/'  //https://stamen-tiles.a.ssl.fastly.net/watercolor/、https://stamen-tiles.a.ssl.fastly.net/toner/
    });
    layers.addImageryProvider(osm);
break;
case 'mapbox':
    var mapbox =new Cesium.MapboxImageryProvider({
    mapId: 'mapbox.streets',  //mapbox提供了三种类型 mapbox.streets  mapbox.satellite mapbox.streets-basic
    accessToken: 'sk.eyJ1IjoicG9wc3RhciIsImEiOiJjam1rZXc4cXQwYW5vM3BwOWJ3MHd5eXVtIn0.QFM5ceDQ17WwBXVssyVJYA'
    });
    layers.addImageryProvider(mapbox);
break;
}
}
                                        
                                    

3.效果图