useElementOverlay

Overlay HTML elements on a Cesium map and reactively update their positions.

Usage

<script lang="ts" setup>
import * as Cesium from 'cesium';
import { useElementOverlay, useEntity, useViewer } from 'vesium';
import { shallowRef, watchEffect } from 'vue';

const viewer = useViewer();
const position = shallowRef(Cesium.Cartesian3.fromDegrees(110, 20, 100));

useEntity(new Cesium.Entity({
  position: position.value,
  point: {
    pixelSize: 10,
    color: Cesium.Color.YELLOW,
  },
}));

watchEffect(() => {
  viewer.value?.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(110, 20, 100000),
  });
});

const elRef = shallowRef<HTMLDivElement>();

const { x, y, style } = useElementOverlay(elRef, position, {
  offset: { x: 0, y: -20 },
});
</script>

<template>
  <teleport v-if="viewer" :to="viewer?.container">
    <div ref="elRef" class="position-absolute bg-#000/50 p-20px text-#fff">
      <h4>useElementOverlay</h4>
      <pre>{{ JSON.stringify({ x: x.toFixed(2), y: y.toFixed(2), style }, undefined, 2) }}</pre>
    </div>
  </teleport>
</template>

// Basic usage
const { x, y, elementOverlay } = useElementOverlay(
  targetElement,
  position,
  {
    horizontal: 'center',
    vertical: 'bottom',
    offset: { x: 0, y: 0 },
    referenceWindow: false,
  }
);

Type Definitions

import type { MaybeComputedElementRef } from '@vueuse/core';
import type { ComputedRef, MaybeRefOrGetter } from 'vue';
import type { CommonCoord } from '../utils';
export interface UseElementOverlayOptions {
    /**
     * Horizontal origin of the target element
     * @default `center`
     */
    horizontal?: MaybeRefOrGetter<'center' | 'left' | 'right' | undefined>;
    /**
     * Vertical origin of the target element
     * @default `bottom`
     */
    vertical?: MaybeRefOrGetter<'center' | 'bottom' | 'top' | undefined>;
    /**
     * Pixel offset presented by the target element
     * @default {x:0,y:0}
     */
    offset?: MaybeRefOrGetter<{
        x?: number;
        y?: number;
    } | undefined>;
    /**
     * The reference element for calculating the position of the target element
     *  - `true` refer to the browser viewport
     *  - `false` refer to the Cesium canvas
     */
    referenceWindow?: MaybeRefOrGetter<boolean>;
    /**
     * Whether to apply style to the target element
     * @default true
     */
    applyStyle?: MaybeRefOrGetter<boolean>;
}
export interface UseElementOverlayRetrun {
    /**
     * Calculation result of the target element's horizontal direction
     */
    x: ComputedRef<number>;
    /**
     * Calculation result of the target element's vertical direction
     */
    y: ComputedRef<number>;
    /**
     * Calculation `css` of the target element
     */
    style: ComputedRef<{
        left: string;
        top: string;
    }>;
}
/**
 * Cesium HtmlElement Overlay
 */
export declare function useElementOverlay(target?: MaybeComputedElementRef, position?: MaybeRefOrGetter<CommonCoord | undefined>, options?: UseElementOverlayOptions): UseElementOverlayRetrun;