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

以下是一个使用 Vue 3、TypeScript 和 Vite 创建的简单示例，演示如何集成 Cesium 加载天地图影像和矢量地图，并添加基本标注。

首先，确保你已经安装了 Vite 和 Cesium：

npm init vite@latest my-cesium-app --template vue-ts
cd my-cesium-app
npm install
npm add cesium

然后，在 src/App.vue 文件中添加以下代码：

<template>
  <div id="app">
    <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import Cesium from 'cesium';
 
Cesium.Ion.defaultAccessToken = '<你的天地图Key>'; // 替换为你的天地图Key
 
export default defineComponent({
  name: 'App',
  setup() {
    const cesiumContainer = ref<null | HTMLElement>(null);
 
    onMounted(() => {
      const viewer = new Cesium.Viewer(cesiumContainer.value!, {
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.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=<你的天地图Key>', // 天地图影像服务URL
          layer: 'tdtImg_w',
          style: 'default',
          format: 'tiles',
          tileMatrixSetID: 'GoogleMapsCompatible',
        }),
        terrainProvider: 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=<你的天地图Key>', // 天地图矢量服务URL
          layer: 'tdtVec_w',
          style: 'default',
          format: 'tiles',
          tileMatrixSetID: 'GoogleMapsCompatible',
        }),
        geocoder: false,
        homeButton: false,
        baseLayerPicker: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
        fullscreenButton: false,
        sceneModePicker: false,
        navigationInstructionsInitiallyVisible: false,
        scene3D: new Cesium.Scene({
          globe: new Cesium.Globe(),
        }),
      });
 
      // 添加基本标注
      const position = Cesium.Cartesian3.fromDegrees(116.40769, 39.89945, 0);
      viewer.entities.add({
        name: '北京天安门',
        position: position,