<script lang="ts" setup>
import { onMounted } from 'vue'

onMounted(() => {
  setTimeout(() => {
    // 动态加载Cesium
    const link = document.createElement('link')
    link.href = "https://cesium.com/downloads/cesiumjs/releases/1.130/Build/Cesium/Widgets/widgets.css"
    link.rel = "stylesheet"
    document.head.appendChild(link)

    const script = document.createElement('script')
    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.130/Build/Cesium/Cesium.js'
    script.onload = () => {
      const Cesium = (window as any).Cesium
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiMGY5NzY2NC03MjQ2LTRiMjItOTBiMC1hN2EwOWVjNTY1MDMiLCJpZCI6MzE1NjAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTU1ODIyOTh9._ZB_Xkxp7-tGrhsZQ9e2ILHQWUS22XuBpl5qIdlesY8'

      const viewer = new Cesium.Viewer('cesiumContainer', {
        terrain: Cesium.Terrain.fromWorldTerrain()
      })

      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400)
      })
    }
    document.head.appendChild(script)
  }, 3000)
})
</script>

<template>
  <div id="cesiumContainer"></div>
</template>

<style>
#cesiumContainer {
  width: 100%;
  height: 100vh;
}
</style>