vite + vue3 + ts集成Cesium

最新推荐文章于 2025-05-01 12:00:00 发布

原创最新推荐文章于 2025-05-01 12:00:00 发布 · 1.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端

cesium 专栏收录该内容

8 篇文章

订阅专栏

该文章详细介绍了如何在Vite构建的Vue3项目中，结合TypeScript来集成Cesium库。通过npm安装依赖，配置vite.config.ts文件，然后在组件中设置Cesium的Viewer实例，实现3D地图的展示并调整相关选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vite + vue3 + ts集成Cesium

安装cesium：npm i cesium vite-plugin-cesium vite -D

在vite.config.ts中进行相应的cesium配置

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import cesium from "vite-plugin-cesium";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), cesium()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  server: {
    host: "0.0.0.0",
    port: 3000,
    https: false,
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;`,
      },
    },
  },
});

在对应的文件中编写cesium代码

<template>
  <div id="cesiumContainer"></div>
</template>
<script setup lang="ts">
import { Viewer } from "cesium";
import { onMounted } from "vue";
onMounted(() => {
  window.Viewer = new Viewer("cesiumContainer", {
    animation: true, // * 左下角圆盘 速度控制器
    shouldAnimate: true, // * 当动画控件出现，用来控制是否通过旋转控件，旋转场景
    baseLayerPicker: false, // * 右上角图层选择器
    fullscreenButton: false, // * 右下角全屏按钮
    vrButton: false, // * 右下角vr按钮
    homeButton: false, // * 右上角地图恢复到初始页面按钮
    selectionIndicator: false, // * 点击后地图上显示的选择控件
    infoBox: false, // * 右上角鼠标点击后信息展示框
    sceneModePicker: false, // * 右上角2D和3D之间的切换
    timeline: true, // * 页面下方的时间条
    navigationHelpButton: false, // * 右上角帮助按钮
    navigationInstructionsInitiallyVisible: false, // * 是否展开帮助
    scene3DOnly: true, // * 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
    useDefaultRenderLoop: true, // * 控制渲染循环
    showRenderLoopErrors: false, // * HTML面板中显示错误信息
    useBrowserRecommendedResolution: true, // * 如果为true，则以浏览器建议的分辨率渲染并忽略window.devicePixelRatio
    automaticallyTrackDataSourceClocks: true, // * 自动追踪最近添加的数据源的时钟设置
    orderIndependentTranslucency: true, // * 如果为true并且配置支持它，则使用顺序无关的半透明性
    shadows: false, // * 阴影效果
    projectionPicker: false, // * 透视投影和正投影之间切换
    requestRenderMode: true, // * 在指定情况下进行渲染,提高性能
  });
  window.Viewer._cesiumWidget._creditContainer.style.display = "none"; // * 隐藏版权信息
  window.Viewer.scene.globe.depthTestAgainstTerrain = true; // * 开启深度测试
});
</script>
<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>

在这里插入图片描述