i draw 2 polygons using callback method
Consider i have 2 polygons ABC and DEF a. When i dragin corners of ABC polygon it works perfectly. when i drag second polygon i-e i draged DEF then ABC disappers and DEF is there.
if i have 3 polyons when i drag corners of 3rd polygon first and second polygons both disappers.
here is sandcastle code click me
can someone guide me what's am i doing wronge here is my code ....
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
);
}
});
I am still looking for a better answer. for time being I did a long method.