头图

一分钟搭建 Vite + Cesium 开发环境

nshen

⚠ 2021年4月1日更新:10秒钟搭建 Vite + Cesium 开发环境


创建目录

mkdir cesium-vite-test
cd cesium-vite-test/

创建 package.json

yarn init -y

安装依赖

yarn add -D cesium vite vite-plugin-cesium

由于 Cesium 不是一个普通的 npm 包,需要依赖一些 css ,图片,json 啥的。我们要参考 Cesium 官方的 webpack 教程 来做一堆额外的工作。 值得庆幸的是现在 Vite 有了 vite-plugin-cesium 插件,来帮我们完成这些配置。

创建 vite.config.js

import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium'; // 引入插件
export default defineConfig({
    plugins: [cesium()],
});

package.json 中加入 devbuild 命令

"scripts": {
    "dev": "vite",
    "build": "vite build"
},

配置完成分割线。


可以开始写代码开发了。

src/index.js

import { Viewer } from 'cesium';
import "./css/main.css";

const viewer = new Viewer('cesiumContainer');

index.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cesium-vite</title>
    <script type="module" src="/src/index.js"></script>
</head>

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

</html>

src/css/main.css

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

运行 yarn dev ,哒哒完成。

完整代码请看 vite-cesium-demo 喜欢请去点个赞,谢谢。

阅读 2.7k

新来的,给个赞吧!

96 声望
1 粉丝
0 条评论
你知道吗?

新来的,给个赞吧!

96 声望
1 粉丝
文章目录
宣传栏