使用 javascript 的铯多边形回调

Question

我正在尝试编辑更改编辑或重绘多边形。这是我的代码。错误

An error occurred while rendering.  Rendering has stopped.
TypeError: this._callback is not a function
TypeError: this._callback is not a function

使用 pickedObject.id 我得到了我想要重新定位的 exect 多边形，但是回调问题。

var points = [-95.8079865631313, 30.24038650541154, -
    60.10509002138564, 23.526593580490083, -59.06372427570612, 2.245934026097194, -
    117.00668212362282, 3.938434130034481
];

function loadPoly(points) {

    redPolygon = viewer.entities.add({
        id: "myArray",
        name: "myArray",
        polygon: {
            hierarchy: Cesium.Cartesian3.fromDegreesArray(points),
            material: Cesium.Color.fromBytes(221, 240, 235, 160)
        }
    });
    polygonCollection.push(redPolygon);

    adding_billboard(-95.8079865631313, 30.24038650541154, "A", "-95.8079865631313, 30.24038650541154");
    adding_billboard(-60.10509002138564, 23.526593580490083, "A", "-60.10509002138564, 23.526593580490083");
    adding_billboard(-59.06372427570612, 2.245934026097194, "A", "-59.06372427570612, 2.245934026097194");
    adding_billboard(-117.00668212362282, 3.938434130034481, "A", "-117.00668212362282, 3.938434130034481");

    viewer.flyTo(redPolygon);

}

function adding_billboard(lon, lat, name, popup) {
    var entity = viewer.entities.add({

        name: name,
        position: Cesium.Cartesian3.fromDegrees(lon, lat, 2000),
        billboard: {
            image: 'https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png',
            show: true, // default
            pixelOffset: new Cesium.Cartesian2(0, -20), // default: (0, 0)
            eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
            horizontalOrigin: Cesium.HorizontalOrigin.bottom, // default               
            alignedAxis: Cesium.Cartesian3.ZERO, // default
            width: 20, // default: undefined
            height: 25, // default: undefined
            //disableDepthTestDistance: Number.POSITIVE_INFINITY, // draws the label in front of terrain
            // on ground show


        },
        label: {
            text: popup,
            font: "7pt sans-serif",
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            verticalOrigin: Cesium.VerticalOrigin.BASELINE,
            fillColor: Cesium.Color.BLACK,
            showBackground: true,
            backgroundColor: new Cesium.Color(1, 1, 1, 0.7),
            backgroundPadding: new Cesium.Cartesian2(8, 4),
            disableDepthTestDistance: Number
                .POSITIVE_INFINITY, // draws the label in front of terrain
        },

    });
    pointsCollection.push(entity);
}

