Vue Cesium

https://github.com/zouyaoji/vue-cesium
Admin
Vue Cesium is a Vue 3 component library for CesiumJS that enables developers to build 3D geospatial...
Tokens:117,079
Snippets:738
Trust Score:10
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Basic Usage

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-imagery-provider-ion.md

Use the `vc-layer-imagery` tag to add an imagery layer with IonImageryProvider to the viewer. This example demonstrates the fundamental setup for loading an Ion imagery asset.

```html
<vc-layer-imagery :sortOrder="1">
  <vc-imagery-provider-ion :assetId="3836" :accessToken="'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmY2I5Y2EwMC0wYjQ0LTQ0YjktYjYwMC0wY2Q0Y2Y5YjE3YjciLCJpZCI6MTQzLCJpYXNzaWQiOjM4MzYsImlhdCI6MTYwNjQzMjQ2NX0.f0_f0_f0_f0_f0_f0_f0_f0_f0_f0_f0_f0_f0_f0_f0_f0" :server="'https://api.cesium.com/v1'" ></vc-imagery-provider-ion>
</vc-layer-imagery>
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/README.md

Run this command to install all necessary dependencies for the project.

```bash
pnpm i
```

--------------------------------

### Launch Local Development Server

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/guide/dev-guide.md

Execute this command to start the local development server for website preview.

```shell
pnpm docs:dev
```

--------------------------------

### Install ECharts

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-overlay-echarts.md

Install the ECharts library using npm. This is a prerequisite for using the VcOverlayEcharts component.

```bash
npm install echarts
```

--------------------------------

### Install heatmap.js

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-overlay-heatmap.md

Install the heatmap.js library using npm. This library is a dependency for the VcOverlayHeatmap component.

```bash
npm install heatmap.js
```

--------------------------------

### Basic Viewer Usage

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-viewer.md

This example demonstrates the basic usage of the vc-viewer component using the Vue Composition API. It sets up a 3D scene and shows how to integrate navigation and entity components.

```html
<template>
  <div class="viewer">
    <vc-viewer @ready="ready" :camera="camera">
      <vc-navigation :camera="camera" :control="navigation" />
      <vc-entity :camera="camera" :position="position" :point="point" :label="label" :description="description" />
    </vc-viewer>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const camera = ref({
  position: [116, 39, 2000000],
  heading: 0,
  pitch: -90,
  roll: 0
})
const navigation = ref({
  enableCompass: true,
  enableZoomController: true,
  enableDistanceLegend: true,
  enableLayer: true,
  enableLocate: true,
  enablePrint: true,
  enableScreenShot: true
})
const position = ref([116, 39, 0])
const point = ref({
  pixelSize: 20,
  color: 'red',
  outlineColor: 'white',
  outlineWidth: 3
})
const label = ref({
  text: 'Hello VueCesium',
  font: '20px sans-serif',
  fillColor: 'white',
  outlineColor: 'black',
  outlineWidth: 3,
  pixelOffset: [0, -30]
})
const description = ref('This is a description for the entity.')

const ready = (viewer) => {
  console.log('viewer ready')
}
</script>

