Cesium 通过回调处理多个多边形

Question

我用回调方法画了2个多边形

假设我有 2 个多边形 ABC 和 DEF a。当我拖动 ABC 多边形的角时，它工作得很好。当我拖动第二个多边形时，即我拖动 DEF 然后 ABC 消失并且 DEF 在那里。

如果我有 3 个多边形，当我拖动第 3 个多边形的角时，第一个和第二个多边形都消失了。

这里是沙堡代码click me

谁能指导我我做错了什么这是我的代码....

const viewer = new Cesium.Viewer("cesiumContainer");
var scene = viewer.scene;

var polygonCollection = [];
var Poly_pointsCollections = [];

var Poly_coordiantesArray = [
    [72.35433701166211, 52.57522385967319, 96.18442795152974, 44.89719893727921, 72.39011732046649,
        39.86453159141635
    ],
    [67.29773654341213, 32.88259716109294, 69.14234015976554, 32.98282610463128, 69.19404079866142,
        31.354623867578226, 66.85127436871454, 31.712787322338162, 66.55451189733644, 32.6854597580088
    ]
];
var Poly_nameArray = ["aaaaa", "bbbbb"];

var loadedPolyCollection = [];
for (var i = 0; i < 2; i++) {
    loadPoly(Poly_coordiantesArray[i], Poly_nameArray[i]);
}

var selectionPolygonPoints = [];


var loadedPoly;

function loadPoly(coordinate, myArray) {

    loadedPoly = viewer.entities.add({
        id: "poly_" + myArray,
        name: myArray,
        polygon: {

            hierarchy: new Cesium.CallbackProperty(function() {
                    return {
                        positions: new Cesium.Cartesian3.fromDegreesArray(coordinate)
                    }
                },
                false),

            material: Cesium.Color.fromBytes(221, 240, 235, 160),
        }


    });
    console.log(loadedPoly);
    console.log(loadedPolyCollection);
    loadedPolyCollection.push(loadedPoly);

    console.log("loadedPoly ", loadedPoly);


    for (var i = 0; i < coordinate.length; i = i + 2) {
        draw_Zone_Corner_points(coordinate[i], coordinate[i + 1], myArray);
    }

    viewer.flyTo(loadedPoly);


}



