useScaleBar

Reactive generation of scale bars

Usage

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

const viewer = useViewer();
watchEffect(() => {
  viewer.value?.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(100, 0, 10000),
    duration: 3,

  });
});
const { pixelDistance, width, distance, distanceText } = useScaleBar();
</script>

<template>
  <div
    w="200px"
    p="10px"
    flex="~ col"
  >
    <div>pixelDistance: {{ pixelDistance?.toFixed(2) }}m</div>
    <div>distance: {{ distance }}m</div>
    <div b-b="#666 2px" :style="{ width: `${width}px` }">
      {{ distanceText }}
    </div>
  </div>
</template>

Type Definitions

import type { MaybeRefOrGetter, Ref } from 'vue';
export interface UseScaleBarOptions {
    /**
     * The maximum width of the scale (px)
     * @default 80
     */
    maxPixel?: MaybeRefOrGetter<number>;
    /**
     * Throttled delay duration (ms)
     * @default 8
     */
    delay?: number;
}
export interface UseScaleBarRetrun {
    /**
     * The actual distance of a single pixel in the current canvas
     */
    pixelDistance: Readonly<Ref<number | undefined>>;
    /**
     * The width of the scale.(px)
     */
    width: Readonly<Ref<number>>;
    /**
     * The actual distance corresponding to the width of the scale (m)
     */
    distance: Readonly<Ref<number | undefined>>;
    /**
     * Formatted content of distance.
     * eg. 100m,100km
     */
    distanceText: Readonly<Ref<string | undefined>>;
}
/**
 * Reactive generation of scale bars
 */
export declare function useScaleBar(options?: UseScaleBarOptions): UseScaleBarRetrun;