<style scoped>
.viewer {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>

```

--------------------------------

### Install netcdfjs

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-overlay-windmap.md

Install the netcdfjs library, which is required for parsing NetCDF meteorological data files.

```bash
npm install netcdfjs
```

--------------------------------

### Basic Usage of VcGraphicsPolygon

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-graphics-polygon.md

This is a basic example demonstrating how to use the `vc-graphics-polygon` component. Ensure it is mounted as a subcomponent of `vc-entity` for proper loading.

```html
<vc-entity :position="[100.0, 0.0, 100.0]">
  <vc-graphics-polygon :height="100000.0" :outline="true" :outline-color="'#00ff00'" :material="'red'">
  </vc-graphics-polygon>
</vc-entity>
```

--------------------------------

### VcPrimitiveGroundPolyline Usage Example

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-primitive-ground-polyline.md

This is a basic example demonstrating how to use the `vc-primitive-ground-polyline` component. It requires `vc-geometry-ground-polyline` as its child content.

```vue
<template>
  <vc-primitive-ground-polyline
    :geometry-instances="instances"
    :appearance="appearance"
    ref="primitive"
    @ready="ready"
  ></vc-primitive-ground-polyline>
</template>

<script>
import { ref, reactive, toRefs } from 'vue'
import { VcReadyObject } from '@vue-cesium/utils/types'
import { useGeometries } from '@vue-cesium/composables'

export default {
  setup () {
    const primitive = ref(null)
    const instances = ref([])
    const appearance = ref(null)

    const ready = (readyObj: VcReadyObject) => {
      const { Cesium } = readyObj
      const { createGroundPolylineGeometry } = useGeometries()
      const instances = [
        new Cesium.GeometryInstance({
          geometry: createGroundPolylineGeometry({
            positions: Cesium.Cartesian3.fromDegreesArray([
              105.0, 35.0,
              110.0, 35.0,
              115.0, 35.0,
              120.0, 35.0
            ])
          }),
          id: 'ground polyline 1'
        })
      ]
      appearance = new Cesium.PolylineMaterialAppearance({
        material: new Cesium.Material.fromType('PolylineGlow', {
          color: new Cesium.Color(1.0, 1.0, 0.0, 1.0)
        })
      })
      Object.assign(this, { instances, appearance })
      return
    }

    return {
      primitive,
      instances,
      appearance,
      ready
    }
  }
}
</script>

```

--------------------------------

### VcOverlayTyphoon Usage Example

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-overlay-typhoon.md

Demonstrates the basic usage of the VcOverlayTyphoon component. This snippet shows how to integrate the component into a Vue application for displaying typhoon data.

```html
<template>
  <div class="map-container">
    <vc-map>
      <vc-overlay-typhoon :typhoonRoutes="typhoonRoutes"></vc-overlay-typhoon>
    </vc-map>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const typhoonRoutes = ref([
  {
    id: 'typhoon-1',
    name: 'Example Typhoon',
    path: [
      [120, 20], [122, 22], [124, 24]
    ],
    intensity: ['TS', 'STS', 'TY'],
    colors: {
      'TS': 'blue',
      'STS': 'yellow',
      'TY': 'orange'
    },
    forecast: [
      {
        agency: 'JMA',
        path: [[126, 26], [128, 28]],
        color: 'red'
      }
    ]
  }
])
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 500px;
}
</style>
```

--------------------------------

### Basic Usage of VcCollectionPrimitive

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-collection-primitive.md

Demonstrates the basic usage of the `vc-collection-primitive` component to add billboard and model primitives to the viewer. This is a fundamental example for integrating collections of primitives.

```vue
<template>
  <div v-if="ready" class="viewer">
    <vc-viewer @ready=".onViewerReady" :scene3dOnly="true">
      <vc-collection-primitive @ready=".onCollectionReady" :polygons="[{ hierarchy: [[{lng:105.0,lat:30.0},{lng:115.0,lat:30.0},{lng:115.0,lat:40.0},{lng:105.0,lat:40.0}]] }]">
        <vc-primitive @click=".onPrimitiveClick" :appearance="appearance" :geometry="geometry" />
      </vc-collection-primitive>
    </vc-viewer>
  </div>
</template>

<script>
  import { ref, reactive } from 'vue'
  import { VcViewer, VcCollectionPrimitive, VcPrimitive } from '@vue-cesium/components'
  import { Appearance, PerInstanceColorAppearance, BoxGeometry, Cartesian3, Matrix4, Color } from '@cesium/engine'

  export default {
    components: {
      VcViewer,
      VcCollectionPrimitive,
      VcPrimitive
    },
    setup () {
      const appearance = reactive(new PerInstanceColorAppearance({
        closed: true,
        translucent: false,
        vertexFormat: Appearance.POSITION_NORMAL_PACKED
      }))
      const geometry = reactive(BoxGeometry.fromDimensions({
        vertexFormat: Appearance.POSITION_NORMAL_PACKED,
        dimensions: new Cartesian3(400000, 300000, 300000),
        modelMatrix: Matrix4.multiply(Matrix4.fromTranslation(new Cartesian3(100000, 0, 150000)), Matrix4.fromRotation(0.0, 0.0, 1.0), new Matrix4()),
        maximum: new Cartesian3(200000, 150000, 150000),
        minimum: new Cartesian3(-200000, -150000, -150000)
      }))
      const ready = ref(false)
      const onViewerReady = (e) => {
        console.log('viewer ready', e)
        ready.value = true
      }
      const onCollectionReady = (e) => {
        console.log('collection ready', e)
      }
      const onPrimitiveClick = (e) => {
        console.log('primitive click', e)
        e.pickedFeature.primitive.appearance.uniforms.color = Color.RED
      }
      return {
        appearance,
        geometry,
        ready,
        onViewerReady,
        onCollectionReady,
        onPrimitiveClick
      }
    }
  }