function draw_Zone_Corner_points(lon, lat, name) {

    var pointGeometry = viewer.entities.add({
        name: "Polypoint_" + name,
        description: [lon, lat],
        position: Cesium.Cartesian3.fromDegrees(lon, lat),
        point: {
            color: Cesium.Color.SKYBLUE,
            pixelSize: 10,
            outlineColor: Cesium.Color.YELLOW,
            outlineWidth: 3,
            disableDepthTestDistance: Number.POSITIVE_INFINITY, // we can see points arounds earth
            //heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        },
    });
    Poly_pointsCollections.push(pointGeometry);
}
var selectedPolygonCoordinates = [];

function newArrayForZone(pickedEntity) {

    selectedPolygonCoordinates = [];
    var selected_Entity_Name = pickedEntity.id._name;
    for (var i = 0; i < Poly_pointsCollections.length; i++) {
        var current_Entity_Name = Poly_pointsCollections[i]._name;

        if (current_Entity_Name == selected_Entity_Name) {
            var [y, x] = Poly_pointsCollections[i]._description._value;
            selectedPolygonCoordinates.push(y, x);
        }
    }

}




function UpdatepolygonWithPoints(pickedEntity) {

    var Newpoints = pickedEntity.id.position._value;
    var carto = Cesium.Ellipsoid.WGS84.cartesianToCartographic(Newpoints);
    var lon = Cesium.Math.toDegrees(carto.longitude);
    var lat = Cesium.Math.toDegrees(carto.latitude);

    var [y, x] = pickedEntity.id._description._value;

    for (var i = 0; i < Poly_pointsCollections.length; i++) {
        if (selectedPolygonCoordinates[i] === y) {
            selectedPolygonCoordinates[i] = lon;
        }
        if (selectedPolygonCoordinates[i] === x) {
            selectedPolygonCoordinates[i] = lat;
        }
    }
    pickedEntity.id._description._value = [lon, lat];


    var entityName = pickedEntity.id._name;
    entityName = entityName.split("_");

    for (i = 0; i < loadedPolyCollection.length; i++) {

        if (entityName[1] == loadedPolyCollection[i]._name) {

            var poly_entity = loadedPolyCollection[i];
            console.log("this.loadedPolyCollection[i] ", loadedPolyCollection[i]);
            poly_entity._polygon._hierarchy = new Cesium.CallbackProperty(function() {
                return new Cesium.PolygonHierarchy(new Cesium.Cartesian3.fromDegreesArray(
                    selectedPolygonCoordinates));
            }, false);

        }

    }

}

var ZoneMoment = true;
// Points_DragAndDrop
document.getElementById("cesiumContainer").addEventListener("click", function() {

    if (ZoneMoment) {

        var rightEntityPicked = false;
        var dragging = false;
        var pickedEntity;
        var mouseDroped = false;
        var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction(
            function(click) {
                if (ZoneMoment) {
                    console.log('LEFT down ');
                    var pickedObject = scene.pick(click.position);
                    if (Cesium.defined(pickedObject) && pickedObject.id) {
                        var entityName = pickedObject.id._name;
                        entityName = entityName.split("_");
                        if (entityName[0] === 'Polypoint') {
                            rightEntityPicked = true;
                        }
                        if (rightEntityPicked) {
                            dragging = true;
                            scene.screenSpaceCameraController.enableRotate = false;
                            pickedEntity = pickedObject;
                        }
                    }
                }
            }, Cesium.ScreenSpaceEventType.LEFT_DOWN
        );
        handler.setInputAction(
            function(movement) {
                if (ZoneMoment && dragging) {
                    var cartesian = pickedEntity.id.position.getValue(Cesium.JulianDate
                        .fromDate(
                            new Date()));
                    var cartographic = scene.globe.ellipsoid.cartesianToCartographic(cartesian);
                    var surfaceNormal = scene.globe.ellipsoid.geodeticSurfaceNormal(cartesian);
                    var planeNormal = Cesium.Cartesian3.subtract(scene.camera.position,
                        cartesian,
                        new Cesium
                        .Cartesian3());
                    planeNormal = Cesium.Cartesian3.normalize(planeNormal, planeNormal);
                    var ray = viewer.scene.camera.getPickRay(movement.endPosition);
                    var plane = Cesium.Plane.fromPointNormal(cartesian, planeNormal);
                    var newCartesian = Cesium.IntersectionTests.rayPlane(ray, plane);
                    var newCartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(
                        newCartesian);
                    cartographic.longitude = newCartographic.longitude;
                    cartographic.latitude = newCartographic.latitude;
                    pickedEntity.id.position.setValue(scene.globe.ellipsoid
                        .cartographicToCartesian(
                            cartographic));

                }
                if (dragging) {
                    mouseDroped = true;
                }
            },
            Cesium.ScreenSpaceEventType.MOUSE_MOVE
        );
        handler.setInputAction(
            function() {
                if (ZoneMoment && rightEntityPicked && mouseDroped) {
                    console.log('Left up ');
                    dragging = false;
                    mouseDroped = false;
                    scene.screenSpaceCameraController.enableRotate = true;

                    newArrayForZone(pickedEntity);
                    UpdatepolygonWithPoints(pickedEntity);
                }

            },
            Cesium.ScreenSpaceEventType.LEFT_UP
        );
    }
});

Answer 1

我还在寻找更好的答案。暂时我做了一个很长的方法。

最初绘制多边形时，我将其更改为静态多边形。
右键单击我得到该实体并将其删除并重新创建一个与静态相同但使用回调的动态多边形。注意我不允许同时编辑多个多边形
您可以在用户保存多边形并将其转换回静态后使用动态多边形。
现在用户可以点击其他多边形并重复步骤 1。

Cesium 通过回调处理多个多边形

Cesium handling Multiple polygons with callback

javascript

php

cesium

cesiumjs