版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m0_37694604/article/details/82886335
cesium做BIM的动态加载,没有找到遍历模型的好方法,暂时使用目录树进行控制动态显示。
数据是由cesiumlab处理的,并且会自动生成一个scenetree.json文件(这篇博客加载的tree对于scenetree.json稍微做了修改)
最终实现的效果就是勾选目录树的复选框则对应的BIM组件会被加载
完成效果不是很好,多有纰漏。咨询或赐教请加QQ:1558426824
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tree dynamic add model</title>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>919cesium BIM tree</title>
<link rel="stylesheet" type="text/css" href="../jquery/jquery-easyui-1.5.4.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery/jquery-easyui-1.5.4.2/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../jquery/jquery-easyui-1.5.4.2/demo/demo.css">
<link rel="stylesheet" type="text/css" href="../jquery/jquery-easyui-1.5.4.2/style.css">
<script type="text/javascript" src="../jquery/jquery-easyui-1.5.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../jquery/jquery-easyui-1.5.4.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery/jquery-easyui-1.5.4.2/jstree.min.js"></script>
<script src="../Build/Cesium/Cesium.js"></script>
<script type="text/javascript" src="../Cesium-1.48/Apps/Sandcastle/Sandcastle-header.js"></script>
<style>
@import url(../Build/Cesium/Widgets/bucket.css);
</style>
</head>
<body>
<div id="cesiumContainer" class="fullSize">
</div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"style="overflow-x: auto;overflow-y: visible">
<div style="margin: 10px 0;overflow-x: auto;overflow-y: auto">
<input type="checkbox" checked onchange="$('#tt').tree({cascadeCheck:$(this).is(':checked')})">CascadeCheck
</div>
<div class="easyui-panel" style="padding: 5px; overflow-y:auto; overflow-x:auto; width:230px; height:800px;">
<ul id="tt" class="easyui-tree" data-options="url:'../geojson/921.json',method:'get',animate:true,checkbox:true">
</ul>
</div>
</div>
<script type="text/javascript">
var viewer = new Cesium.Viewer('cesiumContainer', {
shouldAnimate : true,
animation : false,
baseLayerPicker : false,//是否显示图层选择器
fullscreenButton : false,//是否显示全屏按钮
geocoder : false,//是否显示geocoder小器件,右上角查询按钮
homeButton : false,//是否显示Home按钮
infoBox : false,//是否显示信息框
sceneModePicker : false,//是否显示3D/2D选择器
selectionIndicator : false,//是否显示选取指示器组件
timeline : false,//是否显示时间轴
navigationHelpButton : false//是否显示右上角的帮助按钮
});
//去除版权信息
viewer._cesiumWidget._creditContainer.style.display = "none";
var scene = viewer.scene;
scene.globe.depthTestAgainstTerrain = true;
scene.camera.setView({
endTransform: Cesium.Matrix4.IDENTITY,
destination : new Cesium.Cartesian3.fromDegrees(121.118756, 31.324434)
});
// var bimUrl = "http://localhost:9002/api/folder/8173b389a7bf4da489619d5bf1c9246b/tileset.json";
var bimUrl = "../models/testBuilding/tileset.json";
var tileset = new Cesium.Cesium3DTileset({
url: bimUrl
});
$('#tt').tree({
onClick: function (node) {
},
//这个功能虽然实现了,但是写的很不好
onCheck: function (node) {
var nodes = $('#tt').tree('getChecked');
var str = '';
if(nodes.length > 0){
var strJson=[];
var str='';
for( var i = 0;i < nodes.length; i++){
if((nodes[i].children)&&(nodes[i].parent == null)&&(nodes[i].id !=1)){//找出了中间目录,剔除根目录
str=nodes[i].text;
var temp=[];
temp.push("${name} === "+"'"+str+"'");
temp.push('true');
strJson.push(temp);
// console.log(strJson);
}
if(!nodes[i].children){
//console.log("叶子目录");
str=nodes[i].text;
var temp=[];
temp.push("${name} === "+"'"+str+"'");
temp.push('true');
strJson.push(temp);
// console.log(strJson);
}
}
tileset.readyPromise.then(function(tileset) {
tileset.style=new Cesium.Cesium3DTileStyle({
show:{
conditions: strJson
}
})
scene.primitives.add(tileset);
viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.3, -0.2, tileset.boundingSphere.radius));
}).otherwise(function(error) {
console.log(error);
});
}
if(nodes.length == 0){
// scene.primitives.removeAll();
scene.primitives.remove(tileset);
}
tileset.allTilesLoaded.addEventListener(function() {
console.log('All tiles are loaded');
});
}
});
</script>
</body>
</html>