模型构建信息读取

<template>

  <div class="body">

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

    <div v-show="bimDataShow" class="bimStyle">

      <div class="bimStyle-title">图例</div>

      <div class="bimStyle-tree">

        <el-tree

          :data="bimDataArr"

          show-checkbox

          node-key="id"

          @check="bimCheckClick"

          :default-expanded-keys="expandedBimData"

          :default-checked-keys="checkBimData"

          :props="defaultProps"

        >

        </el-tree>

      </div>

    </div>

  </div>

</template>

<style scoped>

.bimStyle {

  font-size: 18px;

  font-family: sans-serif;

  width: 300px;

  height: 330px;

  background-color: rgba(255, 255, 255, 1);

  position: absolute;

  left: 0px;

  top: 10px;

}

</style>

<script>

import * as Cesium from "cesium/Cesium";

import "cesium/Widgets/widgets.css";

var arr2 = "";

let tileset_ZHFW = null;

var viewer;

window.tilesetFeatureXH = [];

export default {

  name: "Cesium3DTileset",

  data() {

    return {

      bimDataShow: true,

      checkBimData: [],

      expandedBimData: [],

      bimDataArr: [],

      defaultProps: {

        children: "children",

        label: "name",

      },

    };

  },

  mounted() {

    viewer = this.initCesium();

    this.init();

    tileset_ZHFW.allTilesLoaded.addEventListener(() => {

      tileset_ZHFW.style = new Cesium.Cesium3DTileStyle({

        color: {

          evaluateColor: (feature) => {

            //这里收集feature

            window.tilesetFeatureXH.push(feature);

            return feature.color;

          },

        },

      });

    });

    // 鼠标单击左键事件

    viewer.screenSpaceEventHandler.setInputAction(function onMouseClick(click) {

      const feature = viewer.scene.pick(click.position);

      if (feature instanceof Cesium.Cesium3DTileFeature) {

        const propertyIds = feature.getPropertyIds();

        const length = propertyIds.length;

        for (let i = 0; i < length; ++i) {

          const propertyId = propertyIds[i];

          console.log(`${propertyId}: ${feature.getProperty(propertyId)}`);

        }

      }

    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  },

  methods: {

    initCesium: function () {

      Cesium.Ion.defaultAccessToken =

        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZjg4ZjljZC1mZGM3LTRlZjEtYjg3MC00MjZkNGU3YjI5ZWUiLCJpZCI6MTU5NTIsImlhdCI6MTYwNTE0ODM5OX0.LjxeKrgAo7Ksk8405kSAhYwF0nKcF2w2DGJnKHh51N8";

      let viewer = new Cesium.Viewer("cesiumContainer", {

        animation: false,

        baseLayerPicker: false,

        fullscreenButton: false,

        geocoder: false,

        homeButton: false,

        infoBox: true,

        sceneModePicker: false,

        navigationHelpButton: false,

        scene3DOnly: true,

        timeline: false,

        selectionIndicator: false, //是否显示选取指示器组件

        shouldAnimate: false, //自动播放动画控件

        shadows: true, //是否显示光照投射的阴影

        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影

        sceneMode: Cesium.SceneMode.SCENE3D,

        clock: new Cesium.Clock(),

        imageryProvider: new Cesium.ArcGisMapServerImageryProvider({

          url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer?f=jsapi",

        }),

        // terrainProvider: new Cesium.CesiumTerrainProvider({

        //   url: "http://data.marsgis.cn/terrain",

        //   requestVertexNormals: true,

        // }),

      });

      return viewer;

    },

    init() {

      const that = this;

      Cesium.Resource.fetchJson({

        url: "http://localhost:8888/model/SampleData/testfk/model/scenetree.json",

      }).then((response) => {

        this.bimDataArr = response.scenes;

        that.getAllNodes(this.bimDataArr);

        this.bimDataArr = [];

        this.expandedBimData = [];

        this.checkBimData = [];

        this.bimDataArr = response.scenes;

        this.bimDataArr[0].name = "BIM";

        this.expandedBimData.push(this.bimDataArr[0].id);

        this.checkBimData.push(this.bimDataArr[0].id);

      });

      tileset_ZHFW = viewer.scene.primitives.add(

        new Cesium.Cesium3DTileset({

          url: "http://localhost:8888/model/SampleData/testfk/model/tileset.json",

        })

      );

      tileset_ZHFW.readyPromise.then((tileset) => {

        window.tileset = tileset;

        tileset.style = new Cesium.Cesium3DTileStyle({

          color: "rgba(255,255,255,0.5)",

          show: true,

        });

      });

      // 定位

      viewer.zoomTo(tileset_ZHFW);

    },

    getAllNodes(node = [], arr = []) {

      for (let item of node) {

        // arr.push(item.id)

        let data = Object.assign({}, item);

        delete data["children"];

        delete data["type"];

        data.modelId = "FKPSD";

        arr.push(data);

        // INSERT INTO model_relation(model_code, `name`, sphere, model_Id) VALUES ('XHPSD', 'geometry_104', '-2176941.82931018', '36660e59856b4de58a219bcf4e27eba3');

       

        data.name = data.name?data.name.replaceAll('_', '-'):'';

        data.businessId = data.businessId?data.businessId.replaceAll('_', '-'):'';

        arr2 +=

          "INSERT INTO model_relation(model_Id, `name`, sphere, glid, business_Id) VALUES ('" +

          data.modelId +

          "', '" +

          data.name +

          "', '" +

          data.sphere.join(",") +

          "', '" +

          data.id +

          "', '" +

          data.businessId +

          "');";

        console.log(

          "🚀 ~ file: 01Cesium3DTilesetCopy2.vue:176 ~ getAllNodes ~ arr2:",

          arr2

        );

        let parentArr = [];

        if (item.children) {

          // parentArr.push(...item.children);

          parentArr = item.children;

          parentArr.forEach((item2) => {

            item2.businessId = item.name;

          });

        }

        if (parentArr && parentArr.length) {

          this.getAllNodes(parentArr, arr);

        }

      }

      return arr;

    },

    bimCheckClick(node) {

      window.tilesetFeatureXH.forEach((item) => {

        if (item.getProperty("id") == node.id) {

          if (window.seleced) {

            window.seleced.color = window.selecedColor;

            window.selecedColor = undefined;

            window.seleced = undefined;

          }

          window.seleced = item;

          window.selecedColor = item.color;

          item.color = Cesium.Color.AQUA;

        }

      });

      let tileset = window.tileset;

      var center = new Cesium.Cartesian3(

        node.sphere[0],

        node.sphere[1],

        node.sphere[2]

      );

      if (tileset._orginMatrixInverse && tileset._root.transform) {

        var mat = Cesium.Matrix4.multiply(

          tileset._root.transform,

          tileset._orginMatrixInverse,

          new Cesium.Matrix4()

        );

        center = Cesium.Matrix4.multiplyByPoint(

          mat,

          center,

          new Cesium.Cartesian3()

        );

      }

      var boundingSphere = new Cesium.BoundingSphere(center, node.sphere[3]);

      viewer.scene.camera.flyToBoundingSphere(boundingSphere, { duration: 2 });

    },

    bimCheckClick1(node, data) {

 

      const conditionBimArr = [];

      const checkedKeys = data.checkedKeys;

      if (data.checkedKeys.length) {

        this.bimDataArr[0].children.forEach((item) => {

          console.log(

            "🚀 ~ file: 01Cesium3DTilesetCopy2.vue:250 ~ this.bimDataArr[0].children.forEach ~ item:",

            item

          );

          if (item.children) {

            item.children.forEach((it) => {

              checkedKeys.forEach((res) => {

                if (it.id == res) {

                  const a = [

                    "${name} === '" + it.name + "'",

                    "rgba(255,255,255,1)",

                  ];

                  conditionBimArr.push(a);

                }

              });

            });

          } else {

            checkedKeys.forEach((res) => {

              if (item.id == res) {

                const a = [

                  "${name} === '" + item.name + "'",

                  "rgba(255,255,255,1)",

                ];

                conditionBimArr.push(a);

              }

            });

          }

        });

      }

      conditionBimArr.push(["true", "rgba(255,255,255,0)"]);

      tileset_ZHFW.style = new Cesium.Cesium3DTileStyle({

        color: {

          conditions: conditionBimArr,

        },

      });

    },

  },

};

</script>