cesium+vite demo

1.准备工作

本人习惯vue,所以demo项目是搭建在vue+vite基础。

1.1 依赖包安装

在项目中引入需要的包

csharp 复制代码
npm i cesium
npm i vite-plugin-cesium -D
//如果是pnpm
pnpm add cesium
pnpm add vite-plugin-cesium -D

1.2 vite.config配置

javascript 复制代码
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import cesium from 'vite-plugin-cesium';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    cesium(), 
  ], 
});

2.组件封装

2.1组件

文件路径 src/components/terrain/terrain3D.vue

xml 复制代码
<template>
  <div id="cesiumContainer" style="height: 500px; width: 500px"></div>
</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import * as Cesium from 'cesium';
 
  const viewer = ref(null);

  onMounted(() => {
    if (!containerRef.value) return;
    const viewer = new Cesium.Viewer('cesiumContainer');
  });
</script>

2.2 app.vue引入

xml 复制代码
<script setup lang="ts">
  import LmTerrain from './components/terrain/terrain3D.vue';
</script>

<template>
    <div style="height: 500px"><lm-terrain /></div>
</template>

3 快照

运行后,浏览器看到这个球,就是cesium已经成功跑起来了。

如果没有安装插件vite-plugin-cesium,就会有类似这种报错

4 总结

cesium在项目中真的使用,如果不安装别的插件,那么需要手动配置,如果自身会手动配置,则是另一种说法,零基础或者懒人必备,就是配套使用套餐啦!

相关推荐
aesthetician5 分钟前
@tanstack/react-query:React 服务器状态管理与数据同步解决方案
服务器·前端·react.js
老华带你飞24 分钟前
小区服务|基于Java+vue的小区服务管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·小区服务管理系统
Nan_Shu_61432 分钟前
学习:uniapp全栈微信小程序vue3后台(28)
前端·学习·微信小程序·小程序·uni-app
珍宝商店42 分钟前
原生 JavaScript 方法实战指南
开发语言·前端·javascript
计算机学姐1 小时前
基于微信小程序的扶贫助农系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
蓝莓味的口香糖1 小时前
【企业微信】VUE项目在企微中自定义转发内容
前端·vue.js·企业微信
IT_陈寒1 小时前
告别低效!用这5个Python技巧让你的数据处理速度提升300% 🚀
前端·人工智能·后端
—Qeyser1 小时前
Laravel + UniApp AES加密/解密
前端·uni-app·laravel
C++chaofan1 小时前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot
cg.family1 小时前
Vue3 v-slot 详解与示例
前端·javascript·vue.js