• Cesium是默認加載了微軟公司的Bing地圖，并提供了BingMapslmageryProvider類來加載Bing地圖。也就是說，在創建Viewer時，如果不指定lmageryProvider類就默認加載Bing地圖。
• 在示例中詳細介紹如何通過lmageryProvider類加載天地圖，并使用Cesium的WebMapTileServiceImageryProvider類來調用天地圖底圖服務。（調用天地圖底圖服務需要在天地圖官網免費申請key）。

1.創建地圖容器

<template><!-- vue+cesium加載天地圖 --><div class="map-box" id="cesiumContainer"></div>
</template>
<script setup>import {ref,onMounted} from 'vue'import * as Cesium from 'cesium'onMounted(() => {// 默認加載微軟公司Bing地圖const viewer = new Cesium.Viewer('cesiumContainer', {geocoder: true, // 是否顯示位置查找工具（true表示是，false表示否）homeButton: true, // 是否顯示首頁位置工具sceneModePicker: true, //是否顯示視角模式切換工具baseLayerPicker: false, //是否顯示默認圖層選擇工具navigationHelpButton: false, //是否顯示導航幫助工具animation: true, //是否顯示動畫工具timeline: false, //是否顯示時間軸工具fullscreenButton: true, //是否顯示全屏按鈕工具})// ...});
</script>
<style scoped>.map-box {height: 100%;width: 100%;}
</style>

2.疊加天地圖影像底圖與矢量注記 關鍵代碼

// 創建天地圖圖層-影像底圖
const tdImageryProvider = new Cesium.WebMapTileServiceImageryProvider({url: "<your tianditu key url>",subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],layer: 'vec',style: 'default',format: 'tiles',tileMatrixSetID: 'GoogleMapsCompatible',maximumLevel: 18,
});
// 創建天地圖圖層-影像注記
const tdImageryProviderAnno = new Cesium.WebMapTileServiceImageryProvider({url: "<your tianditu key url>",subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],layer: 'cva',style: 'default',format: 'tiles',tileMatrixSetID: 'GoogleMapsCompatible',maximumLevel: 18,
});// 將天地圖圖層添加到Cesium Viewer中
viewer.imageryLayers.addImageryProvider(tdImageryProvider);
viewer.imageryLayers.addImageryProvider(tdImageryProviderAnno);

3.示例效果圖