Cesium中的pick

参考地址–cesium 中的cpupick 和 gpupick

  • 总结:

    • pick ray 射线是利用场景求交集,cpupick,所以可以每次把不需要的mesh 给排除
    • scene pick 基于canvas 二维反算 三维世界坐标的是gpupick 效率会更高
### Cesium 多选功能的实现方法 在 Cesium 中,多选功能通常依赖于离屏渲染技术和特定的颜色编码来识别被点击的对象。为了实现在三维场景中的多选操作,可以采用拖拽选择框的方式,在此过程中动态计算并高亮显示位于选择区域内的实体。 对于 Cesium 的多选机制而言,颜色缓存起到了至关重要的作用[^2]。当用户绘制了一个矩形或其他形状的选择范围时,程序会创建一个新的画布用于捕捉该区域内所有可见物体的颜色信息。由于每个可交互对象都被赋予了一种独一无二的颜色作为其标识符,因此可以根据这些特殊色彩反推出哪些模型处于当前鼠标划定的边界之内。 下面是一个简单的 JavaScript 代码片段展示如何利用 `viewer.scene.pickPositionSupported` 和自定义事件监听器完成基本的多选逻辑: ```javascript // 初始化Cesium Viewer实例 const viewer = new Cesium.Viewer('cesiumContainer'); let selectionBox; let selectedEntities = []; function startSelection() { const canvas = viewer.canvas; // 开始绘制选择框 let startX, startY; function onMouseDown(event) { startX = event.clientX; startY = event.clientY; // 创建半透明的选择框 selectionBox = document.createElement('div'); Object.assign(selectionBox.style, { position: 'absolute', pointerEvents: 'none', border: '1px dashed white', backgroundColor: 'rgba(255, 255, 0, 0.3)', zIndex: 1, }); document.body.appendChild(selectionBox); } function onMouseMove(event) { if (!selectionBox) return; const endX = Math.min(startX, event.clientX), endY = Math.min(startY, event.clientY); selectionBox.style.left = `${endX}px`; selectionBox.style.top = `${endY}px`; const width = Math.abs(event.clientX - startX), height = Math.abs(event.clientY - startY); selectionBox.style.width = `${width}px`; selectionBox.style.height = `${height}px`; } function onMouseUp(event) { if (selectionBox) { selectEntitiesWithinBounds(); // 清理DOM节点 document.body.removeChild(selectionBox); selectionBox = null; } } canvas.addEventListener('mousedown', onMouseDown); canvas.addEventListener('mousemove', onMouseMove); canvas.addEventListener('mouseup', onMouseUp); } startSelection(); async function selectEntitiesWithinBounds() { const entities = []; const boundingRectangle = getBoundingRectFromSelectionBox(); await Promise.all( viewer.entities.values.map(async entity => { if (entity.position && isEntityInBoundingBox(entity, boundingRectangle)) { entities.push(entity); // 高亮所选实体 highlightSelectedEntity(entity); } }) ); console.log(`Selected ${entities.length} entities`); } ``` 上述脚本实现了基于鼠标的拖动动作来进行批量选取的功能,并且能够实时更新已选定的目标列表。需要注意的是,实际应用中可能还需要考虑性能优化以及更复杂的碰撞检测算法等问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Webgiserin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值