useGraphicEvent

Handle graphic event listeners and cursor styles for Cesium graphics. You don't need to overly worry about memory leaks from the function, as it automatically cleans up internally.

Usage

<script setup lang="ts">
import * as Cesium from 'cesium';
import { useEntity, useGraphicEvent, useViewer } from 'vesium';
import { watchEffect } from 'vue';
import { canvasCoordToCartesian, toProperty } from '../utils';

const viewer = useViewer();

watchEffect(() => {
  viewer.value?.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(150, 12.5, 9000000),
  });
});

const { addGraphicEvent } = useGraphicEvent();

// =========[CLICK]============
useEntity(() => {
  const entity = new Cesium.Entity({
    position: Cesium.Cartesian3.fromDegrees(140, 10),
    point: { pixelSize: 15 },
    label: {
      font: '14px sans-serif',
      pixelOffset: new Cesium.Cartesian2(0, 20),
      text: 'CLICK ME',
    },
  });
  addGraphicEvent(
    entity,
    'LEFT_CLICK',
    (_params) => {
      const color = new Cesium.ConstantProperty(Cesium.Color.RED);
      entity!.point!.color = color;
      entity!.label!.fillColor = color;
      entity!.label!.text = new Cesium.ConstantProperty('CLICKED');
    },
  );
  return entity;
});

// =========[HOVER]============
useEntity(() => {
  const entity = new Cesium.Entity({
    position: Cesium.Cartesian3.fromDegrees(150, 10),
    point: { pixelSize: 15 },
    label: {
      font: '14px sans-serif',
      pixelOffset: new Cesium.Cartesian2(0, 20),
      text: 'HOVER ME',
    },
  });
  addGraphicEvent(
    entity,
    'HOVER',
    (params) => {
      const color = params.hovering ? Cesium.Color.RED : undefined;
      entity!.point!.color = toProperty(color);
      entity!.label!.fillColor = toProperty(color);
      entity!.label!.text = toProperty(params.hovering ? 'HOVERING' : 'HOVER ME');
    },
  );
  return entity;
});

// =========[DRAG]============
useEntity(() => {
  const entity = new Cesium.Entity({
    position: Cesium.Cartesian3.fromDegrees(160, 10),
    point: { pixelSize: 15 },
    label: {
      font: '14px sans-serif',
      pixelOffset: new Cesium.Cartesian2(0, 20),
      text: 'DRAG ME',
    },
  });

  addGraphicEvent(
    entity,
    'DRAG',
    (params) => {
      const color = params.dragging ? Cesium.Color.RED : undefined;
      entity!.point!.color = toProperty(color);
      entity!.label!.fillColor = toProperty(color);
      entity!.label!.text = toProperty(params.dragging ? 'DRAGGING' : 'DRAG ME');
      // lock camera
      params.dragging && params.lockCamera();

      // update position
      const position = canvasCoordToCartesian(params.event.endPosition, viewer.value!.scene);
      if (position) {
        entity!.position = new Cesium.CallbackPositionProperty(() => position, false);
      }
    },
  );
  return entity;
});
</script>

<template>
  <div />
</template>

const { addGraphicEvent } = useGraphicEvent();

addGraphicEvent(primitive, 'LEFT_CLICK', (params) => {});

addGraphicEvent(entity, 'DRAG', (params) => {});

addGraphicEvent(dataSource, 'DRAG', (params) => {});

addGraphicEvent('global', 'DRAG', (params) => {});

Type Definitions

import type { Entity } from 'cesium';
import type { Nullable } from '../utils';
import type { GraphicDragEvent } from './useDrag';
import type { GraphicHoverEvent } from './useHover';
import type { GraphicPositionedEvent, PositionedEventType } from './usePositioned';
export type CesiumGraphic = Entity | any;
export type GraphicEventType = PositionedEventType | 'HOVER' | 'DRAG';
export type GraphicEventListener<T extends GraphicEventType> = T extends 'DRAG' ? (event: GraphicDragEvent) => void : T extends 'HOVER' ? (event: GraphicHoverEvent) => void : (event: GraphicPositionedEvent) => void;
export type RemoveGraphicEventFn = () => void;
export interface AddGraphicEventOptions {
    /**
     * The cursor style to use when the mouse is over the graphic.
     * @default 'pointer'
     */
    cursor?: Nullable<string> | ((event: GraphicHoverEvent) => Nullable<string>);
    /**
     * The cursor style to use when the mouse is over the graphic during a drag operation.
     * @default 'crosshair'
     */
    dragCursor?: Nullable<string> | ((event: GraphicHoverEvent) => Nullable<string>);
}
export interface UseGraphicEventRetrun {
    /**
     * Add a graphic event listener and return a function to remove it.
     * @param graphic - The graphic object, 'global' indicates the global graphic object.
     * @param type - The event type, 'all' indicates clearing all events.
     * @param listener - The event listener function.
     */
    addGraphicEvent: <T extends GraphicEventType>(graphic: CesiumGraphic | 'global', type: T, listener: GraphicEventListener<T>, options?: AddGraphicEventOptions) => RemoveGraphicEventFn;
    /**
     * Remove a graphic event listener.
     * @param graphic - The graphic object, 'global' indicates the global graphic object.
     * @param type - The event type, 'all' indicates clearing all events.
     * @param listener - The event listener function.
     */
    removeGraphicEvent: <T extends GraphicEventType>(graphic: CesiumGraphic | 'global', type: T, listener: GraphicEventListener<T>) => void;
    /**
     * Clear graphic event listeners.
     * @param graphic - The graphic object.
     * @param type - The event type, 'all' indicates clearing all events.
     */
    clearGraphicEvent: (graphic: CesiumGraphic | 'global', type: GraphicEventType | 'all') => void;
}
/**
 * Handle graphic event listeners and cursor styles for Cesium graphics.
 * You don't need to overly worry about memory leaks from the function, as it automatically cleans up internally.
 */
export declare function useGraphicEvent(): UseGraphicEventRetrun;