vue3-vite-cesium

 

cesium中文网

http://cesium.xin/

 

优秀的学习资源

http://cesium.xin/wordpress/archives/130.html

 

 

vite-plugin-cesium

vite社区插件安装cesium

https://github.com/nshen/vite-plugin-cesium

 

cesium参数

cesium初始化

安装

npm i cesium vite-plugin-cesium vite -D

 

vite插件中添加

// vite.config.js
import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium';
export default defineConfig({
  plugins: [cesium()]
});

页面引用

// App.vue
<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
onMounted(()=>{
  const viewer = new Cesium.Viewer('cesiumContainer');
})
</script>
<style>
html,
body,
#app,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

 

 

 

Primitive详解

new Cesium.Primitive ( options )

图元表示 场景 中的几何。几何可以来自单个 GeometryInstance 如下面的示例1所示，或者来自实例数组，即使几何图形来自不同几何类型，例如 RectangleGeometry 和 EllipsoidGeometry a>如代码示例2所示。

基本体将几何实例与描述完整阴影的 Appearance 组合在一起，包括 材料 和 RenderState 。大致而言，几何实例定义了结构和位置，外观定义了视觉特征。解耦的几何形状和外观使我们能够混合并匹配其中的大多数，并彼此独立地添加新的几何形状或外观。

将多个实例组合成一个原语称为批处理，可显着提高静态数据的性能。可以单独选择实例； Scene＃pick 返回其 GeometryInstance＃id 。使用每个实例的外观，例如 PerInstanceColorAppearance ，每个实例也可以具有唯一的颜色。

几何 可以在网络工作者或主线程上创建和批处理。前两个例子显示将通过使用几何描述在Web工作者上创建的几何。第三个例子显示了如何通过显式调用 createGeometry 方法在主线程上创建几何的方法。

参考网址

https://blog.csdn.net/damadashen/article/details/125291834