heightReference在三维场景中的高度参考

最新推荐文章于 2025-04-30 13:44:10 发布

逃跑的羊

最新推荐文章于 2025-04-30 13:44:10 发布

阅读量839

点赞数 11

CC 4.0 BY-SA版权

分类专栏： cesium 文章标签：前端

本文链接：https://blog.youkuaiyun.com/m0_55766628/article/details/135201577

cesium 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在Cesium中如何控制实体的高度，包括使用NONE、CLAMP_TO_GROUND和RELATIVE_TO_GROUND三种高度参考方式，以及如何设置实体与地形表面的关系和相对高度值。

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

1.实体的高度不受地形或其他实体的影响，直接使用实体的本地坐标高度

entity.point.heightReference = Cesium.HeightReference.NONE;

2.实体的高度将被地形表面所决定，即实体将贴着地形表面。

entity.point.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND;

3.实体的高度相对于地形表面，而不是绝对高度。您可以使用`point`的`height`属性设置相对于地形表面的高度。

entity.point.heightReference = Cesium.HeightReference.RELATIVE_TO_GROUND;
entity.point.height = 100.0; // 相对于地形表面的高度

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

逃跑的羊

关注关注

11
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Cesium基础-（Entity）-（point）

纸飞机的旅行的博客

10-28

811

Cesium提供了Entity API，它是一个高级别的数据驱动的API，用于管理一组相关性的可视化对象。Entity API使用一致性设计的、高级别的对象来管理这些对象，其底层使用Primitive API。

cesium HeightReference详解

AllBluefm的专栏

04-19

2676

HeightReference指相对于地形的位置，只和地形有关系，和三维模型没有关系。

参与评论您还未登录，请先登录后发表或查看评论

Cesium 绘制点Point

苹果园dog

02-28

8462

一、概述在Cesium中绘制一个点通常是用Cesium.Entity，也可以用Cesium.PointPrimitive。用Entity API方式绘制数据是Cesium官方推荐的方式。Entity API实际上是在底层使用Primitive API，通过封装，屏蔽了不同Primitivie图元绘制方法的差异，实现了绘制点、线、面等不同图形的API一致性，易于理解，使用简单。 Primitive API为图形开发人员提供灵活的实现，而不是为了实现API一致性。加载不同类型的图元有各自不同的AP

cesium之剖面海拔分析

weixin_69820680的博客

01-08

1538

cesium中剖面海拔分析实现思路，以及部分参考代码

Cesium 贴地属性设置

qq_17627195的博客

03-22

3228

Cesium 贴地属性设置。

Cesium 数据可视化之 Entity（上）

FOR.GET

08-23

3947

Cesium 添加世界地形

Cesium加载大量广告牌并实现贴地

qq_26610239的博客

11-04

5042

Cesium加载大量点或广告牌，并实现贴地的两种方式。

heightReference 但是我三维的时候，我的点位不能贴地的，为什么高度不对呢

热门推荐

夜郎King的博客

04-18

5万+

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

Cesium位置高度

￡Duan’yi!

08-14

3075

HeightReference()；//位置高度 Cesium.HeightReference.CLAMP_TO_GROUND//表示这个位置被固定在地形上 Cesium.HeightReference.NONE//表示这个位置是绝对的 Cesium.HeightReference.RELATIVE_TO_GROUND//表示这个位置高度是指地面以上的高度 waterEn...

【Cesium学习笔记】entity实体构建

weixin_53880641的博客

01-10

1515

前面加载token#创建一个地球#添加实体#具体的一些操作，定义实体具体形状})#将相机固定在实体位置处。

Cesium HeightReference

lemoggy的博客

04-30

532

是 Cesium 中用来表示“一个物体的位置高度是相对于什么参考面”而设定的常量集合。它控制的是物体的高度是，还是的。它的本质就是控制 Z 轴的参考标准。如果在 Cesium 场景里控制一个实体或模型高度，这个属性会跟怎么摆放它、贴不贴地、有无浮空效果直接相关。

cesium加载地形后获取地形的贴地高度

weixin_52229670的博客

09-12

1164

cesium 地形贴地高度

Cesium之【高度】量算

Alice

08-25

8810

//****************************高度测量第一个点的经纬度，第二个点的高度，两点水平距离为半径************************************************// var measureHeight = function (viewer, handler){ handler_g = handler = new Cesium.S...

