<template>
|
<div class="FloorWrap">
|
<div id="closeBtn_onclick"><span>×</span></div>
|
<div id="FloorBox">
|
<div class="checkbox checkbox-primary checkbox-inline" id="selectBox">
|
查看层级：
|
<select id="selectlevel">
|
<option value="-2" style="background: rgba(0, 0, 0, 0.4)">
|
----
|
</option>
|
<option value="0" style="background: rgba(0, 0, 0, 0.4)">-1层</option>
|
<option value="1" style="background: rgba(0, 0, 0, 0.4)">1层</option>
|
<option value="2" style="background: rgba(0, 0, 0, 0.4)">2层</option>
|
<option value="3" style="background: rgba(0, 0, 0, 0.4)">3层</option>
|
<option value="4" style="background: rgba(0, 0, 0, 0.4)">4层</option>
|
</select>
|
偏移方向：
|
<input id="moveX" class="styled" checked type="checkbox" />
|
<label>X轴</label>
|
|
<input id="moveY" class="styled" type="checkbox" />
|
<label>Y轴</label>
|
|
<input id="moveZ" class="styled" type="checkbox" />
|
<label>Z轴</label>
|
</div>
|
<br />
|
<div id="toolbar">
|
<div>
|
偏移距离：
|
<input
|
type="range"
|
min="-200"
|
max="200"
|
step="1"
|
data-bind="value: distance, valueUpdate: 'input'"
|
/>
|
<input type="text" size="5" data-bind="value: distance" />
|
|
<input
|
id="showBuild_onclick"
|
type="button"
|
class="btn btn-primary"
|
value="展开"
|
/>
|
|
<input
|
id="restore_onclick"
|
type="button"
|
class="btn btn-primary"
|
value="恢复"
|
/>
|
</div>
|
</div>
|
</div>
|
<table id="dataTable"></table>
|
</div>
|
</template>
|
|
<script>
|
let showModel;
|
let modelLayer;
|
import Bus from "@tools/Bus";
|
|
export default {
|
name: "FCFH",
|
data() {
|
return {};
|
},
|
mounted() {
|
$(function () {
|
modelLayer = sgworld.Creator.create3DTilesets(
|
"",
|
"http://10.10.4.121:8070/gisserver/c3dserver/YHYQ1/tileset.json",
|
{},
|
{},
|
"0",
|
true,
|
(data) => {
|
let boundingSphere = data.item.boundingSphere;
|
Viewer.zoomTo(
|
data.item,
|
new SmartEarth.Cesium.HeadingPitchRange(
|
0,
|
-0.7,
|
3 * boundingSphere.radius
|
)
|
);
|
}
|
);
|
setTimeout(() => {
|
showModel = sgworld.analysis.ShowBuildingRoom({
|
model: modelLayer.item, //模型基元Primitives
|
distance: { x: 30, y: 0, z: 0 },
|
//selectLevelColor: new SmartEarth.Cesium.Color.fromCssColorString("rgba(240,240,240,0.95)"), //展示模型的颜色
|
//notSelectColor:new SmartEarth.Cesium.Color.fromCssColorString("rgba(102,204,255,0.5)"), //非展示模型的颜色
|
//highlightColor:new SmartEarth.Cesium.Color.fromCssColorString("rgba(255,215,0,0.9)"), //选择展示模型的高亮颜色
|
});
|
}, 1000);
|
//选择展开
|
$("#showBuild_onclick").click(function () {
|
let num = Number($("#selectlevel").val());
|
showModel.updataModel("FloorNum", [num]); //第一个参数为选择筛选的属性名，第二个为保留的数据实例
|
});
|
//恢复
|
$("#restore_onclick").click(function () {
|
deleteAllRows();
|
showModel.updataModel("", []);
|
});
|
//关闭
|
$("#closeBtn_onclick").click(function () {
|
deleteAllRows();
|
showModel.updataModel("", []);
|
sgworld.Creator.DeleteObject(modelLayer);
|
Bus.$emit("ShowFCFH", false);
|
});
|
//表格数据
|
const dataTable = document.getElementById("dataTable");
|
function createTableRow(dataObj) {
|
for (const key in dataObj) {
|
if (dataObj.hasOwnProperty(key)) {
|
const row = document.createElement("tr");
|
const cellName = document.createElement("td");
|
cellName.textContent = key;
|
row.appendChild(cellName);
|
const cellValue = document.createElement("td");
|
cellValue.textContent = dataObj[key];
|
row.appendChild(cellValue);
|
dataTable.appendChild(row);
|
}
|
}
|
}
|
function loadTable(dataObj) {
|
deleteAllRows();
|
createTableRow(dataObj);
|
}
|
//删除表格
|
function deleteAllRows() {
|
while (dataTable.firstChild) {
|
dataTable.removeChild(dataTable.firstChild);
|
}
|
}
|
//点击选择
|
const editHandler = new SmartEarth.Cesium.ScreenSpaceEventHandler(
|
sgworld.coreMap.scene.canvas
|
);
|
editHandler.setInputAction((event) => {
|
let screenWH = {
|
width: $(window).width(),
|
height: $(window).height(),
|
};
|
$("#dataTable").css("left", event.position.x);
|
$("#dataTable").css("top", event.position.y);
|
//获取点击的模型数据
|
let obj = showModel.clickCheckInfo(event.position);
|
//加载表格
|
loadTable(obj);
|
}, SmartEarth.Cesium.ScreenSpaceEventType.LEFT_DOWN);
|
|
//模型偏移量
|
var moveModel = {
|
moveX: true,
|
moveY: false,
|
moveZ: false,
|
distance: 45,
|
};
|
//选择轴的改变
|
$("#moveX").change(function () {
|
var isChecked = $(this).prop("checked");
|
moveModel.moveX = isChecked;
|
showModel.changeStyleOptions({
|
distance: {
|
x: moveModel.moveX === true ? moveModel.distance : 0,
|
y: moveModel.moveY === true ? moveModel.distance : 0,
|
z: moveModel.moveZ === true ? moveModel.distance : 0,
|
},
|
});
|
});
|
$("#moveY").change(function () {
|
var isChecked = $(this).prop("checked");
|
moveModel.moveY = isChecked;
|
showModel.changeStyleOptions({
|
distance: {
|
x: moveModel.moveX === true ? moveModel.distance : 0,
|
y: moveModel.moveY === true ? moveModel.distance : 0,
|
z: moveModel.moveZ === true ? moveModel.distance : 0,
|
},
|
});
|
});
|
$("#moveZ").change(function () {
|
var isChecked = $(this).prop("checked");
|
moveModel.moveZ = isChecked;
|
showModel.changeStyleOptions({
|
distance: {
|
x: moveModel.moveX === true ? moveModel.distance : 0,
|
y: moveModel.moveY === true ? moveModel.distance : 0,
|
z: moveModel.moveZ === true ? moveModel.distance : 0,
|
},
|
});
|
});
|
//更新模型偏移量
|
function subscribeLayerParameter(name) {
|
SmartEarth.Cesium.knockout
|
.getObservable(moveModel, name)
|
.subscribe(function (newValue) {
|
moveModel[name] = parseFloat(newValue);
|
showModel.changeStyleOptions({
|
distance: {
|
x: moveModel.moveX === true ? moveModel.distance : 0,
|
y: moveModel.moveY === true ? moveModel.distance : 0,
|
z: moveModel.moveZ === true ? moveModel.distance : 0,
|
},
|
});
|
});
|
}
|
SmartEarth.Cesium.knockout.track(moveModel);
|
var toolbar = document.getElementById("toolbar");
|
SmartEarth.Cesium.knockout.applyBindings(moveModel, toolbar);
|
subscribeLayerParameter("distance");
|
});
|
},
|
};
|
</script>
|
|
<style scoped>
|
.FloorWrap {
|
color: #fff;
|
}
|
#closeBtn_onclick {
|
width: 20px;
|
cursor: pointer;
|
margin-left: auto;
|
margin-bottom: 8px;
|
}
|
#closeBtn_onclick span {
|
font-size: 20px;
|
}
|
</style>
|
<style >
|
#dataTable {
|
background-color: rgba(0, 0, 0, 0.4);
|
position: fixed;
|
left: 150px;
|
top: 100px;
|
max-width: 220px;
|
max-height: 350px;
|
border-collapse: collapse;
|
border: 1px solid #ccc;
|
overflow-y: auto;
|
display: block;
|
}
|
|
#dataTable th,
|
#dataTable td {
|
height: 20px;
|
border: 1px solid #ccc;
|
background-color: rgba(100, 100, 100, 0.4);
|
padding: 2px;
|
color: white;
|
max-width: 100px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
</style>
|
