迈向三维：vue3+Cesium.js三维WebGIS项目实战

<template>
  <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
</template>
 
<script setup>
import { onMounted } from 'vue';
import Cesium from 'cesium';
 
onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain({
      requestWaterMask: true,
      requestVertexNormals: true,
    }),
  });
 
  // 设置初始位置为北京天安门
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.4073968, 39.9041999, 1000.0),
  });
});
</script>
 
<style>
/* 全局CSS样式 */
@import url('https://unpkg.com/cesium@1.95.0/Build/Cesium/Widgets/widgets.css');
</style>

这段代码展示了如何在Vue 3应用中集成Cesium.js来创建一个基本的三维地理信息系统(GIS)应用。首先，在<script setup>标签中使用了onMounted生命周期钩子来初始化Cesium Viewer，并设置了全球地形和相机的初始视图。最后，在<style>标签中引入了Cesium的CSS样式。这个简单的例子展示了如何将Cesium集成到Vue 3项目中，并为进一步开发提供了基础框架。