i am trying to trigger Cesium ScreenSpaceEventType LEFT_DOWN but when i click on a point it triggers Cesium ScreenSpaceEventType LEFT_DOWN and Cesium ScreenSpaceEventType LEFT_UP. i want to drag points. but right now when i click on a point and move mouse that point also moves along with mouse.
can i disable click untill some condiition is satisfied or any way i can improve it can some one guide me please.
code : sandcastle click here
const viewer = new Cesium.Viewer("cesiumContainer");
var Poly_pointsCollections = [];
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,
],
];
var Poly_nameArray = "straightLine_";
// initial polygons
for (var i = 0; i < 2; i++) {
var temp=Poly_coordiantesArray[i];
for (var j = 0; j < temp.length; j = j + 2) {
draw_Zone_Corner_points(
temp[j],
temp[j + 1],
0
);
}
}
function draw_Zone_Corner_points(lon, lat, name) {
var pointGeometry = viewer.entities.add({
name: "straightLinePoint_",
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 ZoneMoment = true;
// function update() {}
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("_");
console.log("entityName ", entityName[0]);
if (entityName[0] === "straightLinePoint") {
rightEntityPicked = true;
}
if (rightEntityPicked) {
dragging = true;
scene.screenSpaceCameraController.enableRotate = false;
pickedEntity = pickedObject;
}
}
}
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(function (movement) {
if (ZoneMoment && rightEntityPicked && 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;
}
}, Cesium.ScreenSpaceEventType.LEFT_UP);
}
});
You can use this simple piece of code to implement drag and drop in CesiumJS
.
https://github.com/wanghongrui/cesium-entity-drag