var coordinates = [76.82071632075994, 33.4134542888633, 77.83750798568438, 33.39276536442791, 77.32892923803021,
    32.93547457354476
];

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function(click) {

    var pickedObject = scene.pick(click.position);
    if (Cesium.defined(pickedObject)) {

        console.log("Second ");
        console.log("pickedObject.id.id ", pickedObject.id.id);
        console.log("pickedObject.id.name ", pickedObject.id.name);
        console.log("pickedObject.id..polygon.hierarchy ", pickedObject.id.polygon.hierarchy.valueOf());
        var data = pickedObject.id.polygon.hierarchy.valueOf();
        console.log("data ", data.positions.valueOf());
        pickedObject.id.polygon = {
            hierarchy: new Cesium.CallbackProperty(new Cesium.Cartesian3.fromDegreesArray(coordinates),
                false),
            material: Cesium.Color.fromBytes(221, 240, 235, 160)
        
        //pickedObject.id = redPolygon;// tried this but dailed due to same id then i removed it.
        if (pickedObject.id.name == 'C') {
            // $('#modal-activity').modal('show');
        }
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

我想将多边形转移到其他坐标，但无法正确使用回调，有人可以告诉我该怎么做吗？我做了一些 google 搜索，如下所示，但我的问题没有解决。

在这里，我试图使多边形点动态化，但线在塔林中消失了。第一次在移动点消失后没问题。 https://sandcastle.cesium.com/?#c=zVTRbpswFP2VK14gEjMhWTaJ0Whd0odpnVpl0vZQ+uDCTWvN2Mg2yVjVf5/BkKRZ1VV9mnjhHp9zfH2uYUMVbBhuUcEJCNzCAjWrS/K9wwI/78qFFIYygcoffchE+2ysDoVhpomt0DmQDmCoCS2K4D4TAKxIwP+8jP2wrQQtESywwgLOOGeVRpACdK3WNEfHqaS2HlIkMLSyoMrYNyqmZK1kucRbhaiDN3E8I+MQpu/JeNRLmTAJdBvbiv1C/o39xgSm49BhueRSJTvjtiKrs2W/KmvD7SEXT5A+nZ8uvjym/WCFuUsgJrMWfsjEg8tmn8zkBclMXpPMP4N52wXz7v8Lpl1/LpVK8qbl7JvtD62Tw9t52aOXSlaoTHOqFG2CKyeBQ+YK16hQ5DhQg6O9w/5+whX4w2Y+XMMofLXb5Am3wex677t1Oc12QEkNKkb50VFdIhcu3K89Z9fA/aB+foQvHuLxGCdujHaQo8NxeqGXatNwnLvVj6yspDJQKx4QEhksK25b1dFNnf9EQ3KtW1kaDaK0YBv7EZxk3tEvJvMg51Rru7KueXdRM2+eRpb/SMYlLZi4vdig4rRpKXfx/NyBhJA0suXfKiMlv6HqwPEP

秒：Dynamically change polygon position in cesium

它也给出错误，因为我不知道在哪里使用回调。请引导我。谢谢。

Answer 1

这里是Sandcastle link。

const {
    Cartesian3,
    CallbackProperty,
    Color,
    defined,
    ScreenSpaceEventHandler,
    ScreenSpaceEventType,
    Viewer
} = window.Cesium;

const viewer = new Viewer("cesiumContainer");

let redPolygon;
const polygonCollection = [];
const pointsCollection = [];
const polygonId = "myArray";

let polygonPoints = [
    -95.8079865631313, 30.24038650541154, -60.10509002138564, 23.526593580490083, -59.06372427570612,
    2.245934026097194, -117.00668212362282, 3.938434130034481
];

function loadPoly() {
    redPolygon = viewer.entities.add({
        id: polygonId,
        name: "myArray",
        polygon: {
            hierarchy: new CallbackProperty(() => {
                return {
                    positions: Cartesian3.fromDegreesArray(polygonPoints)
                };
            }, false),
            material: Color.fromBytes(221, 240, 235, 160)
        }
    });

    polygonCollection.push(redPolygon);

    adding_billboard(-95.8079865631313, 30.24038650541154, "A", "-95.8079865631313, 30.24038650541154");
    adding_billboard(-60.10509002138564, 23.526593580490083, "A", "-60.10509002138564, 23.526593580490083");
    adding_billboard(-59.06372427570612, 2.245934026097194, "A", "-59.06372427570612, 2.245934026097194");
    adding_billboard(-117.00668212362282, 3.938434130034481, "A", "-117.00668212362282, 3.938434130034481");

    viewer.flyTo(redPolygon);
}

function adding_billboard(lon, lat, name, popup) {
    const entity = viewer.entities.add({
        name: name,
        position: Cartesian3.fromDegrees(lon, lat, 2000),
        billboard: {
            image: "https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png",
            show: true, // default
            pixelOffset: new Cesium.Cartesian2(0, -20), // default: (0, 0)
            eyeOffset: new Cartesian3(0.0, 0.0, 0.0), // default
            horizontalOrigin: Cesium.HorizontalOrigin.bottom, // default
            alignedAxis: Cesium.Cartesian3.ZERO, // default
            width: 20, // default: undefined
            height: 25 // default: undefined
            //disableDepthTestDistance: Number.POSITIVE_INFINITY, // draws the label in front of terrain
            // on ground show
        },
        label: {
            text: popup,
            font: "7pt sans-serif",
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            verticalOrigin: Cesium.VerticalOrigin.BASELINE,
            fillColor: Color.BLACK,
            showBackground: true,
            backgroundColor: new Color(1, 1, 1, 0.7),
            backgroundPadding: new Cesium.Cartesian2(8, 4),
            disableDepthTestDistance: Number.POSITIVE_INFINITY // draws the label in front of terrain
        }
    });

    pointsCollection.push(entity);
}

loadPoly();

const scene = viewer.scene;
const handler = new ScreenSpaceEventHandler(scene.canvas);

handler.setInputAction(function (click) {
    const pickedObject = scene.pick(click.position);

    if (defined(pickedObject) && pickedObject.id && pickedObject.id.id === polygonId) {
        const newPolygonPoints = [
            76.82071632075994, 33.4134542888633, 77.83750798568438, 33.39276536442791, 77.32892923803021,
            32.93547457354476
        ];

        polygonPoints = newPolygonPoints;

        viewer.camera.flyTo({
            destination: Cartesian3.fromDegrees(76.82071632075994, 33.4134542888633, 1000)
        });
    }
}, ScreenSpaceEventType.LEFT_CLICK);

使用 javascript 的铯多边形回调

Cesium polygon callback using javascript

javascript

cesium

cesiumjs