CesiumJS 快速开始

<script setup lang="ts">
// 这里的 Ion 是上边介绍的存储地图的服务器
import { Cartesian3, createOsmBuildingsAsync, Ion, Math as CesiumMath, Terrain, Viewer } from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";
import { onMounted } from 'vue';

// 静态文件路径配置
window.CESIUM_BASE_URL = 'CesiumUnminified';

Ion.defaultAccessToken = '你的token';

// 等待dom初始化完成
onMounted(async () => {

  // 先创建一个视图，在ID为 cesiumContainer 的html 元素当中 初始化 Cesium 视图区域
  const viewer = new Viewer('cesiumContainer', {
    terrain: Terrain.fromWorldTerrain(),
    animation: false, // 是否显示左下角的仪表盘
    baseLayerPicker: true, // 是否显示图层选择器按钮，右上角那个地图图标
    fullscreenButton: true, // 是否显示全屏按钮
    vrButton: true, // 是否显示VR按钮
    geocoder: true, // 是否显示搜索按钮
    homeButton: true, // 是否显示主页按钮
    infoBox: false, // 是否显示提示信息
    sceneModePicker: true, // 是否显示右上角的模式切换按钮
    selectionIndicator: false, // 是否显示选取指示器组件
    timeline: true, // 是否显示下边的时间轴
    navigationHelpButton: false, // 是否显示右上角的帮助按钮
    navigationInstructionsInitiallyVisible: true, // 是否显示导航
    scene3DOnly: true, // 是否指定仅为三维模式，全部使用三维模式可节约 GPU 资源
    // 在2023.07.03 1.107 版本的更新当中，这个选项被 baseLayer所替代
    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
          url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
      })
  });

  // 视图上绑定的是相机，在给定的经度、纬度 和 高度，将视图移动到 西安的大雁塔
  viewer.camera.flyTo({
    destination: Cartesian3.fromDegrees(108.970604, 34.224485, 1400),
    orientation: {
      heading: CesiumMath.toRadians(0.0),
      pitch: CesiumMath.toRadians(-15.0),
    }
  });

  // OsmBuildings 是一个全球3D建筑物视图， 添加一个OSM建筑物视图
  const buildingTileset = await createOsmBuildingsAsync();
  viewer.scene.primitives.add(buildingTileset);
})
</script>

<template>
  <div id="cesiumContainer" style="width: 100%;height: 90vh;"></div>
</template>