</script>

<style>
  .viewer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
</style>
```

--------------------------------

### Generate and Preview Documentation

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/README.md

Execute these commands to generate the version information and launch the development server for previewing components.

```bash
pnpm gen:version
pnpm website-dev
```

--------------------------------

### Basic Usage of VcGraphicsPolylineVolume

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-graphics-polyline-volume.md

Demonstrates the basic usage of the VcGraphicsPolylineVolume component. Ensure it is mounted as a subcomponent of `vc-entity` for proper loading.

```html
<vc-entity :position="[100.0, 0, 100000.0]">
  <vc-graphics-polyline-volume :positions="[[100.0, -10.0, 100000.0], [105.0, -10.0, 100000.0], [105.0, -5.0, 100000.0], [100.0, -5.0, 100000.0]]" :shape="[{x: -5000.0, y: -5000.0}, {x: 5000.0, y: -5000.0}, {x: 5000.0, y: 5000.0}, {x: -5000.0, y: 5000.0}]" material="blue"></vc-graphics-polyline-volume>
</vc-entity>
```

--------------------------------

### Basic Usage of VcGraphicsWall

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-graphics-wall.md

Demonstrates the fundamental implementation of the VcGraphicsWall component. Ensure it is mounted as a subcomponent of `vc-entity` for proper loading.

```html
<template>
  <div class="wall-container">
    <vc-graphics-wall
      ref="wall"
      :positions="wallPositions"
      :minimum-heights="wallMinimumHeights"
      :maximum-heights="wallMaximumHeights"
      :material="wallMaterial"
      :outline="true"
      :outline-color="'#0000ff'"
      :outline-width="2"
    ></vc-graphics-wall>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'VcGraphicsWallUsage',
  setup () {
    const wallPositions = ref([
      {
        lng: 100.0,
        lat: 30.0,
        alt: 50000.0
      },
      {
        lng: 110.0,
        lat: 30.0,
        alt: 50000.0
      },
      {
        lng: 110.0,
        lat: 40.0,
        alt: 50000.0
      },
      {
        lng: 100.0,
        lat: 40.0,
        alt: 50000.0
      },
      {
        lng: 100.0,
        lat: 30.0,
        alt: 50000.0
      }
    ])
    const wallMinimumHeights = ref([10000.0, 15000.0, 12000.0, 18000.0, 10000.0])
    const wallMaximumHeights = ref([60000.0, 65000.0, 62000.0, 68000.0, 60000.0])
    const wallMaterial = ref({
      fabric: {
        type: 'Image',
        uniforms: {
          image: '/images/wall.png'
        }
      }
    })

    return {
      wallPositions,
      wallMinimumHeights,
      wallMaximumHeights,
      wallMaterial
    }
  }
})
</script>

<style>
.wall-container {
  width: 100%;
  height: 100%;
}
</style>

```

--------------------------------

### Install Vue Cesium with Package Managers

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/guide/installation.md

Install Vue Cesium using your preferred package manager. This is the recommended method for use with bundlers like Vite or webpack.

```shell
# NPM
$ npm install vue-cesium --save
```

```shell
# Yarn
$ yarn add vue-cesium
```

```shell
# pnpm
$ pnpm install vue-cesium
```

--------------------------------

### VcGeometryBox Usage

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-geometry-box.md

This is a basic usage example of the VcGeometryBox component. It must be used as a child component of vc-geometry-instance.

```html
<vc-geometry-instance>
  <vc-geometry-box :dimensions="{ x: 400000.0, y: 300000.0, z: 200000.0 }" :vertex-format="null"></vc-geometry-box>
