cesium学习（一），在vue3项目中引入cesium

cesium学习（一），在vue3项目中引入cesium

获取token地址：https://ion.cesium.com/stories

参考文档：https://blog.csdn.net/weixin_47872719/article/details/136875619

1、在项目中引入cesium

npm install cesium

2、在main.ts中配置

import * as Cesium from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
(window as any).CESIUM_BASE_URL = "/Cesium"; 
Cesium.Ion.defaultAccessToken = "获取的token"; 

3、在页面中使用

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

<script lang="ts" setup>
import { onMounted } from "vue";
import { Viewer } from "cesium";
import * as Cesium from "cesium";

async function initCesium() {
  const viewer = new Viewer("cesiumContainer", {
    animation: true, //动画控件
    baseLayerPicker: true, //底图选择控件
  });

  viewer.scene.setTerrain(
    new Cesium.Terrain(Cesium.CesiumTerrainProvider.fromIonAssetId(1))
  );
  //去除版权信息
  (viewer.cesiumWidget.creditContainer as HTMLElement).style.display = "none";
 // 静态：设置相机视图
  viewer.scene.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(104.05167, 30.630862, 3000),
  });

  // 飞入效果：相机位置
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(104.05167, 30.630862, 3000),
  });
    //去除版权信息
  (viewer.cesiumWidget.creditContainer as HTMLElement).style.display = "none";
    }
onMounted(() => {
  initCesium();
});
</script>
<style lang="scss" scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

Cesium.Cartesian3.fromDegrees(longitude, latitude, height, ellipsoid, result)

效果图：

4、cesium相关配置

中文网地址：http://cesium.xin/cesium/cn/Documentation1.62/Viewer.html