Cesium学习笔记（2）

Vue中使用Cesium

创建一个Vue项目

在vue工作空间中一个新建文件夹

右键选择【在集成终端中打开】

安装vue 输入npm init vue@latest并输入项目名称

选择是否引入

进入刚刚创建的vue项目 输入cd vue-cesium

安装依赖（第一次启动项目需要） 输入 npm install

启动项目 输入npm run dev

vue自带的页面

添加Cesium

在终端中按下 ctrl+c终止vue项目

输入npm install cesium 安装cesium

我们将vue自带的（App.vue中的）代码都删除，编写第一个cesium程序应用。

<script setup>
// import { RouterLink, RouterView } from 'vue-router'
// import HelloWorld from './components/HelloWorld.vue'
import { onMounted } from 'vue';
import *as Cesium from 'cesium';
import './Widgets/widgets.css'

//设置静态资源根目录
window.CESIUM_BASE_URL = '/'

onMounted(()=>{
  var viewer=new Cesium.Viewer('cesiumContainer');

})
</script>

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

<style >
*{
  margin: 0;
  padding: 0;
}
 .cesiumContainer {
    width: 100vw;
    height: 100vh;
  }
</style>

main.js中的main.css引入删除

将node_modules中的cesium一些资源复制到public目录下

再将Widget目录复制到src目录下

再次启动项目 在终端中输入npm run dev，浏览器中输入http://localhost:5174/

一个vue-cesium就成功启动了！