cesium嵌入项目

苦逼老百姓

已于 2024-06-06 22:05:19 修改

阅读量56

点赞数

分类专栏： cesium从入门到入魔文章标签： javascript vue.js 前端

于 2024-06-06 21:46:09 首次发布

本文链接：https://blog.csdn.net/qq_37193169/article/details/139510028

版权

cesium从入门到入魔专栏收录该内容

8 篇文章 1 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了如何在Vue项目中集成Cesium，包括创建Vue项目、下载Cesium依赖、管理静态资源以及启动项目，最后展示了一个成功的地球视图。

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

1、创建一个vue项目

vue create cesium-demo

在这里插入图片描述

2、使用cd命令进入到创建好的项目文件夹下，或直接vscode重新打开项目

cd cesium-demo

3、下载cesium依赖

npm install cesium

在这里插入图片描述

4、将静态资源放到public目录下

依赖下载完成后，在public文件夹下创建Cesium-1.118文件夹，利于日后的管理分类；打开node_modules/cesium/Build/Cesium文件夹，将Assets、ThirdParty、Widgets、Workers四个文件夹拷贝到public/Cesium-1.118文件夹下；然后将Widgets文件夹再拷贝到src文件夹下。到此我们的准备工作就完成了

在这里插入图片描述

编辑App.vue文件

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

<script setup>
import * as Cesium from 'cesium'
import "./Widgets/widgets.css" //导入cesium的css文件
import { onMounted } from 'vue'//导入生命周期

window.CESIUM_BASE_URL = "/Cesium-1.118"//设置cesium静态资源路径

onMounted(()=>{
  var viwer = new Cesium.Viewer("cesiumContainer")
})
</script>

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