Cesium 在点云上拖动点实体

效果：

一、加载点云

//加载点云las文件
const addLas = async () => {
    tileset = viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({ 
            url: 'http://localhost/las/tileset.json',
        })
    );
    tileset.readyPromise.then(() => {
        setTilesStyle();
    })
    viewer.flyTo(tileset)
}

//修改点云样式
const setTilesStyle = () => {
	tileset.style = new Cesium.Cesium3DTileStyle({
        pointSize: 3, //修改点云粒度大小
	});
};

二、绑定鼠标事件

onMounted(() => {
    mouseListeners();
})

//绑定鼠标事件
const mouseListeners = () => {
    handler = new Cesium.ScreenSpaceEventHandler( viewer.scene.canvas );
    mouseRightClick(); //右键点击点云添加实体
    mouseLeftDown();  //左键按下选中实体
    mouseLeftMove();  //移动
    mouseLeftUp();    //左键抬起
}

三、添加点实体

//鼠标右键添加点实体
const mouseRightClick = () => {
    handler.setInputAction((e) => {
        let pick = viewer.scene.pick(e.position); // 获取 pick 拾取对象
        if (Cesium.defined(pick)) {                
            let pickPosition = viewer.scene.pickPosition(e.position);
            //点击点云
            if(pick.primitive.constructor === Cesium.Cesium3DTileset) {
                addPoint(pickPosition);    //添加点
            }
        }
    },Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}

// 添加点实体
const addPoint = (position) => {
    let pointEntity = viewer.entities.add({
        name: 'point',
        position,
        point : {
            color: Cesium.Color.WHITE,
            pixelSize: 8,
            outlineColor: Cesium.Color.fromCssColorString("#FF8000"),
            outlineWidth: 5,
        },
   });
   //存点实体
   pointEntityArr.push(pointEntity);
}

四、拖动实体

let curEntity = null; //选中的实体

//鼠标左键按下
const mouseLeftDown = () => {
    handler.setInputAction((e) => {
        let pick = viewer.scene.pick(e.position); // 获取 pick 拾取对象
        if (Cesium.defined(pick)) {                
            //点击点实体
            if(pick.id) {
                curEntity = pick.id;
                viewer.scene.screenSpaceCameraController.enableRotate = false; // 将相机锁定，不然后续移动实体时相机也会动
			    viewer.scene.screenSpaceCameraController.enableZoom = false;//禁止缩放
            }
        }
    },Cesium.ScreenSpaceEventType.LEFT_DOWN);
}

//鼠标移动
const mouseLeftMove = () => {
    handler.setInputAction((e) => {
        if(curEntity && e.endPosition) {
            let position = viewer.scene.pickPosition(e.endPosition); //判断该位置是否能获取到模型坐标,防止拖出模型外
            if(position) {
                curEntity.position._value = position;
            }
        }
    },Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}

//鼠标抬起
const mouseLeftUp = () => {
    handler.setInputAction((e) => {
        curEntity = null;
        viewer.scene.screenSpaceCameraController.enableRotate = true; 
		viewer.scene.screenSpaceCameraController.enableZoom = true;
    },Cesium.ScreenSpaceEventType.LEFT_UP);
}