vue3整合cesium（ts+vite构建器）

1.引入cesium依赖

npm install cesium
npm install vite-plugin-cesium

2.vite.config.ts中配置cesium插件

3.在vue文件中引入cesium使用

import * as Cesium from "cesium";

4.初始化cesium并加载模型

const initMidel = async () => {
  Cesium.Ion.defaultAccessToken = '使用自己的token'; // https://cesium.com 免费注册账户申请
  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(80, 22, 130, 55)  //默认视角定位中国上空
  viewer = new Cesium.Viewer(cesiumContainerRef.value, {
    // 是否显示查询按钮
    geocoder: false,
    // 控制查看器的显示模式
    sceneModePicker: false,
    // 是否显示图层选择器
    baseLayerPicker: false,
    // 是否显示帮助
    navigationHelpButton: false,
    animation: false, //是否显示动画控件
    shouldAnimate: true,
    homeButton: false, //是否显示Home按钮
    fullscreenButton: false, //是否显示全屏按钮
    timeline: false, //是否显示时间线控件
    infoBox: true, //是否显示点击要素之后显示的信息
    requestRenderMode: true, //启用请求渲染模式
    // scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
    sceneMode: props.chartConfig.option.modelOption.sceneMode, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
    fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
    // 地形
    terrain: Cesium.Terrain.fromWorldTerrain({
      requestVertexNormals: true,
      requestWaterMask: true
    })
  });
  scene = viewer.scene;
  viewer.scene.globe.enableLighting = false;
  viewer._cesiumWidget._creditContainer.style.display = "none"; //去除版权样式
  //调用天地图瓦片
  viewer.imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
    url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=你申请的token",
    layer: "tdtBasicLayer",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible",
    minimumLevel: 0,
    maximumLevel: 20
  })
  viewer.scene.globe.show = true;

	//此处共加载三个b3dm模型（当cesium以3d方式加载有重叠区域的两块模型时重部分看起来被整合到一起了，其实没有，利用这一特性可以将分区域获取的模型拼接为一个完整的模型）
	//模型在项目中的public文件夹下
  var tileset1 = await Cesium.Cesium3DTileset.fromUrl('/3DTiles/qihe/qihe-e/terra_b3dms/tileset.json', {
    //控制切片视角显示的数量，可调整性能
    maximumScreenSpaceError: 1,
    maximumNumberOfLoadedTiles: 100000000,
    show: true,
    skipLevelOfDetail: true,
    baseScreenSpaceError: 1024,
    skipScreenSpaceErrorFactor: 16,
    skipLevels: 1,
    immediatelyLoadDesiredLevelOfDetail: false,
    loadSiblings: false,
    cullWithChildrenBounds: true
  } as any);

  var tileset2 = await Cesium.Cesium3DTileset.fromUrl('/3DTiles/qihe/qihe-m/terra_b3dms/tileset.json', {
    //控制切片视角显示的数量，可调整性能
    maximumScreenSpaceError: 1,
    maximumNumberOfLoadedTiles: 1000,
    show: true,
    skipLevelOfDetail: true,
    baseScreenSpaceError: 1024,
    skipScreenSpaceErrorFactor: 16,
    skipLevels: 1,
    immediatelyLoadDesiredLevelOfDetail: false,
    loadSiblings: false,
    cullWithChildrenBounds: true
  } as any);

  var tileset3 = await Cesium.Cesium3DTileset.fromUrl('/3DTiles/qihe/qihe-w/terra_b3dms/tileset.json', {
    //控制切片视角显示的数量，可调整性能
    maximumScreenSpaceError: 1,
    maximumNumberOfLoadedTiles: 10000,
    show: true,
    skipLevelOfDetail: true,
    baseScreenSpaceError: 1024,
    skipScreenSpaceErrorFactor: 16,
    skipLevels: 1,
    immediatelyLoadDesiredLevelOfDetail: false,
    loadSiblings: false,
    cullWithChildrenBounds: true
  } as any);

  // 设置场景的默认缩放级别
  viewer.scene.primitives.add(tileset1);
  viewer.scene.primitives.add(tileset2);
  viewer.scene.primitives.add(tileset3);
  const heightOffset = 0.0;  //高度
  const boundingSphere = tileset1.boundingSphere;
  const cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
  const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
  const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
  const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());

  tileset1.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
  tileset2.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
  tileset3.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

  viewer.zoomTo(tileset1, new Cesium.HeadingPitchRange(0.5, -0.2, tileset1.boundingSphere.radius * 1.0));
  dataHandle(props.chartConfig.option.dataset)
}