【CesiumJS入门】（0）专栏介绍＆项目搭建

原创已于 2023-06-01 15:51:46 修改 · 1.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2023-05-31 13:53:46 首次发布

【CesiumJS入门】专栏收录该内容

13 篇文章

订阅专栏

作者新开设了【CesiumJS入门】专栏，记录学习过程。文中通过Vite+Vue3搭建项目，使用vite-plugin-cesium插件引入CesiumJS，并展示了创建地球视图的基本步骤，强调实践和交互式学习的重要性。

前言

开了一个新的专栏，叫【CesiumJS入门】，因为自己也是初学者，所以专栏主要是记录自己学习CesiumJS的过程，如果还能给后来者带来一点参考那就真是太好了。

本项目的仓库地址：https://gitee.com/cswwww/cesium-tyro-blog

运行环境&技术栈：
node 14.21.2 + yarn 1.22.19
VSCode
Vite + Vue3 + JavaScript
cesium 1.103.0

搭建 Vite 项目

搭建第一个 Vite 项目 | Vite (vitejs.net)

在cmd里执行：yarn create vite

用VSCode打开上述创建的项目，进行一些简单的调整：

在这里插入图片描述

引入CesiumJS

nshen/vite-plugin-cesium: ⚡ Vite plugin for Cesium (github.com)

安装插件： yarn add cesium vite-plugin-cesium vite -D

然后修改一下vite.config.js文件：

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()],
})

做到这步，就成功引入了，后续就可以通过下示代码在单个文件中导入：

import * as Cesium from 'cesium' // 全部导入
import { Viewer } from 'cesium' // 按需导入

创建地球

参考代码提交： chore: 测试是否成功引入CesiumJS · ReBeX/cesium-tyro-blog - Gitee.com

让我们快速创建一个地球来看看CesiumJS的效果。首先我们修改一下style.css，将里面的代码全删了，然后加入这段：

body {
  margin: 0;
}
#app {
  width: 100vw;
  height: 100vh;
}

这样能保证我们后续创建的地球可以铺满整个界面。

修改App.vue文件：

<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'

onMounted(() => {
  const map = new Cesium.Viewer('cesiumContainer')
})
</script>

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

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  margin: 0;
  padding: 0;
}
</style>