Cesium.Cartesian3.normalize

可以将这段代码的函数改写成 Vue 组件中的一个方法。具体实现如下： ```vue <template> <div ref="cesiumContainer" class="cesiumContainer"></div> </template> <script> export default { mounted() { // 在组件挂载后初始化 Cesium 场景 this.initCesium(); }, methods: { initCesium() { // 创建 Cesium 场景 const viewer = new Cesium.Viewer(this.$refs.cesiumContainer); // 创建粒子系统 const particleSystem = viewer.scene.primitives.add( new Cesium.ParticleSystem({ // 粒子数量 maximumParticles: 10000, // 粒子寿命 lifeTime: 15.0, // 粒子尺寸 imageSize: new Cesium.Cartesian2(10.0, 10.0), // 粒子颜色 startColor: Cesium.Color.RED.withAlpha(0.5), endColor: Cesium.Color.YELLOW.withAlpha(0.0), // 粒子速度 minimumSpeed: 0.0, maximumSpeed: 200.0, // 粒子发射角度 minimumEmitterHeight: 5000000.0, maximumEmitterHeight: 5000000.0, emitterModelMatrix: Cesium.Matrix4.IDENTITY, }) ); // 定义粒子系统的力函数 const forceFunction = (particle, dt) => { dt = Cesium.Math.clamp(dt, 0.0, 0.05); let scratchCartesian3 = Cesium.Cartesian3.normalize( particle.position, new Cesium.Cartesian3() ); scratchCartesian3 = Cesium.Cartesian3.multiplyByScalar( scratchCartesian3, -40.0 * dt, scratchCartesian3 ); scratchCartesian3 = Cesium.Cartesian3.add( particle.position, scratchCartesian3, scratchCartesian3 ); let scratchCartographic = Cesium.Cartographic.fromCartesian( scratchCartesian3, Cesium.Ellipsoid.WGS84, new Cesium.Cartographic() ); const angle = (Cesium.Math.PI * 2.0 * this.iteration) / this.numberOfSystems; this.iteration += this.iterationOffset; scratchCartographic.longitude += Math.cos(angle) * this.cartographicStep * 30.0 * dt; scratchCartographic.latitude += Math.sin(angle) * this.cartographicStep * 30.0 * dt; particle.position = Cesium.Cartographic.toCartesian(scratchCartographic); }; // 设置粒子系统的力函数 particleSystem.forces.clear(); particleSystem.forces.push(forceFunction); // 定义粒子系统的配置参数 this.numberOfSystems = 6; this.iteration = 0; this.iterationOffset = 0.1; this.cartographicStep = 0.05; // 开始粒子系统的运动 particleSystem.start(); }, }, }; </script> <style> .cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; } </style> ``` 上面的代码中，我们在 Vue 组件的 mounted 钩子函数中初始化了 Cesium 场景，并创建了一个粒子系统。然后，我们将原来的力函数改写成了一个箭头函数，将其作为粒子系统的一个 force。在 Vue 组件中，我们可以将 numberOfSystems、iteration、iterationOffset 和 cartographicStep 等参数定义为 Vue 实例的 data 属性，并在 forceFunction 中通过 this 访问这些参数。 最后，我们在组件的 initCesium 方法中开始了粒子系统的运动。

### Cesium 中 ColorGradient 的用法及相关功能 Cesium 提供了一种灵活的方式来定义颜色渐变，这通常通过 `Cesium.Color` 和 `Cesium.Property` 类来实现。虽然 Cesium 并未直接提供名为 `ColorGradient` 的类，但可以通过组合多个属性和方法创建类似的颜色梯度效果。 以下是具体实现方式： #### 使用 `Cesium.Material` 创建颜色渐变 Cesium 支持自定义材质 (Material)，可以利用这些材质来模拟颜色渐变的效果。下面是一个简单的例子，展示如何基于高度变化应用颜色渐变[^2]。 ```javascript // 定义一个基于高度的颜色渐变函数 function createHeightBasedColor Gradient(minHeight, maxHeight) { return new Cesium.ColorGeometryInstanceAttribute(function(feature) { var height = feature.properties.height; // 获取当前对象的高度 var normalizedHeight = Cesium.Math.clamp((height - minHeight) / (maxHeight - minHeight), 0.0, 1.0); // 根据高度计算颜色插值 var color = Cesium.Color.lerp( Cesium.Color.BLUE, Cesium.Color.RED, normalizedHeight, new Cesium.Color() ); return Cesium.ColorGeometryInstanceAttribute.toValue(color); }); } var viewer = new Cesium.Viewer('cesiumContainer'); viewer.entities.add({ name : 'Height-based gradient', position : Cesium.Cartesian3.fromDegrees(-75.164209, 39.985508, 100), box : { dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0), material : createHeightBasedColorGradient(0, 500000) } }); ``` 此代码片段展示了如何根据物体的高度动态调整其颜色，从而形成一种视觉上的颜色渐变效果。 #### 利用 `Cesium.CustomShader` 实现更复杂的颜色过渡 如果需要更加复杂或实时更新的颜色渐变逻辑，则可以借助 `Cesium.CustomShader` 来编写 GLSL 片段着色器脚本。这种方式允许开发者完全控制渲染管线中的每一帧像素处理过程[^3]。 ```javascript const customShader = new Cesium.CustomShader({ fragmentShaderText: ` void fragmentMain(FragmentInput fsInput, out vec4 fragColor) { float t = clamp(fsInput.positionWC.y / 1e6, 0.0, 1.0); // Normalize y-coordinate to [0..1] vec3 col = mix(vec3(0., 0., 1.), vec3(1., 0., 0.), t); // Blue -> Red transition based on altitude. fragColor = vec4(col, 1.); }`, }); viewer.scene.primitives.add(new Cesium.Primitive({ geometryInstances : [ new Cesium.GeometryInstance({ geometry : new Cesium.BoxGeometry({ vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT, minimumCorner : new Cesium.Cartesian3(-1e6,-1e6,-1e6), maximumCorner : new Cesium.Cartesian3( 1e6, 1e6, 1e6) }) }), ], appearance : new Cesium.PolylineColorAppearance(), customShader : customShader })); ``` 以上示例说明了如何使用 GLSL 编写自定义着色程序来自由操控模型表面每一点的颜色表现形式。 --- #### 总结 尽管 Cesium 没有专门针对 “color gradient” 设计独立 API 接口，但是它提供了足够的灵活性让用户能够轻松构建所需的功能模块。无论是简单场景下的静态配色方案还是高级需求里的动态交互体验都可以很好地满足开发人员的要求。