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