vben：vite+vue3使用cesium的方法以及遇到的一些坑

1.使用的是vben的2.7版本，想要引用cesium地球插件，需要先下载cesium以及vite-plugin-cesium
npm i cesium vite-plugin-cesium
或者
yarn add cesium vite-plugin-cesium

• 我下的cesium是版本^1.86.0；vite-plugin-cesium的版本是 ^1.2.10，仅供参考。
• 此处遇到的坑：下载cesium以及vite-plugin-cesium的时候发现怎么都下载不进去，然后检查之后发现是package-lock.json锁住了，此时我通过将package-lock.json这个文件删除的方法得以解决。
  解决方法参考：npm ERR! Cannot read property ‘match’ of undefined 错误处理

2.插件下载完成后，在vben的build/vite/plugin/index.ts文件下进行vite-plugin-cesium的配置。

• import导入：import cesium from 'vite-plugin-cesium'
• 使用：vitePlugins.push(cesium())
  
  3.然后在使用地球的页面引入。demo如下：

<template>
  <div class="home-page">
    <div ref="cesiumContainer" style="position: absolute; width: 100%; height: 100%;"></div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref, reactive } from 'vue';
  import * as Cesium from 'cesium';

  export default defineComponent({
    setup() {
      const cesiumContainer = ref('');
      onMounted(() => {
        const viewer = reactive(
          new Cesium.Viewer(cesiumContainer.value, {
            geocoder: false,
            homeButton: false,
            sceneModePicker: false,
            baseLayerPicker: false,
            navigationHelpButton: false,
            animation: false,
            timeline: false,
            fullscreenButton: false,
            vrButton: false,
            scene3DOnly: true,
             // 调用高德地图api，使用默认的bingmaps会报错：get net::ERR_CONNECTION_RESET错误
            imageryProvider: new Cesium.UrlTemplateImageryProvider({
              url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
            }),
          }),
        );

		// 提示错误Blocked script execution in ‘about:blank’ because the document’s frame is sandboxed and the ‘allow-scripts’ permission is not set.的解决方法
        let iframe = document.getElementsByClassName('cesium-infoBox-iframe')[0];
        iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms');
        iframe.setAttribute('src', ''); //必须设置src为空 否则不会生效

        // 去掉水印
        viewer._cesiumWidget.creditContainer.style.display = 'none';

        // 初始视角
        viewer.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(112, 10, 7000000.0),
          orientation: {
            // 指向
            heading: Cesium.Math.toRadians(-10),
            // 视角
            pitch: Cesium.Math.toRadians(-70),
            roll: 0.0,
          },
        });
      });
      return { cesiumContainer };
    },
  });
</script>

<style lang="less" scoped>
  .home-page {
    width: 100%;
    height: 100%;
  }
</style>

此处需要注意的坑：

• cesium进入的时候如果出现地球一直不断的放大撑开页面，那么可以通过给地球的容器添加一个固定的宽高，类似overflow的解决方式，或者添加一个定位，即position:absolute/fixed。
• 进去页面F12检查，提示错误Blocked script execution in ‘about:blank’ because the document’s frame is sandboxed and the ‘allow-scripts’ permission is not set.，加入以下代码解决：

let iframe = document.getElementsByClassName('cesium-infoBox-iframe')[0];
iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms');
iframe.setAttribute('src', ''); //必须设置src为空 否则不会生效

参考：Cesium信息框不能执行js语句解决办法

• 使用默认的bingmaps会报错：get net::ERR_CONNECTION_RESET错误，可以在viewer中将地球贴图换成高德地图的api

imageryProvider: new Cesium.UrlTemplateImageryProvider({
	url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
}),

参考：Cesium get net::ERR_CONNECTION_RESET错误