Обработка цезия Несколько полигонов с обратным вызовом

Question

я рисую 2 многоугольника, используя метод обратного вызова

Предположим, у меня есть 2 полигона ABC и DEF a. Когда я перетаскиваю углы многоугольника ABC, он работает отлично. когда я перетаскиваю второй полигон, то есть я перетаскиваю DEF, тогда ABC исчезает, а DEF остается.

если у меня есть 3 полигона, когда я перетаскиваю углы 3-го полигона, первый и второй полигоны исчезают.

вот код замка из песка , кликни по мне

может кто-нибудь помочь мне, что я делаю неправильно, вот мой код ....

      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. изначально, когда полигон рисуется, я изменил его на статический полигон.
2. При щелчке правой кнопкой мыши я получаю этот объект, удаляю его и воссоздаю динамический многоугольник, такой же, как статический, но с использованием обратного вызова. примечание : я не разрешаю одновременное редактирование нескольких полигонов
3. вы можете играть с динамическим полигоном после того, как этот пользователь сохранит полигон, и он преобразуется обратно в статический.
4. Теперь пользователь может нажать на другой полигон и повторить шаг 1.