案例说明
案例代码是基于 Vue3 和 Cesium 开发的一个天地图三维地球应用。在组件挂载后，通过 Cesium.Viewer 创建了一个三维地球实例，并设置了一系列的界面控件和参数，例如动画小组件、底图组件、全屏组件、时间轴等。接着，使用天地图的 WebMapTileServiceImageryProvider 添加了四个不同的图层，包括矢量底图、矢量注记、影像底图和影像注记。最后，将实例挂载到组件模板中的 div 元素中，使用户可以在页面上看到一个完整的天地图三维地球应用界面。
此代码中使用了 TypeScript，使代码更加规范、易于维护。同时，使用了 Vue3 的新特性 setup()，提供了更加灵活的组件配置方式，避免了传统 Vue2 中使用 Options API 时可能出现的一些问题。同时，使用了 Cesium 的 API，可以很方便地实现三维地球应用的开发
一、效果图
二、天地图TK注册与获取
- 打开天地图开放平台官网，网址为 https://console.tianditu.gov.cn/.
- 点击页面右上角的“注册”按钮，进入注册页面，填写个人信息并完成注册。
- 注册完成后，在开放平台控制台左侧菜单栏中选择“应用管理”，创建一个新的应用程序，并填写相关信息。
- 在创建应用程序后，您可以在应用程序的设置页面中获取应用程序的AK（Access Key）和SK（Secret Key），其中AK即为TK。
需要注意的是，获取天地图的TK需要注册并创建应用程序，每个应用程序有一个唯一的AK，用于标识该应用程序的身份，可以用来调用天地图的服务。此外，天地图还有许多其他服务，您可以根据自己的需求来选择使用不同的服务
三、cesium集成天地图
在 Cesium 中加载天地图的底图和注记图层需要使用 WebMapTileServiceImageryProvider 类，该类可以通过 WMTS 服务来获取地图瓦片数据。以下是加载矢量底图和矢量注记的示例代码：
let tiandituKey = ""//需要自己申请天地图的key
//矢量底图
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.com/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=" + tiandituKey,
layer: "tdtVecBasicLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
}));
//矢量注记
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.com/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=" + tiandituKey,
layer: "tdtAnnoLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible"
}));
//影像底图
viewer.imageryLayers.addImageryProvider(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=" + tiandituKey,
layer: "tdtBasicLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
}));
//影像注记
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.jpg&tk=" + tiandituKey,
layer: "tdtAnnoLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
}));
源码地址：https://download.csdn.net/download/u012425087/87642527
