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

最新推荐文章于 2025-07-02 08:42:21 发布
原创 最新推荐文章于 2025-07-02 08:42:21 发布 · 1.4w 阅读 · 22 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#cesium #标绘 #高程

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

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

图一

viewer.scene.globe.depthTestAgainstTerrain = true;

图二

viewer.scene.globe.depthTestAgainstTerrain = false;

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

Cesium 问题：对于物体被遮挡
虎康的博客
05-17 356
因为是模型整体的上的部分部件，因此如果想要看到全貌，应该翻转视角，模型整体的上的部分部件，在视角飞入时，展示不全全貌。
009：vue+cesium 绘制圆形
大剑师兰特的GIS世界
02-27 980
第009个本示例的目的是介绍如何在vue+cesium中绘制圆形。
Cesium高程遮挡
我有一只小松鼠
06-27 7151
在Cesium添加地形后，绘制的线实体有被地形遮挡的感觉（看起来断断续续的），后来发现把高程遮挡关闭就可以了 //为false时，没有高程遮挡效果 viewer.scene.globe.depthTestAgainstTerrain = false; //为true时，有高程遮挡效果 viewer.scene.globe.depthTestAgainstTerrain = true; 相...
Cesium 绘制线条/图形被地形高程遮挡的问题
qq_17627195的博客
06-04 7558
图一： 图片中点1和点2之间是一条线，但是现在这条线有部分被遮挡了（图形的话也是一样的） 图二： 图片中的线是图一的完整正情况。 原因分析： depthTestAgainstTerrain 属性的设置问题。属性为true之后，相对于地形表面绘制，所以有地形的时候，会被地形的高程遮挡；如果设为false（默认值），那么将始终在顶部绘制。 // 相对于地形表面绘制 viewer.scene.globe.depthTestAgainstTerrain = true; // 始终在顶部绘制（默认） viewer
解决Cesium中Billboard与地形压盖问题
最新发布
lanlande289的博客
07-02 191
Cesium加载billboard时存在高度压盖问题，可通过HeightReference参数调整显示方式。该参数提供7种基准参考模式：NONE（独立高度）、CLAMP_TO_GROUND（贴地/模型）、RELATIVE_TO_GROUND（离表面指定高度）、CLAMP_TO_TERRAIN（仅贴地）、RELATIVE_TO_TERRAIN（离地指定高度）、CLAMP_TO_3D_TILE（贴建筑）、RELATIVE_TO_3D_TILE（离建筑指定高度）。代码示例展示了使用RELATIVE_TO_GROU
cesium 叠加多个图层时 解决图层有遮挡覆盖问题
yechangfeng111的博客
11-26 9738
Cesium 图层被遮挡，设置图层显示顺序 layerindex
Cesium billboard被遮挡
资深三维GIS开发
09-04 9841
添加这个属性即可：disableDepthTestDistance=Number.POSITIVE_INFINITY; 目前1.64版本之后，添加这个深度检测之后，会导致相机的缩放出现问题，还在关注官方的解决办法中。。 ...
cesium 文本标注被遮挡_Cesium-知识点（Viewer）
weixin_29166013的博客
01-13 1024
var viewer = new Cesium.Viewer('cesiumContainer'); viewer._cesiumWidget._creditContainer.style.display="none"; 实例核心代码 //资源访问令牌 Cesium token Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cC...
Cesium 在绘制带有箭头的线时，出现绘制不完整情况
虎康的博客
08-27 786
depthTestAgainstTerrain 属性的设置问题。如图所示，在绘制带有箭头的线时，出现绘制不完整情况。
cesium 1.116版本地形和实体共同夸张问题
liubangbo的专栏
07-23 696
cesium 1.116版本 采用 viewer.scene.verticalExaggeration = 10 来进行地形夸张，而去掉了之前的viewer.scene.globe.terrainExaggeration = 10 但会导致地形和实体一同进行夸张，例如在地球上加载一个glb格式的实体，就会被一同夸张。1. 在cesium 112 版本(还是之前的terrainExaggeration接口）基础上把需要的116版本新特性PR相关的commit合入。
cesium 局部加载_Cesium（四）常用代码总结
weixin_39715834的博客
12-19 1650
1、阴影效果viewer.shadows = true;2、取消左键双击事件viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);3、定位飞到某处viewer.scene.camera.flyTo({ destination: rect...
QCustomplot 层 (七)
独旅天涯
09-09 1365
一、分层绘制 一直说要讲2.0.0版本，但总是想把1.3.2版本拿出来比较一下，这篇文章也不例外。QCustomPlot2.0.0beta版本比1.3.2release版本有一个很大的改进那就是分层绘制，所谓分层绘制就是把一张图分几张图来绘制，最后在把这分开的几张图统一绘制到一张图上，比如一张图A，需要分开成3张图B、C和D来绘制，当图A需要重新绘制时，我们一次判断B、C和D是否需要重新绘制，如果不需要绘制的我们直接把图贴到A上，那就很大的减少了重新绘制的时间，而这部分时间其实是没有必要花费的。 ...
Cesium Label 被建筑物遮挡问题
apgk的博客
06-10 3380
Cesium Label 遮挡问题
Cesium2D模式下绘制问题
baidu_41564215的博客
03-02 1238
2D模式下pickPosition开启了地形检测也无法绘制问题
cesium获取坐标及高程
weixin_30377461的博客
05-31 4674
1、获取entity坐标及高程 var cartographic = Cesium.Cartographic.fromCartesian(entity.position.getValue()); var lon = Cesium.Math.toDegrees(cartographic.longitude); var lat = Cesium.Math.toDegrees(...
cesium 文本标注被遮挡_Cesium中Primitive讲解
weixin_39718460的博客
01-26 2229
前面介绍了entity方式绘制对象，现在我们开始接触primitive方式，primitive方式更接近渲染引擎底层，由于我对webgl知之甚少，因此primitive接口我现在也是一知半解，写这个博客我参考了这一篇博客Cesium(三) 几何图形与外观。(https://blog.youkuaiyun.com/happyduoduo1/article/details/51868042)1、Primitive...
cesium模型不遮挡点线面_Cesium-空间分析之通视分析(附源码下载)
weixin_28998761的博客
01-05 1893
CesiumCesium 是一款面向三维地球和地图的，世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。通视分析通视分析是指以某一点为观察点，研究某一区域通视情况的地形分析。利用DEM判断地形上任意两点之间是否可以互相可见的技术方法，分为视线通视分析和可视...
Cesium 解决primitive相互遮挡问题
As_Xx_Ls的博客
07-24 2665
在做Cesium时，添加了一个面和一个城市的边界，后来发现添加的面总是遮住了边界线。在添加时候找配置想设置有关z-index的配置并没有找到。后来知道这个显示层级是根据前后添加的顺序决定的。后添加的primitive就在上层。另外还有一个raiseToTop方法可以直接将某个primitive置于顶层。（如果没有效果尝试开启深度测试）
cesium分别绘制多边形与点，并且为其添加lable标签。解决绘制后出现的地形遮挡问题
不染-9732
03-27 2947
cesium分别绘制多边形与点，并且为多边形和点添加lable标签。解决绘制后出现的地形遮挡问题
cesium绘制的图形外轮廓
12-27
### 实现带外轮廓的图形绘制 在 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、付费专栏及课程。

余额充值