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

前言

开了一个新的专栏，叫【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>

执行yarn dev ，我们就能得到一个地球啦：

最后

自己亲身去实践，每一次代码的修改都能直接获得反馈，不断与浏览器里自己创建的地球交互，可以极大得提高自己的成就感与满足感。这样才能保持热情继续学下去。

而CesiumJS确实比OpenLayers、Mapbox GL JS或Leaflet等二维GIS地图框架要难，市面上中文书籍较少，我只找到了《面向三维GIS的Cesium开发与应用》这本。（我买来看了，感觉写得一般）

但是还是推荐一些教程内容，我都是跟着这些大佬学的，很感谢他们的分享：

1. 社恐野生猿的个人空间_哔哩哔哩_bilibili
2. cesium实战系列总目录（详细实用）（不断更新中，现120篇）_cesium实战项目_右弦GISer的博客-优快云博客