在vue中配置cesium开发环境

发表于 更新于 分类于 Waline： 本文字数： 442
如何在vue+vite的环境中引入cesiumJS库

目前三维GIS开发越来越火了，很多人会选择基于cesiumJS进行开发，但问题是cesiumJS可能需要在服务器上托管一些静态资源。

这时候在框架中打包就需要配置，将这些静态资源在打包时一起复制过去。

解决方案有三种：

至于webpack，也是一样的，用复制插件托管到服务器上，或者使用官方的模板

安装vue-cesium插件

克隆他们的项目，再npm i，或者安装：

1
npm install vue-cesium --save

在main.js/ts中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// ...
import VueCesium from 'vue-cesium'

// ...

app.use(VueCesium, {
    cesiumPath: 'https://unpkg.com/cesium@latest/Build/Cesium/Cesium.js',
    // 可以使用cdn导入
    accessToken: '...'
  })
  
// 建议在生产环境指定cesium版本。

app.mount('#app')

克隆官方的vue+vite项目

1
2
3
git clone https://github.com/CesiumGS/cesium-vite-example.git
cd cesium-vite-example
npm i

打包复制插件vite-plugin-static-copy

1
npm i vite-plugin-static-copy --save

然后在vite.config.ts中配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// ···

import {viteStaticCopy} from 'vite-plugin-static-copy'

const cesiumSource = 'node_modules/cesium/Source'
const cesiumBaseUrl = "cesiumStatic";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // ..
    viteStaticCopy({
      targets: [
        { src: `${cesiumSource}/ThirdParty`, dest: cesiumBaseUrl },
        { src: 'node_modules/@cesium/engine/Build/Workers', dest: cesiumBaseUrl },
        { src: `${cesiumSource}/Assets`, dest: cesiumBaseUrl },
        { src: `${cesiumSource}/Widgets`, dest: cesiumBaseUrl },
      ],
    })
  ],
  resolve: {
    // ..
  define: {
    CESIUM_BASE_URL: JSON.stringify(cesiumBaseUrl)
  }
})

在cesium中使用自定义顶点+片元着色器，传入uniform变量

很多时候我们仅仅只需要重写顶点+片元着色器而非自定义customshader，或者重写apparence.material.source。而这俩不能同时重写，会起冲突，但自定义的片元着色器也需要用到unifom变量，这时候怎么办呢？

博主踩了很多坑，网上的教程很多都说不能给自定义的片元着色器传递uniform变量。最后在官方的指南找到了如下说明：

在 JavaScript 中，对象应该有一个公共 material 属性。当此属性更改时， update 函数应将材质的 GLSL 源添加到对象的片段着色器源之前，并组合对象和材质的制服。

1
2
3
4
5
var fsSource =
  this.material.shaderSource +
  ourFragmentShaderSource;

this._drawUniforms = combine([this._uniforms, this.material._uniforms]);

于是设置好自己需要的fabric.uniforms变量之后，打印apparence.material.source看看：

1
2
uniform float a_0;
...

原来传递的变量是会自动给编上以0开始的代码。

如此，就可以在fragmentshader里面使用a_0变量了。

值得注意，在修改uniforms的时候，变量后面是没有该编号的，即this.fabric.uniforms.a。