当前位置：首页 > article >正文

vue3 + ts + vite 初始化 cesium

article 2024/9/25 13:03:29

1. 下载并导入依赖

npm i cesium vite-plugin-cesium --save-dev

// vite.config.ts
import cesium from 'vite-plugin-cesium'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        cesium()
    ],
})

2. 编写组件

（1）main.ts

// main.ts
declare global {
    interface Window {
        viewer: Cesium.Viewer,
    }
}

（2）components / CesiumViewer / index.vue

<template>

  <div id="map"></div>

</template>

<script setup lang="ts">

import {onMounted} from "vue";
import * as Cesium from "cesium";

onMounted(() => {
  initCesium()
})

/* 初始化地球 */
const initCesium = () => {
  let viewer: Cesium.Viewer = new Cesium.Viewer("map", {
    infoBox: false, // 禁用沙箱，解决控制台报错
    selectionIndicator: false, //选择指示器
    timeline: false, // 时间轴
    animation: false, // 动画小组件
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    sceneModePicker: false, // 投影方式，切换 2D、3D 和 Columbus View (CV) 模式。
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    navigationHelpButton: false, // 帮助按钮
    fullscreenButton: false, // 全屏按钮
    scene3DOnly: true, // 每个几何实例将只能以 3D 渲染以节省 GPU 内存
    sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
  })
  let logo = viewer.cesiumWidget.creditContainer as HTMLElement
  logo.style.display = "none"; // 隐藏 logo 版权
  viewer.scene.skyBox.show = false;
  viewer.scene.backgroundColor = new Cesium.Color(0, 0, 0, 0);
  window.viewer = viewer // 挂载到全局
}

</script>

<style>

#map {
  width: 100vw;
  height: 100vh;
}

</style>

3. 在页面中导入并使用上述组件即可，最终效果如下：