有了上一章说Primiteve图层 我们就可以定义丰富数据图层
比如我们定义水面 图层
先定义水面图层参数定义
export interface PWaterPrimitives{
id: string,
source: Array,
symbol?: {
url?: string,
height?: number,
baseWaterColor?: any, //rgba颜色对象的水的基本颜色。
blendColor?: any, //rgba颜色对象，当混合从水到非水区域
frequency?: number, //频率:控制波的数量。
animationSpeed?: number, //控制水的动画速度的数字
amplitude?: number, //振幅:控制水波振幅的数字
specularIntensity?: number, //镜面反射强度:控制镜面反射强度的数字
},
}
export interface PPrimitiveWaterLayer {
name: string,
primitives:Array
}
水面图层
``javascript import { PPrimitiveWaterLayer,PWaterPrimitives } from “./PPrimitiveWaterLayer”; import { PrimiteveLayer } from “./PrimiteveLayer”; const FS =varying vec3 v_positionMC;
varying vec3 v_positionEC;
varying vec2 v_st;
void main()
{
czm_materialInput materialInput;
vec3 normalEC = normalize(czm_normal3D * czm_geodeticSurfaceNormal(v_positionMC, vec3(0.0), vec3(1.0)));
#ifdef FACE_FORWARD
normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);
#endif
materialInput.s = v_st.s;
materialInput.st = v_st;
materialInput.str = vec3(v_st, 0.0);
materialInput.normalEC = normalEC;
materialInput.tangentToEyeMatrix = czm_eastNorthUpToEyeCoordinates(v_positionMC, materialInput.normalEC);
vec3 positionToEyeEC = -v_positionEC;
materialInput.positionToEyeEC = positionToEyeEC;
czm_material material = czm_getMaterial(materialInput);
#ifdef FLAT
gl_FragColor = vec4(material.diffuse + material.emission, material.alpha);
#else
gl_FragColor = czm_phong(normalize(positionToEyeEC), material,czm_lightDirectionEC);
gl_FragColor.a = 0.3;
#endif
}
`;
//水的图层
export class PrimitiveWaterLayer extends PrimiteveLayer {
private idMapPrimitive = {};
constructor(option: PPrimitiveWaterLayer) {
super(option.name);
this.cesiumObj = new Cesium.PrimitiveCollection();
for (let primitive of option.primitives) {
this.add(primitive);
}
更多参考 https://xiaozhuanlan.com/topic/6541387092
