Cesium-安装和引入问题

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.json
  url: './data/tileset.json'
})

Vue2 引入Cesium

1. 在node_models中找到cesium\Build, 将此文件下的Cesium文件复制出来放在项目的静态资源public中或者static中

2. 在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

1. 安装Cesium和插件: npm i cesium@1.99 vite-plugin-cesium

2. 进行插件的配置

   import cesium from 'vite-plugin-cesium'
   export default defineConfig({
     plugins: [
       cesium(),
     ],

3. 在app.vue中引入Cesium

   import * as Cesium from 'cesium'
   console.log(Cesium)