cesium實現BIM模型動態載入（分層載入）——通過tree來控制
阿新 • • 發佈：2018-12-12
<!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>