useLocated
Fix DOM on a Cartesian3.
Demo please refer to component version。
Usage
vue
<script setup>
const state = ref(false)
const coordinate = ref(new Cesium.Cartesian3(123, 456, 789))
const el = useTemplateRef('el')
const { style, show } = useLocated(el, {
state,
coordinate,
})
state.value = true
</script>
<template>
<div ref="el" class="absolute" :class="[show ? 'visible' : 'hidden']" :style>
It's me, Cesium Use!
</div>
</template>Type Declarations
Details
ts
export type UseLocatedPlacement =
| "topLeft"
| "top"
| "topRight"
| "right"
| "bottomRight"
| "bottom"
| "bottomLeft"
| "left"
export interface UseLocatedOptions {
state: Ref<boolean>
coordinate: MaybeRefOrGetter<Nullable<Cartesian3 | MaybeCoordinates>>
/**
* @default true
*/
initialValue: boolean
/**
* @default 'bottomRight'
*/
placement: MaybeRefOrGetter<Nullable<UseLocatedPlacement>>
offset: {
left?: MaybeRefOrGetter<Nullable<number>>
top?: MaybeRefOrGetter<Nullable<number>>
}
}
/**
* Fix DOM on a Cartesian3.
*
* Component version please use ``
*
* ## example
* ```vue
* <script setup>
* const state = ref(false)
* const coordinate = ref(new Cesium.Cartesian3(123, 456, 789))
*
* const el = useTemplateRef('el')
* const { style, show } = useLocated(el, {
* state,
* coordinate,
* })
*
* state.value = true
* </script>
*
* <template>
* <div ref="el" class="absolute" :class="[show ? 'visible' : 'hidden']" :style>
* It's me, Cesium Use!
* </div>
* </template>
* ```
*/
export declare function useLocated(
el: MaybeRefOrGetter<Nullable<HTMLElement>>,
options?: Partial<UseLocatedOptions>,
):
| {
position: Ref<
{
x: number
y: number
},
| {
x: number
y: number
}
| {
x: number
y: number
}
>
state: Ref<boolean, boolean>
show: ComputedRef<boolean>
coordinate:
| Ref<
Nullable<MaybeCoordinates | Cartesian3>,
Nullable<MaybeCoordinates | Cartesian3>
>
| ComputedRef<
| {
longitude: number | string
latitude: number | string
height?: number | string
}
| (string | number)[]
| Cartesian3
| null
| undefined
>
style: ComputedRef<string>
x: Ref<number, number>
y: Ref<number, number>
}
| {
position: Ref<
{
x: number
y: number
},
| {
x: number
y: number
}
| {
x: number
y: number
}
>
state: Ref<boolean, boolean>
show: ComputedRef<boolean>
coordinate:
| Ref<
Nullable<MaybeCoordinates | Cartesian3>,
Nullable<MaybeCoordinates | Cartesian3>
>
| ComputedRef<
| {
longitude: number | string
latitude: number | string
height?: number | string
}
| (string | number)[]
| Cartesian3
| null
| undefined
>
style: ComputedRef<string>
x: Ref<number, number>
y: Ref<number, number>
}