</vc-geometry-instance>
```

--------------------------------

### Basic Usage of VcGeometryEllipsoid

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-geometry-ellipsoid.md

Demonstrates the fundamental implementation of the VcGeometryEllipsoid component. Ensure it is nested within a `vc-geometry-instance` component for proper loading.

```html
<vc-geometry-instance>
  <vc-geometry-ellipsoid :radii="[100000, 100000, 100000]" :inner-radii="[110000, 110000, 110000]" :maximum-cone="PI_OVER_TWO" :slice-partitions="10" :stack-partitions="10">
  </vc-geometry-ellipsoid>
</vc-geometry-instance>
```

--------------------------------

### VcGeometryPolyline Basic Usage

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-geometry-polyline.md

This is a basic example demonstrating how to use the VcGeometryPolyline component. It requires being used as a child of vc-geometry-instance.

```html
<vc-geometry-instance>
  <vc-geometry-polyline :positions="positions" :width="width" :colors="colors" :colors-per-vertex="colorsPerVertex" :vertex-format="vertexFormat"></vc-geometry-polyline>
</vc-geometry-instance>
```

--------------------------------

### Basic Usage of VcGraphicsPath

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-graphics-path.md

Demonstrates the basic integration of the VcGraphicsPath component. Ensure it is mounted as a subcomponent of `vc-entity` for proper loading.

```html
<vc-entity :position="position" :orientation="orientation" :name="name">
  <vc-graphics-path :show="true" :width="3" :material="'red'"></vc-graphics-path>
</vc-entity>
```

--------------------------------

### VcGeometryPlane Basic Usage

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-geometry-plane.md

This is a basic usage example of the VcGeometryPlane component. It demonstrates how to load a plane geometry within a vc-geometry-instance.

```html
<vc-geometry-instance :geometry.sync="geometry">
  <vc-geometry-plane :vertex-format="vertexFormat"></vc-geometry-plane>
</vc-geometry-instance>
```

--------------------------------

### Basic Usage of VcNavigation

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-navigation.md

Demonstrates the basic integration of the VcNavigation component. Ensure the vue-cesium CSS is imported for proper styling.

```html
<template>
  <div class="viewer">
    <vc-navigation></vc-navigation>
  </div>
</template>

<script>
  import 'vue-cesium/dist/index.css';
  export default {
    name: 'vc-navigation-usage'
  };
</script>

<style>
  .viewer {
    width: 100%;
    height: 100%;
    position: relative;
  }
</style>
```

--------------------------------

### VcGraphicsPoint Basic Usage

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-graphics-point.md

Demonstrates the basic usage of the VcGraphicsPoint component. Ensure it is mounted as a subcomponent of `vc-entity` for proper loading.

```html
<vc-entity :position="[100, 100, 300000]">
  <vc-graphics-point :pixelSize="8" color="red"></vc-graphics-point>
</vc-entity>
```

--------------------------------

### Incorrect VcViewer Usage Example

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-viewer.md

Demonstrates incorrect placement of child components outside the VcViewer. All VueCesium components must be children of VcViewer.

```html
<template>
  <div>
    <vc-viewer @ready="onViewerReady"></vc-viewer>
    <vc-entity></vc-entity>
    <!-- Incorrect usage! -->
  </div>
</template>
```

--------------------------------

### Basic Usage of VcGraphicsCylinder

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-graphics-cylinder.md

Demonstrates the basic implementation of the VcGraphicsCylinder component. Ensure it is mounted as a subcomponent of `vc-entity` for proper loading.

```html
<vc-entity>
  <vc-graphics-cylinder
    :height="100000.0"
    :radius="50000.0"
    material="red"
  ></vc-graphics-cylinder>
