从零开始记录Cesium：创建项目并出现画面

本次记录使用Vue3调用Cesium

1. 创建新项目

npm init vue@latest

2. 安装Cesium插件 和 vite-plugin-cesium 插件

npm i cesium@1.99 vite-plugin-cesium

 3. Vue项目中 vite.config内

import cesium from "vite-plugin-cesium";
plugins: [vue(), cesium()],

4. 页面内引用Cesium，使用token，创建实例

<script setup>
import * as Cesium from "cesium";
import { onMounted } from "vue";
onMounted(() => {
  Cesium.Ion.defaultAccessToken =
    "";
    const viewer = new Cesium.Viewer("global", {
    geocoder: false, //Geo搜索框
    homeButton: false, //主页
    sceneModePicker: false, //场景模式选择器(3d,2d,2.5d)
    baseLayerPicker: false, //地图选择
    navigationHelpButton: false, //使用操作介绍
    selectionIndicator: false, //点击：不创建 选择指标（选中） 部件。
    infoBox: false, //点击，不创建InfoBox（id）小部件。
    animation: false, //速度控制
    timeline: false, //时间轴
    fullscreenButton: false, //全屏，平板情况下有问题
    vrButton: false, //VR模式，默认false
    infoWindow: false,
    terrainProvider: Cesium.createWorldTerrain({
      //添加地形和水纹效果
      requestVertexNormals: true,
      requestWaterMask: true,
    }),
  });
});
</script>

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