CesiumJS
库的构成
没有index.js的出口文件
主库文件有三种格式，ESModule 的是 index.js，IIFE 的是 Cesium.js，CommonJS 的是 index.cjs。
除了主库文件外，CesiumJS 还有 4 个文件夹下的静态资源：
Assets文件夹，图片或 JSON 等前端运行时可能用到的资源ThirdParty文件夹，WebAssembly 等前端运行时可能用到的第三方资源Widgets文件夹，主要是各个 CesiumJS 自带的界面小部件的 CSS 文件Workers文件夹，前端运行时用到的 WebWorker 的构建版本（WebWorker 由于一些原因，在前端运行时仍然用 CommonJS 格式加载）
如何配置
使用 External 模式引入静态库 - 不打包静态库
通过 npm 下载的 cesium 包中包含官方打包好了的 构建版本 库(Build)，没有必要让 Vite 将 CesiumJS 源代码再次打包，而应将其作为外部依赖
也就是配置 Vite 的 external 项，不打包，使用 CDN 或 public 文件夹下的库程序、资源。
在 Vite 中，需要借助两个社区插件完成 CesiumJS 的外部化：
- vite-plugin-externals
- vite-plugin-html-config
前者告诉 Vite 什么 dependencies 不参与打包，后者告诉 Vite 打包后的产物哪些 dependencies 需要在页面入口 html 文件中随 public 目录（或 CDN）引入。
引入问题
在代码中，有一些特殊的关键字、指令会被打包器识别，打包器会帮你把相关的资源打包、转译。
在 Webpack ，你可以使用 import 指令引入 css 文件或图片
- Webpack 本身只能处理
import进来的 JavaScript 文件 - 对于其它的资源，则使用各种
Loader完成打包处理过程。
Vite 则开箱支持了众多 Web 前端的资源的导入。但是，3D 领域的模型文件就没有支持，不能通过 import 命令导入，除非安装了处理对应文件格式的插件。像下面的导入指令，Vite 并不会帮你处理：
import CarModel from '@/assets/data/model.glb'
资源路径
- 工程的路径
- 运行时的路径
- 开发运行时
- 打包后运行时
new Cesium3DTileset({// vite 等打包器并不会帮你处理这个路径，Cesium 在发出请求也不会url: '@/assets/tilesets/tileset.json'
})
new Cesium3DTileset({// 或下面的例子，运行时的基础地址是 http://localhost:5173,// 那么前端发起请求就会是 http://localhost:5173/data/tileset.jsonurl: './data/tileset.json'
})
Vue2 引入Cesium
-
在node_models中找到cesium\Build, 将此文件下的Cesium文件复制出来放在项目的静态资源public中或者static中
-
在index.html中引入js和css
<script src="./static/Cesium/Cesium.js"></script> <link rel="stylesheet" href="./static/Cesium/Widgets/widgets.css">或
<style>@import url(/static/Cesium/Widgets/widgets.css);@import url(/static/Cesium/Widgets/lighter.css); </style>
Vue3 引入Cesium
-
安装Cesium和插件:
npm i cesium@1.99 vite-plugin-cesium -
进行插件的配置
import cesium from 'vite-plugin-cesium' export default defineConfig({plugins: [cesium(),], -
在
app.vue中引入Cesiumimport * as Cesium from 'cesium' console.log(Cesium)
