cesium-dnd's Introduction

cesium-dnd

cesium-dnd makes Cesium entities draggable with less code. Demo

Getting Started

To install:

npm install cesium cesium-dnd
# or
yarn add cesium cesium-dnd

<script src="https://unpkg.com/cesium-dnd@latest/dist/cesium-dnd.umd.js"></script>
<script>
  const viewer = new Cesium.Viewer("cesiumContainer");
  new CesiumDnD(viewer);
</script>

Usage

// Init cesium-dnd
const viewer = new Cesium.Viewer("cesiumContainer");

const cesiumDnD = new CesiumDnD(viewer, { // CesiumWidget is also acceptable
  initialDisabled: false,
  onDrag: (entity, position, context) => {
    // ...
  },
  onDragging: (entity, position, context) => {
    // ...
  },
  onDrop: (entity, position, context) => {
    // ...
  }
});

// Disable drag and drop
cesiumDnD.disable();

// Enable drag and drop
cesiumDnD.enable();

type Context = {
  position?: Cartesian3;
  screenPosition: Cartesian2;
  initialPosition?: PositionProperty;
  initialScreenPosition: Cartesian2;
};

type Position = {
  /** Degrees */
  lat: number;
  /** Degrees */
  lng: number;
  /** Meters */
  height: number;
};

type Options = {
  /** If true, prevent dnd to be automatically enabled. */
  initialDisabled?: boolean;
  /** If false is returned, dragging will not start. */
  onDrag?: (e: Entity, position: Position | undefined, context: Context) => void | boolean;
  /**
   * If undefined is returned, new position will be automatically set to the entity. (default)
   * If false is returned, new position will not be set to the entity.
   * Otherwise, the return value will be set as new position to the entity.
   */
  onDragging?: (
    e: Entity,
    position: Position | undefined,
    context: Context & { previousScreenPosition: Cartesian2 },
  ) => void | false | Cartesian3;
  /**
   * If false is returned, new position will not be set to the entity and position of the entity will be reverted.
   * Otherwise, new position will be automatically set to the entity.
   */
  onDrop?: (e: Entity, position: Position | undefined, context: Context) => void | boolean;
};

License

MIT License

cesium-dnd's People

Contributors

Stargazers

Watchers

cesium-dnd's Issues

test

Sudden move when click an entity

The entity will suddenly move to the position of the cursor, even we don't click at the center of the entity.
I think it will be better if we record the offset between the entity center and click position.

Recommend Projects