usePlot

用于管理 Cesium 标绘会话的组合式函数。

它负责维持当前标绘流程的会话状态，包括响应式的标绘列表、共享时间轴、当前激活的标绘，以及取消和清理等生命周期处理。

在实际使用中，usePlot() 是你创建、恢复或移除标绘时的入口，而真正的渲染和交互通常由 PlotScheme 和 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 p="10px" flex="~ wrap" gap="4px">
    <button v-for="item in options" :key="item.label" @click="operate({ scheme: item.scheme })">
      {{ item.label }}
    </button>
  </div>
</template>

返回值

• plots - 当前会话中的标绘列表
• time - 共享的标绘时间轴
• operate - 新建标绘或恢复已有标绘
• remove - 从会话中移除一个标绘
• cancel - 取消当前正在进行的 operate() 调用