</vc-entity>
```

--------------------------------

### VcPostProcessStageScan Basic Usage

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-post-process-stage-scan.md

Use the `vc-post-process-stage-scan` tag to add a post-processing scanning effect to the viewer. This example demonstrates the basic integration of the component.

```html
<vc-post-process-stage-scan></vc-post-process-stage-scan>
```

--------------------------------

### Basic Usage of VcEntity

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-entity.md

Demonstrates adding points, billboards, labels, and rectangle instances to the viewer using the vc-entity tag. It also shows how to respond to mouse events.

```html
<template>
  <div class="demo">
    <vc-viewer @ready="ready">
      <vc-entity
        ref="entity"
        :availability="availability"
        :description="description"
        :name="name"
        :position="position"
        :show="show"
        :view-from="viewFrom"
        @click="click"
        @mouse-enter="mouseEnter"
        @mouse-out="mouseOut"
        @dbl-click="dblClick"
      >
        <vc-graphics-point :color="color" :outline-color="outlineColor" :outline-width="outlineWidth" :pixel-size="pixelSize"></vc-graphics-point>
        <vc-graphics-billboard :image="image" :scale="scale" :vertical-origin="verticalOrigin"></vc-graphics-billboard>
        <vc-graphics-label :font="font" :horizontal-origin="horizontalOrigin" :text="text" :vertical-origin="verticalOrigin"></vc-graphics-label>
        <vc-graphics-rectangle :coordinates="coordinates" :material="material"></vc-graphics-rectangle>
      </vc-entity>
    </vc-viewer>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        availability: undefined,
        description: 'Hello VueCesium! Double click to console log this message.',
        name: 'Name',
        position: {
          lng: 105,
          lat: 30,
          alt: 500000
        },
        show: true,
        viewFrom: {
          lng: 105,
          lat: 30,
          alt: 2000000
        },
        color: 'red',
        outlineColor: 'white',
        outlineWidth: 2,
        pixelSize: 10,
        image: 'https://zouyaoji.github.io/vue-cesium/favicon.png',
        scale: 0.5,
        verticalOrigin: 0,
        font: '20px sans-serif',
        horizontalOrigin: 6,
        text: 'Label',
        coordinates: {
          positions: [
            {
              lng: 100,
              lat: 25,
              alt: 100000
            },
            {
              lng: 110,
              lat: 25,
              alt: 100000
            },
            {
              lng: 110,
              lat: 35,
              alt: 100000
            },
            {
              lng: 100,
              lat: 35,
              alt: 100000
            }
          ]
        },
        material: 'சிவப்பு',
        ready(viewer) {
          console.log('viewer ready')
        },
        click(e) {
          console.log('click', e)
        },
        mouseEnter(e) {
          console.log('mouseEnter', e)
          return [
            {
              text: 'The mouse is in the bounds of the primitive',
              color: {
                rgba: [255, 255, 0, 0.5]
              }
            }
          ]
        },
        mouseOut(e) {
          console.log('mouseOut', e)
        },
        dblClick(e) {
          console.log('dblClick', e)
        }
      }
    }
  }
</script>

<style>
  .demo {
    width: 100%;
    height: 100%;
  }
</style>
```

--------------------------------

### Basic Usage of VcGraphicsBillboard

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-graphics-billboard.md

Demonstrates the basic integration of the VcGraphicsBillboard component within a `vc-entity`. Ensure it's mounted as a subcomponent of `vc-entity` for proper loading.

```html
<vc-entity :position="{lng: 105, lat: 30, alt: 50000}">
  <vc-graphics-billboard :image="'https://zouyaoji.github.io/vue-cesium/favicon.png'" :scale="0.5" :position="{lng: 105, lat: 30, alt: 50000}"></vc-graphics-billboard>
</vc-entity>
```

--------------------------------

### Full Import for Vue Application

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/guide/quickstart.md

Use this for a convenient setup when bundle size is not a primary concern. It imports all necessary Vue Cesium modules and CSS.

```typescript
// main.ts
import { createApp } from 'vue'
import VueCesium from 'vue-cesium'
import App from './App.vue'
import 'vue-cesium/dist/index.css'

const app = createApp(App)

