cesium BIM模型 根据scenetree.json分层加载

html (树)

<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>

css样式

.bimStyle {
    // transform: scale(0.7);
    font-size: 18px;
    font-family: sans-serif;
    width: 300px;
    height: 330px;
    background-color: rgba(255, 255, 255, 1);
    position: absolute;
    left: 346px;
    bottom: 30px;
    &-title {
      font-size: 20px;
      padding: 10px 28px;
    }
    &-tree {
      width: 90%;
      height: 77%;
      margin: 10px 16px;
      overflow-y: auto;
    }
  }

data

const tileset_ZHFW = null
data(){
  return{
    bimDataShow: false,
    checkBimData: [],
    expandedBimData: [],
  }
}

tileset_ZHFW位置 

 方法调用

init(){
const that = this
  Cesium.Resource.fetchJson({
        url: 'xxx/xxx/scenetree.json'
      }).then(response => {
        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: 'xxx/xxx/tileset.json',
            shadows: Cesium.ShadowMode.DISABLED
          })
        )
   setTimeout(function () {
        const params = {
          tx: 118.00932076253854,
          ty: 24.59535352610416,
          tz: -10,
          rx: 0,
          ry: 0, 
          rz: -50, 
          scale: 1.0
        }
        that.update3dtilesMaxtrix(tileset_ZHFW, params) // 模型旋转平移缩放
      }, 2000)
},
update3dtilesMaxtrix(tileset, params) {
      debugger
      // 旋转
      var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx))
      var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry))
      var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz))
      var rotationX = Cesium.Matrix4.fromRotationTranslation(mx)
      var rotationY = Cesium.Matrix4.fromRotationTranslation(my)
      var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz)
      // 平移
      var position = Cesium.Cartesian3.fromDegrees(
        params.tx,
        params.ty,
        params.tz
      )
      var m = Cesium.Transforms.eastNorthUpToFixedFrame(position)
      // 旋转、平移矩阵相乘
      const scale = Cesium.Matrix4.fromUniformScale(params.scale || 1.0)
      // //缩放
      Cesium.Matrix4.multiply(m, scale, m)

      Cesium.Matrix4.multiply(m, rotationX, m)
      Cesium.Matrix4.multiply(m, rotationY, m)
      Cesium.Matrix4.multiply(m, rotationZ, m)
      // 赋值给tileset

      tileset.root.transform = m
    },
bimCheckClick(node, data) {
      debugger
      const conditionBimArr = []
      const checkedKeys = data.checkedKeys
      if (data.checkedKeys.length) {
        this.bimDataArr[0].children.forEach(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
        }
      })
    }

实现结果

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 11
    评论
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我就是你的语法糖️

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值