integrated_traffic_vue/src/components/map_tools/loadglb.js

import axios from "axios";
import { useUserStore } from "@/pinia/user";
import pinia from "@/pinia";

const userStore = useUserStore(pinia);
const pls_ip = userStore.getUserInfo.POST_URL;
const url = pls_ip.replace("8084", "9000") + "/buildr/public/models/glb/";
export class Loadglb {
  static modelMap = {};
  constructor(icy) {
    this.icy = icy;
    this.model_def_group = null;
    this.scene = null;
    this.idList = [];
    this.entityList = [];
    this.number = 0;
    this.building_group = null;
    this.groundHeight = 0.2; // 设置地面的高度
  }

  async fetchData() {
    try {
      const response = await axios.get(
        pls_ip.replace("8084", "9000") +
          "/buildr/public/models/scene_000001.json"
      );
      // 将获取的数据保存到实例的属性中
      this.scene = response.data.scene;
      this.model_def_group = response.data.scene.model_def_group;

      const map = new Map();
      this.model_def_group.forEach((i) => {
        map.set(i.guid.split("-")[3], { name: i.name, id: i.guid });
      });
      this.scene.building_group.forEach((i) => {
        i.layer_group.forEach((a) => {
          a.modelName = map.get(a.guid[0].split("-")[3]);
        });
      });
      this.building_group = this.scene.building_group;
      // console.log(this.building_group);
    } catch (error) {
      // 处理可能错误
      console.error(error);
    }
  }

  async model(Model) {
    try {
      // 执行 axios 请求并等待 fetchData 函数的异步操作完成
      await this.fetchData();
      const modelList = {};
      this.scene.model_def_group.forEach((item) => {
        modelList[item.guid] = item.name;
      });
      const modelTotal = this.scene.building_group.length;
      this.createModel(Model, modelList, modelTotal);
      this.scene.ground_group.forEach((ground) => {
        const lon = ground.transform.translate.x;
        const lat = ground.transform.translate.y;
        const scale = ground.transform.scale;
        ground.model_ref_group.forEach((layer) => {
          // console.log(layer,'111');
          const height = this.groundHeight;
          const unit = {
            lon,
            lat,
            scale,
            id: layer.model_def_guid,
          };
          this.logNum([layer], height, unit, modelList, Model);
        });
      });
    } catch (error) {
      // 处理可能的错误
      console.error(error);
    }
  }

  createModel(Model, modelList, modelTotal) {
    this.scene.building_group.forEach((building, index) => {
      if (
        Number(this.number * 2) <= index &&
        index < Number((this.number + 1) * 2)
      ) {
        const lon = building.transform.translate.x;
        const lat = building.transform.translate.y;
        const scale = building.transform.scale;
        building.layer_group.forEach((layer) => {
          // console.log(layer,'111');
          const height = Number(layer.height[0] + this.groundHeight);
          const unit = {
            lon,
            lat,
            scale,
            id: layer.guid[0],
          };
          this.logNum(layer.model_ref_group, height, unit, modelList, Model);
        });
      }
    });
    if (this.number * 2 < modelTotal) {
      const throttle = setTimeout(() => {
        this.number++;
        this.createModel(Model, modelList, modelTotal);
        sessionStorage.setItem("loading", (this.number * 2) / modelTotal);
        clearTimeout(throttle);
      }, 20);
      if (
        (this.number * 2) / modelTotal >= 0.5 &&
        (this.number * 2) / modelTotal < 0.8
      ) {
        sessionStorage.setItem("loadModel", "过半");
      } else if ((this.number * 2) / modelTotal >= 0.8) {
        sessionStorage.setItem("loadModel", "临底");
      }
    } else {
      console.log(
        "加载完成 ，此次加载：" +
          modelTotal +
          "栋建筑，共：" +
          this.model_def_group.length +
          "个模型"
      );
      sessionStorage.setItem("loadModel", "完成");
    }
  }

  logNum(red, height, unit, modelList, Model) {
    red.forEach((item) => {
      if (this.idList.indexOf(item.model_def_guid) !== -1) {
        return;
      }
      this.idList.push(item.model_def_guid);
      if (
        Object.prototype.hasOwnProperty.call(
          Loadglb.modelMap,
          `${unit.id.split("-")[3].slice(0, unit.id.split("-")[3].length - 2)}`
        )
      ) {
        Loadglb.modelMap[
          `${unit.id.split("-")[3].slice(0, unit.id.split("-")[3].length - 2)}`
        ].push(item.model_def_guid);
      } else {
        Loadglb.modelMap[
          `${unit.id.split("-")[3].slice(0, unit.id.split("-")[3].length - 2)}`
        ] = [item.model_def_guid];
      }
      const m = new Model(this.icy, {
        id: item.model_def_guid,
        name: "建筑",
        url: `${url}${modelList[item.model_def_guid]}.gltf`,
        height,
        lon: unit.lon,
        lat: unit.lat,
        scale: unit.scale,
        angle: [90, 0, 0],
        // angle: [97.4843053, 0, 0]
      });
      this.entityList.push(m);
    });
  }

  getArr() {
    return this.building_group;
  }
}