干货!解决Cesium中Entity移动漂移的问题

简介: 案例场景:在Cesium开发三维场景展示中,肯定会碰到加载Entity的需求,如果在你的gis应用中,带了地形的展示。那么在旋转切换画面时,Entity是否跟着一起动了起来,感觉像漂移一样呢?

案例场景:在Cesium开发三维场景展示中,肯定会碰到加载Entity的需求,如果在你的gis应用中,带了地形的展示。那么在旋转切换画面时,Entity是否跟着一起动了起来,感觉像漂移一样呢?来看下面两张图,两个点在山脚漂到了山顶:

image.png

图1 漂移到山脚

image.png

图2 漂移到山顶

出现上述情况的原因是因为,Entity未设置贴地,同时未开启地形检测。PS:地形检测的意义就在于开启后,会因为高度不一样,有些地物会不可见,即可解决上述的漂移的问题。

解决方案:

第一步:Cesium开启地形检测

viewer.scene.globe.depthTestAgainstTerrain=true; //默认为false

第二步:Entity中point开启贴地及设置高度

point:newCesium.PointGraphics ( {
show : true,
pixelSize : params.pixelSize||10,
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance:99000000,
color : params.color||newCesium.Color ( 255 , 255 , 0 , 1 ),
outlineColor : params.color||newCesium.Color ( 0 , 0 , 0 , 0 ),
outlineWidth : params.outlineWidth||0,
scaleByDistance : params.scaleByDistance||newCesium.NearFarScalar ( 0 , 1 , 5e10 , 1 ),
translucencyByDistance : params.translucencyByDistance||newCesium.NearFarScalar ( 0 , 1 , 5e10 , 1 ),
distanceDisplayCondition : params.translucencyByDistance||newCesium.DistanceDisplayCondition(0, 4.8e10),
        })

关键代码:

heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance:99000000,

第三步:Entity中lable同样开启贴地及设置高度

代码如下:

label : {
text : params.name,
font : '10pt Source Han Sans CN',    //字体样式fillColor:Cesium.Color.BLACK,        //字体颜色backgroundColor:Cesium.Color.AQUA,    //背景颜色showBackground:true,                //是否显示背景颜色style: Cesium.LabelStyle.FILL,        //label样式outlineWidth : 2,                    
verticalOrigin : Cesium.VerticalOrigin.CENTER,//垂直位置horizontalOrigin :Cesium.HorizontalOrigin.LEFT,//水平位置pixelOffset:newCesium.Cartesian2(10,0),           //偏移disableDepthTestDistance:99000000,
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND        }

注意点:disableDepthTestDistance 这个参数根据当地地形可尽量设置高一点,以免高度不够造成不可见。

最后来看修正后的结果

image.png

 图3 正常未遮挡可见

image.png

图4 点被山体遮挡不可见

image.png

图5 点和标签都被山体遮挡

通过本文可以学习在cesium中如何解决entity漂移的问题。


目录
相关文章
|
8月前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
Cesium系列:加载单个模型
Cesium如何加载单个三维模型数据
555 0
cesium添加实体不被地形遮挡的参数设置
disableDepthTestDistance:指定从相机到禁用深度测试的距离,关于深度测试我们将在后面的文章中介绍到,由于深度测试的存在,我们的对象很多时候会被地形挡住,如下:
2094 0
cesium添加实体不被地形遮挡的参数设置
|
3月前
ThreeJs动态复制物体
这篇文章介绍了如何在Three.js中实现3D物体的动态复制,并提供了通过鼠标操作来复制模型的具体实现方法。
38 1
|
5月前
|
数据可视化 JavaScript 前端开发
Cesium案例解析(五)——3DTilesPhotogrammetry摄影测量3DTiles数据
Cesium案例解析(五)——3DTilesPhotogrammetry摄影测量3DTiles数据
181 0
|
7月前
|
JavaScript 前端开发 算法
Box2D(现在通常称为Box2D.js或者其WebAssembly版本,Emscripten Box2D)是一个流行的2D物理引擎,用于模拟刚体动力学、碰撞检测与响应以及关节约束等物理现象
【6月更文挑战第16天】Box2D.js,基于C++的2D物理引擎,经Emscripten编译为WebAssembly,用于JavaScript游戏中的真实物理模拟,包含碰撞检测和关节约束。它提供高效的碰撞检测,易于扩展和定制物理属性。使用步骤涉及初始化世界、创建刚体、添加碰撞形状、模拟物理及处理碰撞事件。物理引擎虽提升逼真度,但也增加复杂性和性能需求。其他选项如p2.js、matter.js和ammo.js也可供选择。
195 8
|
8月前
|
存储 JavaScript
js中如何求平面两点之间的距离
js中如何求平面两点之间的距离
|
存储 JSON 定位技术
4.Cesium中实体Entity的增删改查及性能优化(超详细)
Cesium 作为一个功能强大的 WebGL 三维地球仪库,内置了丰富的三维地图展示能力。在 Cesium 中,我们可以通过 Entity(实体)在三维场景中添加和控制各种三维对象,如点、线、面、模型等。本文将介绍 Cesium 中实体的增删改查操作。
3062 0
[Nestjs] 使用Typeorm 在实体中根据时间生成随机编码
在日常开发中,我们会遇到很多需要自动生成编码的地方,比如订单号,单据号等。
181 0
|
存储 JSON 数据可视化
3.Cesium中实体Entity创建(超详细)
本文中,我将介绍 Cesium 中创建实体的方法,并对其进行分类,帮助读者快速理解 Cesium 中实体的类别,创建代码以及具体效果;
1221 0

热门文章

最新文章