经纬志
首页 / Cesium / 使用示例

拖动建筑改变位置

选中、拖动、落位,是三维编辑最基本的动作链。三个鼠标事件加一次投影就够了。

CesiumJS 1.121 · 更新 2026-10-28
源码与运行效果
运行效果

这个示例在做什么

按住任意一栋建筑拖动,它就跟着光标在地面上移动,松手后停在新的位置。 被选中的建筑描边变成黄色,拖动结束后恢复。

拖动分三步: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 或数据源的变换实现。