usePlot
用于管理 Cesium 标绘会话的组合式函数,是创建、恢复或移除标绘的入口。它维护响应式的标绘列表、共享时间轴、当前激活的标绘以及取消和清理等生命周期处理,渲染和交互由 PlotScheme 和 PlotSkeleton 驱动。
Usage
vue
<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>返回值
plots
当前会话所有标绘的响应式快照(ComputedRef<PlotFeature[]>)。
time
会话共享的时间轴(ShallowRef<JulianDate | undefined>),可用 usePlot({ time }) 传入外部时间轴。
operate
新建或恢复 PlotFeature((plot: PlotFeature | PlotFeatureConstructorOptions) => Promise<PlotFeature>),完成定义后 resolve,取消或移除时 reject;开始新标绘前会先尝试强制完成上一个定义中的标绘(无法完成则删除该标绘并使其 reject)。
remove
从会话中移除标绘,返回是否成功;移除定义中的标绘时中止其挂起的 operate()。
cancel
中止当前挂起的 operate() 调用,其返回的 Promise 将 reject。