vite+vue3+cesium环境搭建

最新推荐文章于 2024-08-21 08:54:20 发布

智商偏低

最新推荐文章于 2024-08-21 08:54:20 发布

阅读量1.1k

点赞数

分类专栏： Cesium 文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/qq_40098572/article/details/131307060

版权

Cesium 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文指导如何创建一个基于Vite的项目，并集成cesium插件来展示3D地图。首先通过npm初始化Vite项目，然后安装cesium插件。接着，在vite.config.js中配置插件，并在App.vue及HelloWorld.vue组件中设置全屏显示。最后，通过Cesium库创建Viewer实例以在页面上显示3D地图。

摘要由CSDN通过智能技术生成

1.创建一个Vite项目
npm create vite@latest
2.安装cesium插件：vite-plugin-cesium

npm i cesium vite-plugin-cesium vite -D
3、配置vite.config.js
import cesium from 'vite-plugin-cesium';
export default defineConfig({ plugins: [vue(),cesium()]
})
4、清空style.css中的样式

5、配置App.vue
清空一切不需要的，设置样式使得全屏

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld />
</template>

<style >
html,body,#app{
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}
</style>

6、配置HelloWorld.vue

<template>
  <div id="cesiumContainer">
  </div>
</template>
<script setup>
import {onMounted} from "vue";
import * as Cesium from 'cesium';
onMounted(()=>{
  let viewer = new Cesium.Viewer("cesiumContainer",)
})
</script>
<style >
#cesiumContainer{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

运行效果