cesium 图层构建的那些事 （十五）

有了上一章说Primiteve图层 我们就可以定义丰富数据图层

比如我们定义水面 图层
先定义水面图层参数定义

• export interface PWaterPrimitives{
• id: string,
• source: Array<number>,
• 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<PWaterPrimitives>
• }

水面图层
``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