javascriptcesiumjs

Cesium ScreenSpaceEventType LEFT_DOWN trigger LEFT_CLICK


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);
  }
});

Solution

  • You can use this simple piece of code to implement drag and drop in CesiumJS.
    https://github.com/wanghongrui/cesium-entity-drag