解决Cesium绘制几何图形被高程遮挡问题

本文探讨了Cesium中depthTestAgainstTerrain属性的作用。当设置为true时,标绘将精确地放置在地形顶部,避免被遮挡。然而,此设置可能在图层切换时导致标绘消失的问题。理解这一属性对于实现精确的地理空间可视化至关重要。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

图一

viewer.scene.globe.depthTestAgainstTerrain = true;

图二

viewer.scene.globe.depthTestAgainstTerrain = false;

depthTestAgainstTerrain
设置该属性为true之后,标绘将位于地形的顶部;
如果设为false(默认值),那么标绘将位于平面上。所以被高程地形遮挡。
缺陷:开启该属性有可能在切换图层时会引发标绘消失的bug。
在这里插入图片描述
在这里插入图片描述

### 实现带外轮廓的图形绘制Cesium 中实现带有外轮廓的图形可以通过多种方法完成。其中一种常见的方式是通过创建两个实体来模拟外轮廓效果:一个是填充的颜色较浅的主要形状,另一个是在其外部稍微放大一点并赋予不同颜色作为轮廓。 #### 使用双层几何体的方法 这种方法涉及创建两个相同的几何对象,其中一个稍大一些用于表示轮廓: ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); // 主要图形 (内部) viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-107.0, 40.0), ellipse : { semiMajorAxis : 500000.0, semiMinorAxis : 300000.0, material : Cesium.Color.BLUE.withAlpha(0.5) } }); // 外部轮廓 (较大版本) viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-107.0, 40.0), ellipse : { semiMajorAxis : 502000.0, // 增加宽度形成边框 semiMinorAxis : 302000.0, // 增加高度形成边框 material : Cesium.Color.BLACK // 边框颜色 } }); ``` 此代码片段展示了如何利用椭圆形图元构建具有黑色边缘的效果[^1]。 对于更复杂的自定义外观需求,则可以考虑采用 GLSL 来编写着色器脚本以控制渲染行为。这允许更加精细地调整视觉样式,比如基于像素位置动态改变颜色或透明度等属性。 #### 利用GLSL定制材质 如果希望进一步优化性能或是追求特殊效果的话,可以直接操作底层 WebGL 渲染管线中的顶点/片元着色程序来进行处理。下面是一个简单的例子说明怎样使用 GLSL 定义一个能够区分内外区域的不同色调的圆盘状物体: ```glsl czm_material czm_getMaterial(czm_materialInput materialInput){ czm_material material = czm_getDefaultMaterial(materialInput); vec2 coord = materialInput.st; float distToCenter = length(coord - vec2(0.5)); const float threshold = 0.4; if(distToCenter < threshold){ material.diffuse = vec3(0.0, 0.0, 1.0); // 内圈蓝色 }else{ material.diffuse = vec3(1.0, 1.0, 1.0); // 外环白色 } return material; } ``` 这段 GLSL 片段实现了根据到中心的距离决定应用哪种颜色的功能,在实际项目里可能还需要额外配置纹理坐标以及其他参数才能正常工作[^3]。
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值