app.use(VueCesium)
app.mount('#app')
```

--------------------------------

### Basic Usage of VcLayerImagery

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-layer-imagery.md

Demonstrates how to add an OpenStreetMap tile layer to the viewer using the `vc-layer-imagery` component. Ensure this component is a child of `vc-viewer`.

```html
<template>
  <div class="viewer">
    <vc-viewer>
      <vc-layer-imagery :imageryProvider="imageryProvider"></vc-layer-imagery>
    </vc-viewer>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { OpenStreetMapImageryProvider } from 'cesium'

export default defineComponent({
  setup() {
    const imageryProvider = new OpenStreetMapImageryProvider({
      url: 'https://tile.openstreetmap.org/'
    })
    return {
      imageryProvider
    }
  }
})
</script>

```

--------------------------------

### VcOverlayDynamic Basic Usage

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-overlay-dynamic.md

Demonstrates the basic integration of the VcOverlayDynamic component. This snippet is intended for initial setup and understanding of how to include the component in your Vue application.

```html
<template>
  <div class="fullScreen">
    <vc-map>
      <vc-overlay-dynamic :dynamicOverlays="dynamicOverlays" :shouldAnimate="shouldAnimate" :showPath="showPath" :showLabel="showLabel"></vc-overlay-dynamic>
    </vc-map>
  </div>
</template>

<script>
  import { ref, reactive } from 'vue'
  export default {
    setup () {
      return {
        dynamicOverlays: [
          {
            id: 'marker1',
            name: 'Marker 1',
            position: [114.0, 30.0, 1000.0],
            path: [
              [114.0, 30.0, 1000.0],
              [114.1, 30.1, 1000.0],
              [114.2, 30.2, 1000.0]
            ],
            model: {
              uri: 'https://zouyaoji.github.io/vue-cesium/SampleData/models/Primitive/Primitive.gltf'
            }
          }
        ],
        shouldAnimate: ref(true),
        showPath: ref(true),
        showLabel: ref(true)
      }
    }
  }
</script>
<style>
.fullScreen {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
```

--------------------------------

### Basic Usage of VcGraphicsEllipsoid

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-graphics-ellipsoid.md

Demonstrates the basic implementation of the VcGraphicsEllipsoid component. Ensure it is nested within a vc-entity for proper loading.

```html
<vc-entity>
  <vc-graphics-ellipsoid
    :radii="{ x: 100000.0, y: 100000.0, z: 100000.0 }"
    :height="100000.0"
    material="red"
  ></vc-graphics-ellipsoid>
</vc-entity>
```

--------------------------------

### Commit Message Template Example

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/guide/commit-examples.md

A template illustrating the structure of a commit message, including subject, body, and bullet points. Emphasizes line length and capitalization.

```markdown
feat(components): [button] I did something with button

Blank between subject and body is expected.(period is expected)
Describes your change in one line or multi-line.
Capitalize your first letter when starting a new line
Please do not exceeds 72 characters per line, because that would be harder to comprehend.

- You can also add bullet list symbol for better layout
```

--------------------------------

### Basic Usage of VcGraphicsEllipse

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-graphics-ellipse.md

This snippet demonstrates the basic usage of the VcGraphicsEllipse component. Ensure it is mounted as a subcomponent of vc-entity for proper loading.

```html
<template>
  <div class="demo">
    <vc-graphics-ellipse :height="100000" :semiMajorAxis="100000.0" :semiMinorAxis="50000.0" :rotation="0.0" :granularity="0.0" material="rgba(255,0,0,0.5)" :outline="true" outlineColor="rgba(0,0,0,0.7)" :outlineWidth="2" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'usage',
  setup () {
    return {}
  }
})
</script>

<style scoped>
.demo {
  width: 100%;
  height: 100%;
}
</style>

```

--------------------------------

### On-demand Import with Viewer Component

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/guide/quickstart.md

Import Vue Cesium components on demand for better bundle size optimization. This example shows how to set up the VcViewer with a custom Cesium path.

```vue
<script setup>
import { reactive } from 'vue'
import { VcConfigProvider, VcViewer } from 'vue-cesium'

const vcConfig = reactive({
  cesiumPath: 'https://unpkg.com/cesium@latest/Build/Cesium/Cesium.js'
})
</script>

