vue3+ts+vite+cesium 加载天地图影像天地图矢量地图天地图标注等案例模板

本文介绍: 案例代码是基于 Vue3 和 Ces ium 开发的一个天地图三维地球应用。在组件挂载后，通过 Ces ium.Vie w e r 创建了一个三维地球实例，并设置了一系列的界面控件和参数，例如动画小组件、底图组件、全屏组件、时间轴等。接着，使用天地图的 We bMapTileSe r v ic eIm a g e ryPr ov ide r 添加了四个不同的图层，包括矢量底图、矢量注记、影像底图和影像注记。最后，将实例挂载到组件模板中的 div 元素中，使用户可以在页面上看到一个完整的天地图三维地球应用界面。

案例 说明

案例代码是基于 Vue3 和 Ces ium 开发的一个天地图三维地球应用。在组件挂载后，通过 Ces ium.Vie w e r 创建了一个三维地球实例，并设置了一系列的界面控件和参数，例如动画小组件、底图组件、全屏组件、时间轴等。接着，使用天地图的 We bMapTileSer v iceIma geryProv ider 添加了四个不同的图层，包括矢量底图、矢量注记、影像底图和影像注记。最后，将实例挂载到组件模板中的 div 元素中，使用户可以在页面上看到一个完整的天地图三维地球应用界面。
此代码中使用了 Ty peSc rip t，使代码更加规范、易于维护。同时，使用了 Vue3 的新特性 setup()，提供了更加灵活的组件配置方式，避免了传统 Vue2 中使用 Op t ion s API 时可能出现的一些问题。同时，使用了 Ces ium 的 API，可以很方便地实现三维地球应用的开发

一、效果图

二、天地图TK注册与获取

打开天地图开放平台官网，网址为 https://console.tianditu.gov.cn/.
点击页面右上角的“注册”按钮，进入注册页面，填写个人信息并完成注册。

注册完成后，在开放平台控制台左侧菜单栏中选择“应用管理”，创建一个新的应用程序，并填写相关信息。

在创建应用程序后，您可以在应用程序的设置页面中获取应用程序的AK（Acce ss Key）和SK（Sec ret Key），其中AK即为TK。

需要注意的是，获取天地图的TK需要注册并创建应用程序，每个应用程序有一个唯一的AK，用于标识该应用程序的身份，可以用来调用天地图的服务。此外，天地图还有许多其他服务，您可以根据自己的需求来选择使用不同的服务

三、cesium 集成天地图

在 Cesium 中加载天地图的底图和注记图层需要使用 WebMapTileServ iceIma geryProv ider 类，该类可以通过 WMTS 服务来获取地图瓦片数据。以下是加载矢量底图和矢量注记的示例代码：

let tiandituKey = ""//需要自己申请天地图的key

  //矢量底图
  viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&amp;request=GetTile&amp;version=1.0.0&amp;LAYER=vec&amp;tileMatrixSet=w&amp;TileMatrix={TileMatrix}&amp;TileRow={TileRow}&amp;TileCol={TileCol}&amp;style=default&amp;format=tiles&amp;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&amp;request=GetTile&amp;version=1.0.0&amp;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",
  }));