Cesium-移动实体

移动实体

const handlerGE = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
let isMove = fasle; // 记录当前是否有实体在移动
// 鼠标双击进入移动状态
handlerGE.setInputAction(event => {
    // 如果当前已有实体在移动，则停止
    if (isMove) return;
    // 获取双击的实体
    const entity = viewer.scene.drillPick(event.position, 1)[0];
    if (!entity) return;
    isMove = true;
    let diff = []; // 记录选中实体与鼠标位置信息的差异
    let type = null; // 记录选中的实体类型
    let positions = null; // 记录选中实体的位置信息
    let newPosition = null; // 记录鼠标移动的位置
    const position = changeToThree(event.position); // 获取鼠标双击点的位置，并转为世界坐标
    // 根据选中的实体类型获取位置信息
    if (entity.id.polygon) {
        if (!entity.id.polygon.hierarchy?._value) return;
        type = "polygon";
        positions = entity.id.polygon.hierarchy._value.positions;
    } else if (entity.id.polyline) {
        if (!entity.id.polyline.positions?._value) return;
        type = "polyline"
        positions = entity.id.polyline.positions._value;
    };
   	// 记录选中实体与鼠标位置信息的差异
    positions.forEach(item => {
        diff.push({
            x: item.x - position.x,
            y: item.y - position.y,
            z: item.z - position.z,
        });
    });

    // 鼠标移动开始移动实体
    handlerGE.setInputAction(event => {
        // 获取移动点的位置，且将格式转为世界坐标
        const movePosition = changeToThree(event.endPosition);
        // 根据鼠标位置以及选中实体与鼠标位置信息的差异计算出移动后的实体位置
        newPosition = diff.map(item => ({
            x: item.x + movePosition.x,
            y: item.y + movePosition.y,
            z: item.z + movePosition.z,
        }));
        if (type === "polygon") {
            // 动态改变面的位置信息
            entity.id.polygon.hierarchy = new Cesium.CallbackProperty(function() {
                return new Cesium.PolygonHierarchy(newPosition);
            }, false);
            // 动态改变面边框的位置信息
            entity.id.polygon.positions = new Cesium.CallbackProperty(function() {
                return newPosition.concat([newPosition[0]]);
            }, false);
        } else if (type === "polyline") {
            // 动态改变面的位置信息
            entity.id.polygon.positions = new Cesium.CallbackProperty(function() {
                return newPosition;
            }, false);
        };
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

	// 鼠标右键结束移动
	handlerGE.setInputAction(() => {
        // 根据选中的实体类型确认位置信息
        if (type === "polygon") {
            entity.id.polygon.hierarchy = newPosition;
            entity.id.polyline.positions = newPosition.concat([newPosition[0]]);
        } else if (type === "polyline") {
            entity.id.polyline.positions = newPosition;
        };
        // 初始化
        diff = [];
        type = null;
        positions = null;
        isMove = false;
        newPosition = null;
        // 清除鼠标移动监听和点击右键监听
        handlerGE.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        handlerGE.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

// 定义一个将经纬度格式转为世界坐标格式的方法
function changeToThree(position) {
    if (!position) return [];
    return viewer.scene.globe.pick(viewer.camera.getPickRay(position), viewer.scene);
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88