cesium-components-vue
v0.2.0
Published
English | [🇨🇳中文](README_ZH.md)
Downloads
6
Readme
English | 🇨🇳中文
Cesium Components Vue
Documentation
Visit cesium.sunquakes.com.
Install
Install Cesium
Method One: Downloading Release Package
Download cesium from github https://github.com/CesiumGS/cesium/releases
Move Cesium folder to the /public.
Import Cesium js and css file in index.html.
<script type="text/javascript" src="/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="/Cesium/Widgets/widgets.css" />
Method Two: Using CDN
- Import Cesium js and css file in index.html.
<script src="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.108.0/Cesium.js" integrity="sha512-x4px4C+PHoAP0tAGI1XA1164gN+pT88gY5wpP4j4Nokmg75f5RJ9HOyzLNx6usrbtmzZFaGbPxdYgeEnptqbqA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.108.0/Widgets/widgets.min.css" integrity="sha512-B5b+YSvAqAIXLgYMg42Tc9KmdoYyGQt2G13igHZaDPitOzeO6hUsMkz8uhNg24eRbPcTivMcQ55/FhyxzcCFVQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
Install cesium-components-vue
pnpm install cesium-components-vue
Getting Started
- Use it in
Vue 3
.
<template>
<div class="viewer">
<cc-tian-viewer v-model="viewer" :tk="tk" :id="containerId"></cc-tian-viewer>
</div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
const viewer = ref(null)
const tk = 'map-world-tk' // Obtained from `Map World` website.
const containerId = 'default'
watch(viewer, async (newValue) => {
const viewer = newValue as Cesium.Viewer
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(120.74210547619033, 31.275160096694293, 5000)
})
})
</script>
<style>
.viewer {
margin-top: 10px;
width: 100%;
height: 300px;
}
</style>