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

相关推荐
一只一只妖2 小时前
突发奇想,还未实践,在Vben5的Antd模式下,将表单从「JS 配置化」改写成「模板可视化」形式(豆包版)
前端·javascript·vue.js
悟能不能悟5 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶5 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
gnip6 小时前
js上下文
前端·javascript
中草药z6 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)7 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休7 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel7 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组7 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架