vue3+cesium创建地图

1.我这边使用的是cdn引入形式 比较简单的方式 不需要下载依赖
在项目文件的index.html引入 这样cesium就会挂载到window对象上面去了

  <!-- 引入cesium-js文件 -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.111/Build/Cesium/Cesium.js"></script>
 
    <!-- 引入cesium-css文件-->
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.111/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

然后我们打印下看window上面有没有cesium

引入成功了 接下来我们在vue3项目里面初始化cesium并且定位到某个点

---

我们需要去cesium官网上面注册token
这个是官网地址： cesium网站

<template>
  <div class="container" id="container">
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive } from 'vue';
console.log(window, '==window')
const Cesium = window.Cesium as any;
//初始化
const state = reactive({
  map: null as any, //地图
})
/**
* 模块名:初始化cesium地图
* 代码描述:
* 作者:Fant
* 创建时间:2024/07/30 09:30:17
*/
const getMap = () => {
  //cesium的token
  Cesium.Ion.defaultAccessToken = '这里写你的token'
  
  state.map = new Cesium.Viewer('container', {
    
  })
  console.log(state.map)
  //定位到哪里去
  state.map.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(114.432188,30.453627,1000), //经纬度 高度
    duration:3,
  })
}
onMounted(() => {
  getMap()
})
</script>
<style scoped>
.container{
  width:100vw;
  height: 100vh;
  overflow: hidden;
}
</style>