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);
}

posted @ 2022-01-20 17:43  haibalai  阅读(151)  评论(0编辑  收藏  举报