cesium底圖加載底圖切換基於天地圖服務

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Cesium App</title>
    <script src="./scripts/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./scripts/Cesium/Widgets/widgets.css">
    <style> html,body{ width: 100%; height: 100%; margin: 0; padding:0; } </style>
</head>
<body>
    <div id="cesiumContainer" style="height:100%"></div>

    <script>
    //底圖切換
    var img_tdt_yx = new Cesium.ProviderViewModel({ name: "影像底圖", tooltip: "影像底圖", //顯示切換的圖標
        iconUrl: "./images/img_tdt_yx.png", creationFunction: function () { var esri = 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&tk=7711a24780452f03bb7c02fba98183b9' }); return esri; } }); var img_tdt_sl = new Cesium.ProviderViewModel({ name: "矢量底圖", tooltip: "矢量底圖", iconUrl: "./images/img_tdt_sl.png", creationFunction: function () { var esri = new Cesium.WebMapTileServiceImageryProvider({ url: 'http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=7711a24780452f03bb7c02fba98183b9' }); return esri; } }); var img_tdt_dx = new Cesium.ProviderViewModel({ name: "地形底圖", tooltip: "地形底圖", iconUrl: "./images/img_tdt_dx.png", creationFunction: function () { var esri = new Cesium.WebMapTileServiceImageryProvider({ url: 'http://t0.tianditu.gov.cn/ter_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ter&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=7711a24780452f03bb7c02fba98183b9' }); return esri; } }); //影像底圖加載
        let imageryProvider = 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&tk=7711a24780452f03bb7c02fba98183b9', layer: 'img', style: 'default', format: 'tiles', tileMatrixSetID: 'w', credit: new Cesium.Credit('天地圖全球影像服務'), // maximumLevel:7,
                show:false, }); let viewer = new Cesium.Viewer('cesiumContainer',{ //隱藏底圖切換
            baseLayerPicker:true, //影像底圖加載
 imageryProvider: imageryProvider, //地形加載
            //terrainProvider:terrainProvider
            animation:false,//是否建立動畫小器件，左下角儀表 
            timeline: false,//是否顯示時間軸 
            sceneModePicker: false,//是否顯示3D/2D選擇器 
            baseLayerPicker: true,//是否顯示圖層選擇器 
            geocoder: false,//是否顯示geocoder小器件，右上角查詢按鈕
            imageryProviderViewModels: [img_tdt_yx, img_tdt_dx, img_tdt_sl],//可供BaseLayerPicker選擇的圖像圖層ProviderViewModel數組 
            selectedImageryProviderViewModel: img_tdt_yx,//當前地形圖層的顯示模型，僅baseLayerPicker設爲true有意義 
            scene3DOnly: true,//若是設置爲true，則全部幾何圖形以3D模式繪製以節約GPU資源 
            navigationHelpButton: false,//是否顯示右上角的幫助按鈕
            homeButton: false,//是否顯示Home按鈕
            infoBox: true,//是否顯示信息框 
            showRenderLoopErrors: false//若是設爲true，將在一個HTML面板中顯示錯誤信息 
 }); //影像標註加載
        viewer.imageryLayers.addImageryProvider(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&format=tiles&tk=7711a24780452f03bb7c02fba98183b9", layer: "tdtImgAnnoLayer", style: "default", format: "image/jpeg", tileMatrixSetID: "GoogleMapsCompatible", show: false })) //隱藏cesium左下角logo
        viewer._cesiumWidget._creditContainer.style.display = 'none'; </script>
    
</body>
</html>
這樣就ok了 css
cesium底圖加載底圖切換 基於天地圖服務

cesium底圖加載底圖切換基於天地圖服務
