首页 / Cesium / 使用示例
拖动建筑改变位置
选中、拖动、落位,是三维编辑最基本的动作链。三个鼠标事件加一次投影就够了。
源码与运行效果
这个示例在做什么
按住任意一栋建筑拖动,它就跟着光标在地面上移动,松手后停在新的位置。 被选中的建筑描边变成黄色,拖动结束后恢复。
拖动分三步:LEFT_DOWN 拾取并记住目标,MOUSE_MOVE 把光标
投影到椭球面得到经纬度并改写实体位置,LEFT_UP 清空选中。
投影用 camera.pickEllipsoid,它不考虑地形起伏,因此在纯色地球上足够准确。
关键接口
| 接口 | 作用 |
|---|---|
camera.pickEllipsoid(pos, ellipsoid) | 把屏幕点投到椭球面,得到地表坐标 |
Cartographic.fromCartesian | 笛卡尔坐标转经纬度 |
box.dimensions.getValue() | 取盒体高度,保持底面对齐地面 |
LEFT_DOWN / MOUSE_MOVE / LEFT_UP | 拖拽三件套事件 |
可以直接改的地方
| 位置 | 改什么 | 效果 |
|---|---|---|
dim.z / 2 | 改成 dim.z | 盒体悬空,不再贴地 |
pickEllipsoid | 换成 scene.pickPosition | 有地形或模型时更精确 |
#ffd166 | 换色 | 选中描边色 |
| 拖动结束后增加吸附逻辑 | 对经纬度取整 | 建筑对齐到网格 |
替代说明:官方示例演示对 3D Tiles 要素的交互选择与变换。
这里用实体盒体承载同样的拖拽流程;要素级别的位移在真实数据里通过改写
modelMatrix 或数据源的变换实现。