javascript - Cesium ScreenSpaceEventType LEFT_DOWN 触发 LEFT_CLICK

Question

我正在尝试触发 Cesium ScreenSpaceEventType LEFT_DOWN，但是当我点击一个点时，它会触发 Cesium ScreenSpaceEventType LEFT_DOWN 和 Cesium ScreenSpaceEventType LEFT_UP。我想拖分。但是现在，当我单击一个点并移动鼠标时，该点也会随鼠标一起移动。

我可以禁用点击直到满足某些条件或任何我可以改进它的方式吗请有人指导我。

代码:沙堡 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);
  }
});

Answer 1

您可以使用这段简单的代码来实现拖放操作
https://github.com/wanghongrui/cesium-entity-drag