Cesium learning journey 1: Basic introduction of cesium and hello world program of cesium

One: What is Cesium

Cesium is a cross-platform, cross-browser javascript library for displaying 3D globes and maps.
Cesium uses WebGL for hardware-accelerated graphics and does not require any plug-in support, but the browser must support WebGL.
Cesium is an open source program licensed under Apache 2.0. It is free for commercial and non-commercial use.

Two: Cesium basic use

I am using the vite + vue3 project here, the following are the steps to build the project from 0:
1. Use vite scaffolding to build the project

npm create vite 项目名

Then select vue, javascript and typescript to see how you choose.

2. After the project comes out, start to install dependencies. After that npm i, we also need to install a vite-plugin-cesium plug-in, execute the following command:

npm i vite-plugin-cesium -D

After installing this plugin, we need to modify vite.config.js, the code is as follows:

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

After configuration, start installing the cesium plugin:

npm install cesium

After installation, the necessary dependencies are finished, and other dependencies such as vue-router, scss所需插件etc. depend on your own needs.
3. Initialization:
Create a vue file of cesium, import this component in app.vue, the code is as follows:

app.vue file:

<script setup>
import cesium from './components/cesium.vue';
</script>

<template>
  <div>
    <cesium></cesium>
  </div>
</template>

cesium.vue file

<script setup>
import * as Cesium from "cesium"
let viewer = null;
cosnt token = "xxx"    // token,从官网获取，下一节会说明获取方式
onMounted(() => {
      
      
  Cesium.Ion.defaultAccessToken = 
  viewer = new Cesium.Viewer("map_box", {
      
      
    animation: true, // 动画小组件
    baseLayerPicker: true, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: true, // 全屏组件
    vrButton: false, // VR模式
    geocoder: true, // 地理编码（搜索）组件
    homeButton: true, // 首页，点击之后将视图跳转到默认视角
    infoBox: true, // 信息框
    sceneModePicker: true, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: true, // 是否显示选取指示器组件
    timeline: true, // 时间轴
    navigationHelpButton: true, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  })
})
</script>

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

<style scoped>
#map_box {
      
      
  width: 80vw;
  height: 80vh;
}
</style>

At the same time, introduce the css file in main.js:

import 'cesium/Build/Cesium/Widgets/widgets.css';

So the little earth comes out
Cesium Earth Map