DEJA_VU3D - Cesium 之 vue3+vite+ts+cesium项目搭建全过程

总要学点什么

已于 2023-02-07 16:41:17 修改

阅读量2.9k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： DEJA_VU3D - Cesium功能集（附源码）文章标签： VUE Cesium Vite typescript javascript

于 2022-11-28 22:10:04 首次发布

本文链接：https://blog.csdn.net/qq_34205305/article/details/128087558

DEJA_VU3D - Cesium功能集（附源码）专栏收录该内容

153 篇文章 ¥99.90 ¥299.90

订阅专栏

本文详述了如何从零开始搭建一个基于Vue3、Vite和TypeScript的Cesium项目，包括检查Node环境、使用Vite创建工程、初始化项目、引入Cesium并解决TypeScript报错问题，以及项目运行的步骤。

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

前言

编写这个专栏主要目的是对工作之中基于Cesium实现过的功能进行整合，有自己琢磨实现的，也有参考其他大神后整理实现的，初步算了算现在有差不多实现小130个左右的功能，后续也会不断的追加，所以暂时打算一周2-3更的样子来更新本专栏（尽可能把代码简洁一些）。博文内容如存在错误或者有可改进之处，也希望在这里和各位大佬交流提高一下。

更多内容/样例/demo说明：DEJA_VU3D完整功能目录

专栏前面的文章代码运行整体环境vue2+Cesium，后面我们将逐渐转向vue3+vite+ts+cesium的环境配置，本篇我们就来介绍从零开始搭建vue3+vite+ts+cesium项目。

1.Node环境

npm是随同NodeJS一起安装的包管理工具，在项目搭建之处，我们要先检查是否已经安装Node环境以及npm工具。

//查看node版本
node -v
//查看npm版本
npm -v

我自己的node版本是：v14.17.0，npm版本为：6.14.13

2.创建vite工程

//创建vite工程
npm init vite

设置工程名称为：vue3-vite-ts-cesium

选择框架：Vue

选择代码形式：TypeScript

创建完成后，将生成的工程文件夹在VS Code中打开，可以看到创建后的工程的目录结构

3.初始工程项目预览

package.js中我们可以看到项目运行脚本内容

//运行命令
npm install
npm run dev

初始项目预览如下：

4. 引入Cesium包

网上一般建议的是借助npm包管理工具下载安装Cesium包然后在项目中import引入，这里我推荐直接在index.html中引用，简单粗暴但是配置及其简单。（当然，如果要修改Cesium源码的话，这种引入形式是肯定的不行的）

首先我们也借助npm来下载Cesium包

//下载Cesium包
npm install cesium -S

安装后，我们可以在项目的node_modules文件夹下找到下载好的cesium包

将cesium\Build下的Cesium文件夹拷贝粘贴到项目根目录public文件夹下，然后在index.html文件中引入Cesium.js和widgets.css

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + Vue + TS+ Cesium</title>
  <script src="/Cesium/Cesium.js"></script>
  <link rel="stylesheet" href="/Cesium/Widgets/widgets.css">
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>

在App.vue中初始化三维场景

<template>
  <div id="cesiumContainer">
  </div>
</template>

<script lang="ts">
import { onMounted } from "vue";
export default {
  name: "Home",
  setup() {
    const Cesium = window.Cesium;
    let viewer;
    onMounted(() => {
      let key =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYjUwNWQyOC0yZmZhLTRmMzItOTQyZC02ZmQyMWIyMTA3NmEiLCJpZCI6NjcyNzcsImlhdCI6MTY2ODE1ODc2Mn0.t1h6-ZADkGnZUZZoLtrlgtTp8_MR2Kxfhew42ksDgmk";
      Cesium.Ion.defaultAccessToken = key;
      viewer = window.Viewer = new Cesium.Viewer("cesiumContainer", {
        imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
          url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
        }),
        terrainProvider: Cesium.createWorldTerrain(),
        geocoder: true,
        homeButton: true,
        sceneModePicker: true,
        baseLayerPicker: true,
        navigationHelpButton: true,
        animation: false,
        timeline: false,
        fullscreenButton: false,
        vrButton: false,
        //关闭点选出现的提示框
        selectionIndicator: false,
        infoBox: false,
      });
      viewer.scene.debugShowFramesPerSecond = true;
      viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
    });
  },
};
</script>

<style lang="scss" scoped>

#cesiumContainer {
  position: relative;
  width: 100%;
  height: 100%;
  .my-Select {
    position: absolute;
    margin: 10px;
    padding: 10px;
    border: 1px solid red;
    border-radius: 4px;
    z-index: 10;
  }
}
</style>

在App.vue中我们直接以window对象的形式全局引用Cesium，并且将创建的三维场景Viewer抛出到window全局，通常情况下，这样是完全没问题的，但是TypeScript 需要开发者做到先声明后使用。这就导致开发者在调用很多原生接口（浏览器、Node.js）或者第三方模块的时候，因为某些全局变量或者对象的方法并没有声明过，导致编译器的类型检查失败。所以上述代码会出现报错：类型“Window & typeof globalThis”上不存在属性“XXXXX”。

解决方案，在项目根目录下创建globe.d.ts文件，并生命全局变量

export {};
//全局变量名
declare global {
  interface Window {
    Cesium: any;
    Viewer: any;
  }
}

5.运行项目

//运行项目
npm run dev

一般会出现sass相关错误，这是因为我们采用scss的样式文件，缺少相关依赖

解决方案：直接下载sass依赖就行

//下载安装sass依赖
npm install sass -S

然后修改一下全局样式style.css

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

运行项目 npm run dev

没错，就是这么简单！！！！！

综上！

如果客官您有问题，可以在本文下留言！

如果客官您有什么建议意见，可以在本文下留言！

如果客官您有批评指正，可以在本文下沟通讨论！

如果实例demo有数据缺失，评论留下您的邮箱地址！

如果客官您有其他的功能需求，可以在本文下留言，不管能不能实现，总会给出回复！