cesium+vite demo

双口馋猫2025-03-10 16:35

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