Cesium加載天地圖

把leaflet換成cesium，並沒有看出來差別，可能是面積太小了吧 變形不明顯。。

 http://localhost:8080/cesium/Apps/HelloWorld.html

<script>
        Cesium.Ion.defaultAccessToken='xxxx';
        let viewerOption = {
            animation: false, // 控制場景動畫的播放速度控件
            baseLayerPicker: false, // 底圖切換控件
            fullscreenButton: false, // 全屏控件
            geocoder: false, // 地理位置查詢定位控件
            homeButton: false, // 默認相機位置控件
            timeline: false, // 時間滾動條控件
            infoBox: false,           //是否顯示信息框
            sceneModePicker: false, //是否顯示3D/2D選擇器
            selectionIndicator: false, // 點擊點綠色彈出 是否顯示選取指示器組件
            sceneMode: Cesium.SceneMode.SCENE3D, //設定3維地圖的默認場景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING
            navigationHelpButton: false, // 默認的相機控制提示控件
            scene3DOnly: true, // 每個幾何實例僅以3D渲染以節省GPU內存
            navigationInstructionsInitiallyVisible: false,
            showRenderLoopErrors: false, //是否顯示渲染錯誤
            orderIndependentTranslucency:false,//設置背景透明
            errainProvider: Cesium.createWorldTerrain()
        };
        
        let viewer = new Cesium.Viewer("cesiumContainer", viewerOption);

        var TDU_Key = "xxxxxx"//天地圖申請的**
 
        //在線天地圖影像服務地址(墨卡托投影)
        var TDT_IMG_W = "http://{s}.tianditu.gov.cn/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=" + TDU_Key;
        //在線天地圖矢量地圖服務(墨卡托投影) 
        var TDT_VEC_W = "http://{s}.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=" + TDU_Key;
        //在線天地圖影像中文標記服務(墨卡托投影)  
        var TDT_CIA_W = "http://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
            "&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
            "&style=default.jpg&tk=" + TDU_Key
        //在線天地圖矢量中文標記服務(墨卡托投影)            
        var TDT_CVA_W = "http://{s}.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
            "&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
            "&style=default.jpg&tk=" + TDU_Key;
 
//此處插播廣告。有BIM模型引擎的需求，可以找我們。官網http://www.qmodel.cn/
 
        let Img = new Cesium.WebMapTileServiceImageryProvider({   //調用影響中文服務
            url: TDT_VEC_W,//url地址，換影像還是矢量，隨便你喜歡
            layer: "img_w",    //WMTS請求的層名稱
            style: "default",//WMTS請求的樣式名稱
            format: "tiles",//MIME類型，用於從服務器檢索圖像
            tileMatrixSetID: "GoogleMapsCompatible",//    用於WMTS請求的TileMatrixSet的標識符
            subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],//天地圖8個服務器
            minimumLevel: 0,//最小層級
            maximumLevel: 18,//最大層級
        })
 
        viewer.imageryLayers.addImageryProvider(Img)//添加到cesium圖層上
 
 
        let cia = new Cesium.WebMapTileServiceImageryProvider({   //調用影響中文注記服務
            url: TDT_CVA_W,
            layer: "cia_w",
            style: "default",
            format: "tiles",
            tileMatrixSetID: "GoogleMapsCompatible",
            subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],//天地圖8個服務器
            minimumLevel: 0,
            maximumLevel: 18,
        })
 
        viewer.imageryLayers.addImageryProvider(cia)//添加到cesium圖層上
        viewer.scene.globe.depthTestAgainstTerrain = !0;
 
        // 沒有影像圖層時地球的底色
        viewer.scene.globe.baseColor = Cesium.Color.BLACK;
 
        viewer.camera.setView({
            destination: new Cesium.Cartesian3(6788280.844465209, -81980750.10214644, 1061921.04004376)
        });
        viewer.camera.flyTo({
          //  destination: new Cesium.Cartesian3.fromDegrees(116.435314, 40.960521, 10000000.0),
          //  duration:8
            destination: new Cesium.Cartesian3.fromDegrees(116.435314, 22.960521, 2000.0),
            duration:18
        });
 
  </script>