52 lines
1.2 KiB
Vue
52 lines
1.2 KiB
Vue
<template>
|
|
<div ref="cesiumContainer" class="cesium-fullscreen"></div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, onBeforeUnmount, ref } from 'vue'
|
|
import * as Cesium from 'cesium'
|
|
import 'cesium/Build/Cesium/Widgets/widgets.css'
|
|
|
|
const cesiumContainer = ref(null)
|
|
let viewer = null
|
|
|
|
onMounted(() => {
|
|
viewer = new Cesium.Viewer(cesiumContainer.value, {
|
|
terrain: Cesium.Terrain.fromWorldTerrain(),
|
|
baseLayerPicker: false,
|
|
geocoder: false,
|
|
homeButton: false,
|
|
sceneModePicker: false,
|
|
navigationHelpButton: false,
|
|
animation: false,
|
|
timeline: false,
|
|
fullscreenButton: false,
|
|
})
|
|
|
|
viewer.imageryLayers.remove(viewer.imageryLayers.get(0))
|
|
viewer.imageryLayers.addImageryProvider(
|
|
new Cesium.UrlTemplateImageryProvider({
|
|
url: 'http://localhost:8010/tiles/{z}/{x}/{y}.png',
|
|
tilingScheme: new Cesium.WebMercatorTilingScheme(),
|
|
maximumLevel: 15,
|
|
credit: 'Natural Earth - HYP_HR_SR_OB_DR',
|
|
})
|
|
)
|
|
|
|
viewer.camera.flyTo({
|
|
destination: Cesium.Cartesian3.fromDegrees(-74.30054, 40.61087, 12000000),
|
|
})
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
viewer?.destroy()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.cesium-fullscreen {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
</style>
|