cesium学习笔记，基础指南、教程，vue3+typescript版

一，hello world！

俗话说的好，要学习一门新的语言，从打印出hello world开始你就已经入门百分之五十了，学习cesium也一样。
在cesium的官网示例中就有个hello world！在这我们就先将hello world实现。

1：创建vue3项目

这里不过多描述，不会的可以看看官网，我用的是vite创建的项目。

2：安装

安装有两种方式，可以参考官网 https://cesium.com/downloads， 包管理器和直接下载安装包。现在的cesium对TS的支持也比较友好，有相应的代码提示。

npm install cesium

3：实现hello world！

cesium渲染需要一个dom元素初始化，所以先创建一个dom元素，将他的宽高都设置为100(全屏)。
在main.ts中引入cesium的css样式文件。如果不引入样式文件页面布局会错乱！！！

// component组件
<template>
  <div class="map-container" ref="map" />
</template>

<script setup lang="ts">
import {
    
     onMounted, ref } from 'vue';
import {
    
     Viewer } from 'cesium'

const map = ref()
onMounted(() => {
    
    
  const viewer = new Viewer(map.value)
})
</script>

<style scoped lang="scss">
.map-container {
    
    
	width: 100vw;
	height: 100vh;
}
</style>

// main.ts
import 'cesium/Build/Cesium/Widgets/widgets.css'

这样使用之后发现会报错：Error constructing CesiumWidget.

我目前使用的方法是：
在node_modules中找到cesium安装包，复制cesium/Build/Cesium文件夹到静态资源文件夹中，我是放在根目录的public文件夹下，然后在index.html中引入。目前本人认为这个方法最简单直接，如果有其他更好的方法请在评论区留言。

<script type="module" src="/Cesium/Cesium.js"></script>

如此我们的hello world就出来了，还是很简单的，哈哈哈