usePlot

A composable for managing a Cesium plotting session — the entry point for creating, restoring, or removing plots. It maintains the reactive plot list, the shared timeline, the active plot, and the cancellation/cleanup lifecycle, while rendering and interaction are driven by PlotScheme and PlotSkeleton.

Usage

<script setup lang="ts">
import {
  PlotSchemeBillboard,
  PlotSchemeBillboardPinBuilder,
  PlotSchemeCylinder,
  PlotSchemeEllipse,
  PlotSchemeLabel,
  PlotSchemePoint,
  PlotSchemePolygon,
  PlotSchemePolygonArc,
  PlotSchemePolygonArrowAttackDirection,
  PlotSchemePolygonArrowAttackDirectionTailed,
  PlotSchemePolygonArrowClamped,
  PlotSchemePolygonArrowStraight,
  PlotSchemePolygonArrowStraightSharp,
  PlotSchemePolygonArrowUnitCombatOperation,
  PlotSchemePolygonArrowUnitCombatOperationTailed,
  PlotSchemePolygonAssemblingPlace,
  PlotSchemePolygonSmooth,
  PlotSchemePolyline,
  PlotSchemePolylineCurve,
  PlotSchemeRectangle,
  usePlot,
} from '@vesium/plot';

const { operate } = usePlot();

const options = [
  {
    label: 'Billboard',
    scheme: PlotSchemeBillboard,
  },
  {
    label: 'BillboardPinBuilder',
    scheme: PlotSchemeBillboardPinBuilder,
  },
  {
    label: 'Cylinder',
    scheme: PlotSchemeCylinder,
  },
  {
    label: 'Ellipse',
    scheme: PlotSchemeEllipse,
  },
  {
    label: 'Label',
    scheme: PlotSchemeLabel,
  },
  {
    label: 'Point',
    scheme: PlotSchemePoint,
  },
  {
    label: 'Polygon',
    scheme: PlotSchemePolygon,
  },
  {
    label: 'PolygonArc',
    scheme: PlotSchemePolygonArc,
  },
  {
    label: 'PolygonArrowAttackDirection',
    scheme: PlotSchemePolygonArrowAttackDirection,
  },
  {
    label: 'PolygonArrowAttackDirectionTailed',
    scheme: PlotSchemePolygonArrowAttackDirectionTailed,
  },
  {
    label: 'PolygonArrowClamped',
    scheme: PlotSchemePolygonArrowClamped,
  },
  {
    label: 'PolygonArrowStraight',
    scheme: PlotSchemePolygonArrowStraight,
  },
  {
    label: 'PolygonArrowStraightSharp',
    scheme: PlotSchemePolygonArrowStraightSharp,
  },
  {
    label: 'PolygonArrowUnitCombatOperation',
    scheme: PlotSchemePolygonArrowUnitCombatOperation,
  },
  {
    label: 'PolygonArrowUnitCombatOperationTailed',
    scheme: PlotSchemePolygonArrowUnitCombatOperationTailed,
  },
  {
    label: 'PolygonAssemblingPlace',
    scheme: PlotSchemePolygonAssemblingPlace,
  },
  {
    label: 'PolygonSmooth',
    scheme: PlotSchemePolygonSmooth,
  },
  {
    label: 'Polyline',
    scheme: PlotSchemePolyline,
  },
  {
    label: 'PolylineCurve',
    scheme: PlotSchemePolylineCurve,
  },
  {
    label: 'Rectangle',
    scheme: PlotSchemeRectangle,
  },
];
</script>

<template>
  <div class="p-10px flex flex-wrap gap-4px">
    <button v-for="item in options" :key="item.label" @click="operate({ scheme: item.scheme })">
      {{ item.label }}
    </button>
  </div>
</template>

Returns

plots

A reactive snapshot of all plots in the current session (ComputedRef<PlotFeature[]>).

time

The shared timeline for the session (ShallowRef<JulianDate | undefined>); pass one via usePlot({ time }).

operate

Start or resume a PlotFeature ((plot: PlotFeature | PlotFeatureConstructorOptions) => Promise<PlotFeature>); resolves when definition completes, rejects on cancel or removal; before starting a new plot it first tries to force-complete the previous defining one (if it cannot complete, that plot is removed and its promise rejects).

remove

Remove a plot from the session, returning whether it succeeded; aborts the pending operate() when the plot is being defined.

cancel

Abort the pending operate() call; its returned promise rejects.