cesium实现水面水流及淹没效果绘制的封装

https://blog.csdn.net/weixin_42496466/article/details/80747565之前写的绘制河流代码比较原生，现在用es6重写封装及项目应用

一、配置数据结构信息

primitivePolygon:{isRLayerPanel: true,primitives:[],url: '/static/data/polygon.json',dataPath: '',dataGeoField: 'positions',dataIdField: 'code',options:{id:'primitivePolygon',name:'水面',isShow: true},location: {"destination":{"x":-2299198.6726013585,"y":4751964.065160188,"z":3584927.7927483744},"orientation":{"heading":5.306048485719572,"pitch":-0.5409977477562071,"roll":6.283156824584358},duration: 2},entityType:'primitive'
}

二、解析代码实现

/*** common create Primitive ** */
export function CommonDrawPrimitiveEntities(data,zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,layerId,PostionsField,IDField){// CommonRemoveEntities(zjnCesium,layersInfo,layerId);let len = data.length;for (let i = 0; i < len; i++) {if (data[i][PostionsField] != null){// let positionsXYZ = Cartesian3.fromDegrees(parseFloat(data[i][LGTDField]), parseFloat(data[i][LTTDField]));// let curID = zjnCesium.viewer.entities.getById(data[i][IDField]);//如果当前实体不存在则绘制// if(curID != undefined){//     continue;// }let waterPrimitive;// let symbol=getLyaerRenderSymbol(LayersRenderSet,layerId,data[i]);// if(symbol==undefined){//     continue;// }let waterc=[]for(let j = 0; j < data[i][PostionsField].length; j++){waterc.push(data[i][PostionsField][j])if(j%2 == 1){waterc.push(203)}}console.log(Cartesian3.fromDegreesArray(data[i][PostionsField]))console.log(Cartesian3.fromDegreesArrayHeights(waterc))waterPrimitive = new Primitive({id:data[i][IDField]||generateUUID(),show: true,// 默认隐藏allowPicking:false,geometryInstances : new GeometryInstance({geometry : new PolygonGeometry({polygonHierarchy : new PolygonHierarchy(Cartesian3.fromDegreesArrayHeights(waterc)),//extrudedHeight: 0,//注释掉此属性可以只显示水面perPositionHeight : true//注释掉此属性水面就贴地了})}),// 可以设置内置的水面shaderappearance : new EllipsoidSurfaceAppearance({material : new Material({fabric : {type : 'Water',uniforms : {//baseWaterColor:new Cesium.Color(0.0, 0.0, 1.0, 0.5),//blendColor: new Cesium.Color(0.0, 0.0, 1.0, 0.5),//specularMap: 'gray.jpg',normalMap: '/static/Textures/waterNormals.jpg',frequency: 1000.0,animationSpeed: 0.01,amplitude: 10.0}}}),fragmentShaderSource: 'varying vec3 v_positionMC;\n' +'varying vec3 v_positionEC;\n' +'varying vec2 v_st;\n' +'void main()\n' +'{\n' +'czm_materialInput materialInput;\n' +'vec3 normalEC = normalize(czm_normal3D * czm_geodeticSurfaceNormal(v_positionMC, vec3(0.0), vec3(1.0)));\n' +'#ifdef FACE_FORWARD\n' +'normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);\n' +'#endif\n' +'materialInput.s = v_st.s;\n' +'materialInput.st = v_st;\n' +'materialInput.str = vec3(v_st, 0.0);\n' +'materialInput.normalEC = normalEC;\n' +'materialInput.tangentToEyeMatrix = czm_eastNorthUpToEyeCoordinates(v_positionMC, materialInput.normalEC);\n' +'vec3 positionToEyeEC = -v_positionEC;\n' +'materialInput.positionToEyeEC = positionToEyeEC;\n' +'czm_material material = czm_getMaterial(materialInput);\n' +'#ifdef FLAT\n' +'gl_FragColor = vec4(material.diffuse + material.emission, material.alpha);\n' +'#else\n' +'gl_FragColor = czm_phong(normalize(positionToEyeEC), material, czm_lightDirectionEC);\n' +'gl_FragColor.a=0.85;\n' +'#endif\n' +'}\n'})});zjnCesium.viewer.scene.primitives.add(waterPrimitive);layersInfo[layerId].primitives.push(waterPrimitive)}}}

三、实现效果

四、厂区洪水淹没应用效果

如果对您有帮助

感谢支持技术分享，请扫码点赞支持：

技术合作交流qq:2401315930

cesium实现水面水流及淹没效果绘制的封装相关推荐

DEJA_VU3D - Cesium功能集之 067-洪水淹没效果
前言编写这个专栏主要目的是对工作之中基于Cesium实现过的功能进行整合,有自己琢磨实现的,也有参考其他大神后整理实现的,初步算了算现在有差不多实现小130个左右的功能,后续也会不断的追加,所以暂时 ...
cesium-添加水面动态贴图效果
cesium-添加水面动态贴图效果介绍真实的水面是动态的,这里可以使用primitives方法来实现效果核心代码 /**** @param {*} targetHeight 目标高度* @par ...
Cesium 1.87+实现建筑泛光效果
Cesium 1.87+实现建筑泛光效果 Cesium 1.87+增加了customShader自定义着色器,实现建筑泛光效果示例代码如下: <!DOCTYPE html><meta ...
在Altium Designer中利用阵列粘贴功能快速绘制元器件封装
在AD中手动绘制元器件封装是经常会有的事情,系统自带的阵列粘贴功能在元器件封装绘制时可以极大地提高工作效率,现在就来演示一下如何使用阵列粘贴功能.首先新建一个元器件封装库. 工具栏中选择File -- ...
Altium Designer Summer 09绘制3D封装库
前言一.AD绘制3D封装库成品图二.Altium Designer Summer 09快捷键 J+C 定位到指定的元件.在弹出的对话框内输入该元件编号 Esc 从当前处理中退出鼠标滚轮 PCB板 ...
AltiumDesigner如何绘制PCB封装
AltiumDesigner如何绘制PCB封装一.为什么要自己画PCB封装? 当我们需要用的一些元器件PCB封装库中找不到的时候,我们就需要自己手动绘制一些元器件的PCB封装.当然也可以选择用相似的 ...
利用AD18绘制PCB封装的方法总结（一）
利用AD18绘制PCB封装的方法总结(一) 提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录利用AD18绘制PCB封装的方法总结(一) 前言 **方法一** 总结前言个 ...
Cesium官方教程8-- 几何体和外观效果
原文地址:https://cesiumjs.org/tutorials/Geometry-and-Appearances/ 几何体和外观效果(Geometry and Appearances) 这篇教 ...
Threejs实现模拟河流，水面水流，水管水流，海面
1,介绍使用Three.js引入Water.js,实现模拟河流水面,水管流水. 效果图如下: 参考案例:three.js webgl - shaders - ocean (threejs.org)h ...
Cesium 实现一个飞机漫游飞行效果
这篇文章给大家分享一个 Cesium 实现的飞机漫游飞行的效果前置准备案例中采用 Vue3 来搭建,还不会搭建 Vue3 脚手架的同学可以看下我之前的文章: Vite2 + Vue3 + Type ...

cesium实现水面水流及淹没效果绘制的封装

感谢支持技术分享，请扫码点赞支持：

cesium实现水面水流及淹没效果绘制的封装相关推荐

最新文章

热门文章