CesiumJS【Basic】- #001 使用Vite + TypeScript搭建开发环境

满天飞飞

已于 2024-06-25 21:49:32 修改

阅读量627

点赞数 3

分类专栏： MyCesiumJS Basic 文章标签： cesium js ts vite

于 2024-06-16 12:44:45 首次发布

本文链接：https://blog.youkuaiyun.com/AlanL/article/details/139718225

版权

MyCesiumJS Basic 专栏收录该内容

102 篇文章 ¥159.90 ¥299.90

订阅专栏

文章目录

使用Vite + TypeScript搭建开发环境

使用Vite + TypeScript搭建开发环境

1 目标

使用Vite搭建Cesium开发环境，使用TypeScript作为开发语言。

2 步骤

2.1 初始化项目

使用 Vite 创建一个新的 TypeScript项目，不使用任何前端框架：

npm init vite@latest my-cesium-project -- --template vanilla-ts
cd my-cesium-project

2.2 安装依赖

安装Cesium相关依赖

npm install cesium
npm install vite-plugin-cesium

2.3 配置 Vite

工程目录下新建 vite.config.ts 文件，添加 Cesium 的配置：

/*
 * @Author: alan.lau
 * @Date: 2024-06-16 11:18:22
 * @LastEditTime: 2024-06-16 12:30:40
 * @LastEditors: alan.lau
 * @Description: 
 * @FilePath: \my-cesium-project\vite.config.ts
 * 可以输入预定的版权声明、个性签名、空行等
 */
import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium';
import { fileURLToPath } from 'url'

export default defineConfig({
    server: {
        port: 8000
    },
    base: process.env.NODE_ENV === 'production' ? './' : '/',

    resolve: {
        alias: {
            "@": fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    plugins: [cesium()],
});

2.4 创建 Cesium 初始化代码

修改 main.ts文件，在其中初始化 Cesium

/*
 * @Author: alan.lau
 * @Date: 2024-06-16 11:15:48
 * @LastEditTime: 2024-06-16 11:43:02
 * @LastEditors: alan.lau
 * @Description: 
 * @FilePath: \my-cesium-project\src\main.ts
 * 可以输入预定的版权声明、个性签名、空行等
 */
import * as Cesium from 'cesium';

// Initialize Cesium viewer
const viewer = new Cesium.Viewer('cesiumContainer', {
  
});

2.5 创建 Cesium 所需的Dom

修改 index.html文件

<!--
 * @Author: alan.lau
 * @Date: 2024-06-16 11:15:48
 * @LastEditTime: 2024-06-16 11:31:09
 * @LastEditors: alan.lau
 * @Description: 
 * @FilePath: \my-cesium-project\index.html
 * 可以输入预定的版权声明、个性签名、空行等
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cesium App</title>
    <link rel="stylesheet" href="/cesium/Widgets/widgets.css" />
    <style>
      body, html, #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

2.6 运行项目

一切配置完成后，运行项目

npm run dev

在这里插入图片描述

3 工程中使用第三方库的版本信息

{
  "name": "my-cesium-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "^5.2.2",
    "vite": "^5.3.1"
  },
  "dependencies": {
    "cesium": "^1.118.2",
    "vite-plugin-cesium": "^1.2.22"
  }
}