星图时空开发环境搭建
依赖环境
需要安装的软件主要包括以下几种：
| 分类 | 名称 | 下载 |
|---|---|---|
| 开发环境 | Node 16+ | 下载 |
| IDE | VS Code | 下载 |
| 浏览器 | Chrome | 下载 |
方式一：快速起步
- 下载示例项目
bash
git clone https://gitee.com/hfxtsk/vite-cesium-sandbox.gitgit clone https://gitee.com/hfxtsk/vite-cesium-sandbox.git- 运行项目
bash
cd vite-cesium-sandbox
npm install
npm run devcd vite-cesium-sandbox
npm install
npm run dev- 打开浏览器访问即可
方式二：手动搭建
- 使用
cmd命令
bash
# 使用NPM方式
npm create vite
# 根据提示输入或选择
? Project name: vite-cesium-sandbox
? Select a framework: Vue
? Select a variant: TypeScript# 使用NPM方式
npm create vite
# 根据提示输入或选择
? Project name: vite-cesium-sandbox
? Select a framework: Vue
? Select a variant: TypeScript- 使用
vscode打开vite-cesium-sandbox项目 - 安装依赖
bash
# 安装cesium
npm i cesium -S
# 安装vite-plugin-earth插件
npm i vite-plugin-earth -D# 安装cesium
npm i cesium -S
# 安装vite-plugin-earth插件
npm i vite-plugin-earth -Dvite.config.ts添加如下配置
js
import { defineConfig } from 'vite';
import { cesiumPlugin } from 'vite-plugin-earth';
export default defineConfig({
plugins: [cesiumPlugin()]
});import { defineConfig } from 'vite';
import { cesiumPlugin } from 'vite-plugin-earth';
export default defineConfig({
plugins: [cesiumPlugin()]
});App.vue页面
html
<script setup lang="ts">
import { onMounted } from 'vue';
import { Viewer } from 'cesium';
onMounted(() => {
const viewer = new Viewer('cesiumContainer', {});
console.log(viewer);
});
</script>
<template>
<div id="cesiumContainer"></div>
</template>
<style scoped>
#cesiumContainer {
width: 100%;
height: 100%;
}
</style><script setup lang="ts">
import { onMounted } from 'vue';
import { Viewer } from 'cesium';
onMounted(() => {
const viewer = new Viewer('cesiumContainer', {});
console.log(viewer);
});
</script>
<template>
<div id="cesiumContainer"></div>
</template>
<style scoped>
#cesiumContainer {
width: 100%;
height: 100%;
}
</style>- 运行程序
bash
npm run devnpm run dev- 打开浏览器访问即可