<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>BIM模型</title> <link href="../libs/supermap10/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> <link href="../libs/supermap10/css/pretty.css" rel="stylesheet"> <script src="../libs/supermap10/examples/js/jquery.min.js"></script> <script src="../libs/supermap10/examples/js/config.js"></script> <script src="../libs/supermap10/examples/js/bootstrap.min.js"></script> <script src="../libs/supermap10/examples/js/bootstrap-select.min.js"></script> <script src="../libs/supermap10/examples/js/bootstrap-treeview.js"></script> <script src="../libs/supermap10/examples/js/spectrum.js"></script> <script type="text/javascript" src="../libs/supermap10/examples/js/require.min.js" data-main="../libs/supermap10/examples/js/main"></script> </head> <body> <div id="cesiumContainer"></div> <div id='loadingbar' class="spinnerloading"> <div class="spinner-container container1"> <div class="circle1"></div> <div class="circle2"></wdiv> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="spinner-container container2"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="spinner-container container3"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> </div> <div id='tool-menu' class='tool-menu'> <a data-toggle='dropdown' id='layerMangerBtn' title='圖層管理' class='tool-menu-btn tool-menu-btn-inverse'> <span class='smicon-layerlist tool-menu-btn-icon'></span> <div class="dropDown-container treeview-dropDown-container" id="treeContainer"> <div id='layerTree'></div> </div> </a> <a class='tool-menu-btn tool-menu-btn-inverse' style='padding:10px 0px;'><span style='border-left : 1px solid #dddddd;'></span></a> <div id='tool-menu-btn-group' class='tool-menu-btn-group'> <a data-toggle='dropdown' id='colorBtn' title='選中顏色' class='tool-menu-btn tool-menu-btn-inverse'> <span class='fui-list-small-thumbnails tool-menu-btn-icon'></span> <div class="dropDown-container"> <div style='min-width : 100px;border-radius : 4px;text-align : left;padding : 10px;'> <label style="font-size:8px">選中顏色： </label><input class="colorPicker" size="8" data-bind="value: material,valueUpdate: 'input'" id="colorPicker"> </div> <div style="text-align : left;padding : 10px;"> <label>過濾透明度：</label><input type="number" min="0" max="1" step="0.1" value="0" id="select-filter-alpha" /> </div> </div> </a> </div> </div> <div id="bubble" class="bubble" style="bottom:0;left:82%;display:none;"> <div id="tools" style="text-align : right"> <span style="color: rgb(95, 74, 121);padding: 5px;position: absolute;left: 10px;top: 4px;">對象屬性</span> <span class="fui-export" id="bubblePosition" style="color: darkgrey; padding:5px" title="停靠"></span> <span class="fui-cross" title="關閉" id="close" style="color: darkgrey;padding:5px"></span> </div> <div style="overflow-y:scroll;height:150px" id="tableContainer"> <table id="tab"></table> </div> </div> <script type="text/javascript"> function onload(Cesium) { // 初始化viewer部件 var viewer = new Cesium.Viewer('cesiumContainer'); viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({ url: 'https://dev.virtualearth.net', mapStyle: Cesium.BingMapsStyle.AERIAL, key: URL_CONFIG.BING_MAP_KEY })); var scene = viewer.scene; var imageryLayers = viewer.imageryLayers; var baseLayer = imageryLayers.get(0); scene.camera.frustum.near = 0.01; var widget = viewer.cesiumWidget; var infoboxContainer = document.getElementById("bubble"); viewer.customInfobox = infoboxContainer; var list = []; $("#toolbar").show(); $('#loadingbar').remove(); var viewModel = { material: '#ffffff', }; $("#colorPicker").spectrum({ color: "rgba(23,92,239,0.5)", showPalette: true, showAlpha: true, localStorageKey: "spectrum.demo", palette: palette }); Cesium.knockout.track(viewModel); var toolbar = document.getElementById('colorBtn'); Cesium.knockout.applyBindings(viewModel, toolbar); try { //場景添加S3M圖層服務 var promise = scene.open("http://XXXX/iserver/services/3D-XXXX/rest/realspace"); // var promise = scene.open(URL_CONFIG.SCENE_BIMBUILDING); Cesium.when(promise, function(layers) { //設置相機位置、方向，定位至模型 // scene.camera.setView({ // destination: new Cesium.Cartesian3(-2180753.065987198, 4379023.266141494, 4092583.575045952), // orientation: { // heading: 4.0392222751147955, // pitch: 0.010279641987852584, // roll: 1.240962888005015e-11 // } // }); //初始化樹形菜單 var $tree = $('#layerTree').treeview({ data: [{ text: "圖層列表", selectable: false }], showIcon: false, showCheckbox: true, backColor: 'transparent', color: '#fff', //通過NodeChecked狀態設置子圖層的顯示與隱藏的切換 onNodeChecked: function(evt, node) { var nodeName = node.text; let layer = layers[nodeName]; console.log(nodeName) var ids = []; for (var i = 0; i < list.length; i++) { if (list[i].datasetName == node.text) { ids = range(list[i].startID, list[i].endID); break; } } if (ids.length > 0) { layer.setOnlyObjsVisible(ids, true); } else if (node.text == "影像圖層" || node.text == "BingMap") { baseLayer.show = true; } else { layer.visible = true; } }, onNodeUnchecked: function(evt, node) { var nodeName = node.text; console.log(nodeName) let layer = layers[nodeName]; var ids = []; for (var i = 0; i < list.length; i++) { if (list[i].datasetName == node.text) { ids = range(list[i].startID, list[i].endID); break; } } if (ids.length > 0) { // layer.removeAllObjsColor(); layer.setOnlyObjsVisible(ids, false); } else if (node.text == "影像圖層" || node.text == "BingMap") { baseLayer.show = false; } else { layer.visible = false; } }, //節點被選中時，設該子圖層顏色為半透明 onNodeSelected: function(evt, node) { var nodeName = node.text; console.log(nodeName) let layer = layers[nodeName]; var ids = []; for (var i = 0; i < list.length; i++) { if (list[i].datasetName == node.text) { ids = range(list[i].startID, list[i].endID); } } if (ids.length > 0) { layer.releaseSelection(); layer.setSelection(ids); } else { layer.removeAllObjsColor(); } } }); var rootNode = $tree.treeview('getNode', 0); //加載圖層 var S3MNode = $tree.treeview('addNode', [rootNode, { text: "S3M圖層", showDel: true, fontSize: '10pt', state: { checked: true } }]); // var layer = scene.layers.find("XXXX"); var layers = {}; var layersName = []; for (let i = 0; i < scene.layers._layers.length; i++) { let layer = scene.layers._layers._array[i]; //讀取子圖層信息，通過數組的方式返回子圖層的名稱以及子圖層所包含的對象的IDs layer.setQueryParameter({ url: "http://XXX/iserver/services/data-XXXX/rest/data", dataSourceName: "XXXX", dataSetName: layer._name, isMerge: true, keyWord: 'SmID' }); // layer.setQueryParameter({ // url: "http://www.supermapol.com/realspace/services/data-BIMbuilding/rest/data", // dataSourceName: "BIMBuilding", // isMerge: true // }); // datainfo(layer); var childNode = $tree.treeview('addNode', [S3MNode, { text: layer._name, showDel: true, fontSize: '10pt', state: { checked: true } }]); datainfo(layer, childNode); // 初始化選中顏色 var color = new Cesium.Color.fromCssColorString("rgba(23,92,239,0.5)"); layer.selectedColor = color; // 用戶自定義選中顏色 Cesium.knockout.getObservable(viewModel, 'material').subscribe( function(newValue) { var color = Cesium.Color.fromCssColorString(newValue); // layer.selectedColor = color; layersName.forEach(function(item, index, array) { // layers[item].selectionFiltrateByTransparency = Number($("#select-filter-alpha").val()); layers[item].selectedColor = color; }); } ); // 過濾指定透明度一下的要素，選擇其后的要素 layer.selectionFiltrateByTransparency = 0; layers[layer._name] = layer; layersName.push(layer._name); } //加載子圖層 function datainfo(layerChild, childNode) { layerChild.datasetInfo().then(function(result) { list = list.concat(result); if (result.length > 0) { for (var i = 0; i < result.length; i++) { $tree.treeview('addNode', [childNode, { text: result[i].datasetName, showDel: true, fontSize: '10pt', state: { checked: true } }]); } } }); } $("#select-filter-alpha").on('input propertychange', function() { layersName.forEach(function(item, index, array) { layers[item].selectionFiltrateByTransparency = Number($("#select-filter-alpha").val()); }) }); }, function(e) { if (widget._showRenderLoopErrors) { var title = '加載SCP失敗，請檢查網絡連接狀態或者url地址是否正確？'; widget.showErrorPanel(title, undefined, e); } }); } catch (e) { if (widget._showRenderLoopErrors) { var title = '渲染時發生錯誤，已停止渲染。'; widget.showErrorPanel(title, undefined, e); } } //點擊對象查詢對象屬性 var table = document.getElementById("tab"); viewer.pickEvent.addEventListener(function(feature) { $("#bubble").show(); console.log(feature); for (i = table.rows.length - 1; i > -1; i--) { table.deleteRow(i); } for (var key in feature) { var newRow = table.insertRow(); var cell1 = newRow.insertCell(); var cell2 = newRow.insertCell(); cell1.innerHTML = key; cell2.innerHTML = feature[key]; } }); $("#bubblePosition").click(function() { if ($("#bubblePosition").hasClass("fui-export")) { viewer.customInfobox = undefined; $("#bubble").removeClass("bubble").addClass("float"); $("#bubblePosition").removeClass("fui-export").addClass("fui-bubble"); $("#bubblePosition")[0].title = "懸浮"; $("#bubble").css({ 'left': '82%', 'bottom': '45%' }); $("#tableContainer").css({ 'height': '350px' }); } else if ($("#bubblePosition").hasClass("fui-bubble")) { $("#bubble").removeClass("float").addClass("bubble"); $("#bubblePosition").removeClass("fui-bubble").addClass("fui-export"); $("#bubblePosition")[0].title = "停靠"; $("#tableContainer").css({ 'height': '150px' }); viewer.customInfobox = infoboxContainer; } }); $("#close").click(function() { $("#bubble").hide(); }); function range(startID, endID) { var array = []; for (var i = startID; i < endID + 1; i++) { array.push(i); } return array; } //圖層列表的隱藏顯示 $(document).on('click.dropDown-container touchstart.dropDown-container', '[data-toggle=dropdown]', function(evt) { evt.stopPropagation(); var target = evt.target; if (!target.contains(evt.currentTarget) && target.tagName != 'SPAN') { return; } var $this = $(this), $parent, isActive; var $target = $this.children('div.dropDown-container'); if ($target.length == 0) { $('.dropDown-container').removeClass('dropDown-visible'); return; } isActive = $target.hasClass('dropDown-visible'); $('.dropDown-container').removeClass('dropDown-visible'); if (!isActive) { $target.addClass('dropDown-visible'); } return false; }); var height = $('body').height() * 0.85 + 'px'; $('#treeContainer').css({ 'height': height, 'min-width': '260px', 'text-align': 'left' }); } </script> </body> </html>