如何在vue中使用Cesium加载3Dtiles数据文件和obj数据文件

背景：企业项目在管理界面可以上传3Dtiles数据文件和obj数据文件，需要在用户界面可视化展示

注意后端接口返回3Diltes或者obj数据的路径如下

• http://192.168.102.194:9000/product8/PORTAL/CONTENT/1657728000000/da01bc81-65f3-4312-8921-533fdbbc9d2d/隧道轻量化/tileset.json

Vue初始化Cesium

前提： Vue使用Cesium处理npm，还需要在Webpack文件配置，详情可看上期文章

基于Vue的Cesium配置

// 初始化
<template>
   // 地图容器 
  <div class="img-box" id="cesiumContainer"></div>
</template>

<script>
export default {
  props: ["fileUrl","srs","workspace","zb"],
  data() {
    return {
      viewer: {},
      Cesium: {},
      highlightColor: null,
      normalColor: null,
    };
  },
  methods: {
    // init ： 初始化Cesium
    init() {
      const Cesium = this.cesium;
      this.highlightColor = Cesium.Color.GREEN.withAlpha(0.6);
      this.normalColor = Cesium.Color.YELLOW.withAlpha(0.6);
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        //先行禁止infoBox弹出
        selectionIndicator: false,
        infoBox: false,
        //baseLayerPicker : false,
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        fullscreenButton: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
        fulllscreenButtond: false,
        vrButton: false,
      });
      this.viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
    },
  },
};
</script>

加载3Dtiles数据或者obj数据（两种数据都是3D）

// 加载3Dtiles
add3D(fileUrl) {
	 const Cesium = this.cesium;
	 var tiles3D = this.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
	     url: fileUrl, //3Dtiles
	     maximumScreenSpaceError: 2, //最大的屏幕空间误差
	     maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
	 })); 
	 this.viewer.flyTo(tiles3D);
},

在Vue中Cesium加载WMS或者shp