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的tokenCesium.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>