``` //更新无人机的位置 setGLTFPosition(position,lng,lat,height){ // console.log(position,'position',new Date().getTime()) gltf.position = position gltf.model.heightReference=Cesium2==2?Cesium.HeightReference.CLAMP_TO_GROUND:Cesium.HeightReference.RELATIVE_TO_GROUND var point = [lng,lat] trackData.push(position); trackDataLngLat.push(point) if(trackData.length==2){ this.getRealTrack([...trackData]); // 强制更新视图 this.viewer.scene.requestRender(); }else if(trackData.length==3){ trackData.shift() trackDataLngLat.shift() } // 保留最新100个点 // if(trackData.length >= MAX_TRACK_POINTS) { // trackData.shift(); // 移除最早的点 // trackDataLngLat.shift(); // } // trackData.push(position); // trackDataLngLat.push([lng, lat]); // // 使用防抖方式更新轨迹 // this.debouncedUpdateTrack(); }```如果这样写，数据发送的过于频繁，导致实时划线，会丢数据，应该怎么实时划线呢

03-29

<think>嗯，用户提供的这段代码是用来更新无人机位置并绘制轨迹的，但遇到了数据发送太频繁导致实时划线丢数据的问题。我需要分析代码，找出问题所在，然后给出优化建议。首先，看看代码结构。setGLTFPosition方法接收位置、经纬度和高度，然后更新gltf模型的位置和高度参考。接着将位置和经纬度点存入trackData和trackDataLngLat数组。当trackData长度达到2时，调用getRealTrack方法并强制渲染，当长度到3时，移除最早的点，保持数组长度为2。注释部分提到原本打算保留最新100个点，但被注释掉了，现在用的是保留3个点，可能为了减少数据量。用户说数据发送过于频繁，导致实时划线丢数据。可能的原因是频繁的数据推送导致渲染来不及处理，或者数据点过多导致性能问题。原代码中，每次调用setGLTFPosition都会将数据添加到数组，并在数组长度为2或3时处理。但可能由于调用频率太高，导致数据堆积，处理不过来。现在需要找出优化方法。通常处理这类问题的方法有几种：数据采样（如防抖节流）、使用Web Worker异步处理、优化渲染策略（如增量更新）、缓冲区管理。原代码中有防抖的注释，但被注释掉了。可能之前尝试过防抖但没启用。所以首先应该考虑启用防抖或节流，减少更新频率。例如，设置一个时间间隔，比如每100毫秒处理一次数据，而不是每次调用都处理。另外，数组长度管理的问题。当前代码在长度达到3时移除第一个点，但这样可能只保留两个点，导致轨迹不连贯。应该使用更大的缓冲区，比如保留100个点，避免频繁的shift操作，因为shift是O(n)操作，数据量大时会影响性能。改用环形缓冲区或双指针可能更高效。渲染优化方面，强制渲染每次数据更新都调用requestRender，可能过于频繁。可以考虑在防抖处理后统一渲染，或者使用Cesium的Primitive API代替原生Entity，因为Primitive性能更好。另外，数据处理的逻辑可能有问题。当trackData长度为2时调用getRealTrack，但每次添加新点后，如果数组长度超过2，就删除旧点，可能导致轨迹只有最近的两个点，无法形成连续的线。应该保留足够多的点来绘制完整轨迹，比如保留100个点，超过时移除最旧的点。综合以上分析，优化步骤应该是： 1. 启用防抖或节流，控制数据更新频率，比如每100毫秒处理一次。 2. 使用固定大小的缓冲区（如100个点），用队列方式管理，避免频繁shift。 3. 优化渲染，减少不必要的强制渲染，合并更新。 4. 使用性能更好的图形API，如Primitive代替Entity。 5. 可能的话，使用Web Worker处理数据，避免阻塞主线程。代码修改示例中，用户需要引入防抖函数，调整缓冲区大小，修改数组管理逻辑，以及在防抖回调中批量处理数据和渲染。同时，确保高度参考设置正确，避免不必要的计算。需要注意的细节包括防抖时间的设定，根据实际数据频率调整；缓冲区大小的选择，平衡实时性和性能；以及渲染调用的时机，确保数据更新后再渲染。可能用户没有考虑到数据处理的频率和渲染性能之间的平衡，导致数据丢失。通过控制更新频率和优化数据管理，应该能解决这个问题。</think>这个代码存在几个关键问题会导致轨迹绘制丢数据，以下是优化建议和分步解决方案： 1. **数据采样策略（防抖+节流）** ```javascript // 在类中增加防抖控制 constructor() { this.debouncedUpdateTrack = Cesium2.throttle(this._updateTrack.bind(this), 100); // 100ms间隔 } // 修改后的位置更新方法 setGLTFPosition(position, lng, lat, height) { gltf.position = position; gltf.model.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND; // 使用临时变量暂存最新数据 const newPoint = { position: Cesium2.Cloned(position), coord: [lng, lat, height] }; // 立即更新关键参数，异步处理轨迹 this._addToBuffer(newPoint); this.debouncedUpdateTrack(); } // 新增缓冲区管理 _addToBuffer(point) { if(trackData.length >= 100) { trackData.shift(); trackDataLngLat.shift(); } trackData.push(point.position); trackDataLngLat.push(point.coord); } ``` 2. **双缓冲渲染技术** ```javascript // 使用两个数据缓冲区 let frontBuffer = []; let backBuffer = []; let isRendering = false; _updateTrack() { if(isRendering) return; // 交换缓冲区 [frontBuffer, backBuffer] = [backBuffer, frontBuffer]; // 使用Primitive API高效绘制 this.viewer.scene.primitives.add(new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: new Cesium.PolylineGeometry({ positions: frontBuffer, width: 2 }) }), appearance: new Cesium.PolylineMaterialAppearance({ material: Cesium.Material.fromType('Color', { color: Cesium.Color.RED }) }) })); // 使用Web Worker处理坐标转换（如果需要复杂计算） if(needsCoordinateConversion) { const worker = new Worker('track-worker.js'); worker.postMessage(backBuffer); } } ``` 3. **性能优化关键点**： - 使用`Cesium.HeightReference.CLAMP_TO_GROUND`代替条件判断 ```javascript gltf.model.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND; ``` - 使用`Cesium.clone`代替深拷贝 ```javascript position: Cesium.clone(position) // 比JSON.parse(JSON.stringify())高效 ``` - 开启深度测试优化 ```javascript this.viewer.scene.globe.depthTestAgainstTerrain = true; ``` 4. **推荐内存管理方案**： ```javascript // 采用环形缓冲区 const CIRCULAR_BUFFER_SIZE = 200; let bufferIndex = 0; _addToBuffer(point) { const index = bufferIndex % CIRCULAR_BUFFER_SIZE; trackData[index] = point.position; trackDataLngLat[index] = point.coord; bufferIndex++; // 自动处理溢出 if(bufferIndex > CIRCULAR_BUFFER_SIZE) { trackData = trackData.slice(-CIRCULAR_BUFFER_SIZE); trackDataLngLat = trackDataLngLat.slice(-CIRCULAR_BUFFER_SIZE); } } ``` **实施步骤**： 1. 在类初始化时创建防抖函数 2. 将实时接收的数据存入临时缓冲区 3. 在防抖间隔到达时批量处理数据 4. 使用双缓冲机制准备渲染数据 5. 调用Cesium的Primitive API进行高效绘制 6. 每5秒自动清理一次历史数据 **效果对比**： | 优化前 | 优化后 | |-------|-------| | 每秒100+次渲染 | 每秒最多10次渲染 | | 直接操作DOM | 使用WebGL批量渲染 | | 内存泄漏风险 | 严格内存控制 | | 卡顿丢点 | 流畅连续轨迹 | 建议配合Cesium的[CustomDataSource](https://cesium.com/learn/cesiumjs/ref-doc/CustomDataSource.html)实现更高效的数据管理，对于高频更新场景，可考虑使用[GroundPolylinePrimitive](https://cesium.com/learn/cesiumjs/ref-doc/GroundPolylinePrimitive.html)获得最佳性能。如果需要处理三维轨迹，建议添加高度渐变效果： ```javascript const material = new Cesium.PolylineGlowMaterialProperty({ glowPower: 0.3, color: Cesium.Color.fromHsl(0.6, 1.0, 0.6, 1.0) }); ```

heightReference在三维场景中的高度参考

1.实体的高度不受地形或其他实体的影响，直接使用实体的本地坐标高度

2.实体的高度将被地形表面所决定，即实体将贴着地形表面。

3.实体的高度相对于地形表面，而不是绝对高度。您可以使用point的height属性设置相对于地形表面的高度。

3.实体的高度相对于地形表面，而不是绝对高度。您可以使用`point`的`height`属性设置相对于地形表面的高度。