I am having issue with creating Multiply Polygon with callback. for exmaple i have a Triangle with points A,B,C and another triangle D,E,F. When i click on A,B or C polygon ABC appears and DEF disappers. when I click point D,E,F polygon ABC appears and ABC disappers.
When i start application D,E,F polygon is present and A,B,C is disappeared. By the way corners donot disappers only polygon because i am changing coordinates
you will see ``issue here``` in the code. i want to update a specfic polygon from loadedPolyCollection . something like loadedPolyCollection[i]._polygon.._hierarchy._callback() with this method polygon donot change its position when i move a point.
can some one guild me how can i draw multiple polygons here and pass new coordiantes to specfic polygon using callbacks. thank you
… code …
const viewer = new Cesium.Viewer("cesiumContainer");
var scene = viewer.scene;
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" ];
for (var i=0;i<2;i++){
loadPoly(Poly_coordiantesArray[i] , Poly_nameArray[i]);
}
var loadedPolyCollection = [];
var Poly_pointsCollections = []; //Collection of all points at the corners of polygons
var loadedPolyCollection = [];
// draw points at the corners of polygons
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: 2,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
});
Poly_pointsCollections.push(pointGeometry);
}
var coordinates = null;
var selectedPolygonCoordinates = []; // array to save all coordiantes of selected polygon
// adding coordinates of each points With respect to polygon
// if multiple polygon all coordiantes will have differnet names
// for differenciation
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);
}
}
console.log("selectedPolygonCoordinates ", selectedPolygonCoordinates);
}
// function for callback getHierarchy
function getHierarchy() {
return {
positions: coordinates
};
}
// draws polygon
function loadPoly(coordinate, myArray) {
coordinates = new Cesium.Cartesian3.fromDegreesArray(coordinate);
var loadedPoly = viewer.entities.add({
id: "poly_" + myArray,
name: myArray,
polygon: {
hierarchy: new Cesium.CallbackProperty(getHierarchy, false),
material: Cesium.Color.fromBytes(221, 240, 235, 160),
}
});
loadedPolyCollection.push(loadedPoly);
for (var i = 0; i < coordinate.length; i = i + 2) {
draw_Zone_Corner_points(coordinate[i], coordinate[i + 1], myArray);
}
}
// updates the location of each point and then we update coordinates
// in the end it update polygon
function UpdatepolygonWithPts(pickedEntity) {
var NewPos = [];
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);
//console.log("lon+ lat are " + lon + lat);
NewPos.push(lon);
NewPos.push(lat);
var [y, x] = pickedEntity.id._description._value;
// console.log("oldpositionX : ", y);
//console.log("Poly_pointsCollections[i] : ", Poly_pointsCollections[0]._description._value); in
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];
coordinates = new Cesium.Cartesian3.fromDegreesArray(selectedPolygonCoordinates);
}
// mouse click to get an Enitity with specfic name
document.getElementById("cesiumContainer").addEventListener("click", function() {
var rightEntityPicked = false;
var dragging = false;
var pickedEntity;
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(
function(click) {
var pickedObject = scene.pick(click.position);
if (Cesium.defined(pickedObject)) {
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 (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));
}
},
Cesium.ScreenSpaceEventType.MOUSE_MOVE
);
handler.setInputAction(
function() {
if (rightEntityPicked) {
//var cartesian = pickedEntity.id.position.getValue(Cesium.JulianDate.fromDate(new Date()));
//var cartographic = scene.globe.ellipsoid.cartesianToCartographic(cartesian);
dragging = false;
scene.screenSpaceCameraController.enableRotate = true;
// console.log("Picked entity", pickedEntity.id.position.valueOf());
// UpdatepolygonPoints(pickedEntity.id.position._value);
console.log("pickedEntity.id._name ", pickedEntity.id._name);
newArrayForZone(pickedEntity);
UpdatepolygonWithPts(pickedEntity);
//console.log("Picked entity NewPsoition", lon + lat);
}
},
Cesium.ScreenSpaceEventType.LEFT_UP
);
});
i tired in sandcastle but there is a Array.push() Error