<template>
  <VcConfigProvider :cesium-path="vcConfig.cesiumPath">
    <VcViewer />
  </VcConfigProvider>
</template>
```

--------------------------------

### Basic Usage of VcCollectionPoint

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-collection-point.md

Demonstrates the basic usage of the `vc-collection-point` and `vc-point` components to add a point primitive collection to the viewer.

```html
<vc-collection-point>
  <vc-point :position="[100, 100, 100]" :options="{ color: 'red' }"></vc-point>
</vc-collection-point>
```

--------------------------------

### Basic VcAnalyses Usage

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-analyses.md

This example demonstrates the basic integration of the VcAnalyses component in a Vue Cesium application. Ensure the component is registered and used within a Cesium viewer context.

```html
<vc-analyses></vc-analyses>
```

--------------------------------

### Basic Usage of VcImageryProviderTianditu

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-imagery-provider-tianditu.md

Use the `vc-layer-imagery` tag to add the imagery layer with Tianditu WMTS imagery provider to the viewer.

```html
<vc-layer-imagery :imageryProvider="{ url: 'https://{s}.tianditu.gov.cn', token: 'your_token_here', mapStyle: 'img_w', subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'] }"></vc-layer-imagery>
```

--------------------------------

### CDN Usage for Internationalization

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/guide/i18n.md

When using Vue Cesium via CDN, import the language script and then use `app.use` to apply the locale. This example uses unpkg and the Chinese language pack.

```html
<script src="//unpkg.com/vue-cesium/dist/locale/zh-cn"></script>
<script>
  app.use(VueMaplibre, {
    locale: VueMaplibreLocaleZhcn
  })
</script>
```

--------------------------------

### Basic Usage of VcPostProcessStage

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-post-process-stage.md

Use the `vc-post-process-stage` tag to add a raining effect on the viewer. This demonstrates the fundamental application of the component.

```html
<vc-viewer>
  <vc-post-process-stage :fragmentShader="rainingFragmentShader"></vc-post-process-stage>
</vc-viewer>

<script>
export default {
  data() {
    return {
      rainingFragmentShader: `
        uniform sampler2D colorTexture;
        varying vec2 v_textureCoordinates;
        
        float random(vec2 s) {
          return fract(sin(dot(s.xy, vec2(12.9898, 78.233))) * 43758.5453);
        }
        
        void main(void) {
          vec4 color = texture2D(colorTexture, v_textureCoordinates);
          float height = czm_metersPerPixel * 1000.0;
          float speed = height * 5.0;
          float rainIntensity = 0.3;
          float rainSize = 0.01;
          
          float rain = step(random(v_textureCoordinates) * height, speed);
          color *= (1.0 - rain * rainIntensity);
          
          gl_FragColor = color;
        }
      `
    };
  }
};
</script>
```

--------------------------------

### Configure VueCesium with dc-sdk

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-demo-dc-sdk.md

Import VueCesium and configure the `cesiumPath` option to point to the dc-sdk CDN. This setup is required for using dc-sdk functionalities within your Vue application. Ensure the `dcConfig` is also correctly set for dc-sdk resources.

```javascript
import { createApp } from 'vue'
import VueCesium from 'vue-cesium'
import App from './App.vue'
import 'vue-cesium/dist/index.css'

const app = createApp(App)
app.use(VueCesium, {
  cesiumPath: 'https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/dc.min.js',
  dcConfig: {
    baseUrl: 'https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/resources/',
    Cesium: 'https://unpkg.com/cesium@latest/Build/Cesium/Cesium.js'
  }
})
app.mount('#app')
```

--------------------------------

### Basic Usage of VcCollectionCloud

Source: https://github.com/zouyaoji/vue-cesium/blob/dev/docs/en-US/component/vc-collection-cloud.md

Demonstrates the basic usage of the `vc-collection-cloud` and `vc-cumulus-cloud` tags to add a CloudCollection object to the viewer. This is the recommended way to add multiple cloud primitives.

```html
<vc-collection-cloud>
  <vc-cumulus-cloud></vc-cumulus-cloud>
</vc-collection-cloud>
```
Tokens:
Raw