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>
