<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
<html>
|
<head>
|
|
<!-- 标题及搜索关键字 -->
|
|
<link rel="shortcut icon" type="image/x-icon" href="/img/favicon/favicon.ico" />
|
<title>BIM分层展示 | Mars3D | 三维地图 | 火星科技 | 合肥火星科技有限公司</title>
|
|
<!--第三方lib-->
|
<script
|
type="text/javascript"
|
src="/hxzkuwb/Home/demo/lib/include-lib.js"
|
libpath="/hxzkuwb/Home/demo/lib/"
|
include="jquery,layer,toastr,font-awesome,bootstrap,bootstrap-checkbox,layer,haoutil,admui,mars3d"
|
></script>
|
|
<link href="/hxzkuwb/Home/demo//css/style.css" rel="stylesheet" />
|
<style>
|
.btn-primary {
|
margin: 2px;
|
width: 60px;
|
}
|
</style>
|
</head>
|
|
<body class="dark">
|
|
|
<div id="mars3dContainer" class="mars3d-container"></div>
|
|
<!-- 面板 -->
|
<div class="infoview" style="top: 30%; width: 100px; text-align: center">
|
<button type="button" id="btnShowAll" onclick="showAll()" class="btn btn-primary active">整体</button>
|
<button type="button" id="btnShowF8" onclick="show(29)" class="btn btn-primary">8F</button>
|
<button type="button" id="btnShowF1" onclick="show(10)" class="btn btn-primary">1F</button>
|
</div>
|
|
<script src="demo/js/com.js"></script>
|
<script src="js/3DMoXing.js"></script>
|
|
<script type="text/javascript">
|
"use script"; // 开发环境建议开启严格模式
|
window.currentPath = "/example/layer-tileset/style/bim-floor/";// 当前示例的目录
|
|
|
var map // mars3d.Map三维地图对象
|
var tiles3dLayer
|
|
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
|
var mapOptions = {
|
scene: {
|
center: { lat: 31.842449, lng: 117.251173, alt: 144, heading: 4, pitch: -35 }
|
},
|
mouse: {
|
pickLimit: 99 // 鼠标穿透拾取的最大构件数量
|
}
|
}
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
function onMounted(mapInstance) {
|
map = mapInstance // 记录map
|
|
// 模型
|
tiles3dLayer = new mars3d.layer.TilesetLayer({
|
name: "码头", // 图层名称，用于标识该图层
|
url: "/hxzkuwb/Home/tiles/tileset.json",
|
position: { lng: 116.279341, lat: 39.83177, alt: 10 }, // 图层的初始位置，包含经度、纬度和高度
|
maximumScreenSpaceError: 1, // 最大屏幕空间误差，控制模型的细节渲染级别，值越高性能越好但视觉效果可能下降
|
shadows: Cesium.ShadowMode.DISABLED, // 设置阴影模式，禁用阴影以提高性能，若需要可设置为 ENABLED 启用阴影
|
skipLevelOfDetail: true, // 跳过细节层级，减少渲染时的计算负担，提升性能
|
loadSiblings: true, // 加载兄弟节点，确保在需要时快速加载周围节点，提高流畅性
|
cullRequestsWhileMoving: true, // 在移动时进行剔除，减少不必要的渲染计算，提高性能
|
cullRequestsWhileMovingMultiplier: 10, // 在移动时的剔除请求倍数，设置为 10 表示在移动时增加剔除请求，进一步提升性能
|
preferLeaves: true, // 优先加载叶子节点，优化加载顺序，提升用户体验，特别是在复杂场景中
|
preloadWhenHidden: true, // 在模型隐藏时进行预加载，减少下次显示时的延迟
|
center: { lat: 39.83177, lng: 116.279341, alt: 500, heading: 319, pitch: -23 }, // 飞往的中心位置，包括经纬度、高度、视角方位和俯仰角
|
flyTo: true // 自动飞向指定位置，设置为 true 表示在加载时自动调整视角到目标位置
|
});
|
map.addLayer(tiles3dLayer)
|
// showCengByStyle("F5")
|
|
|
|
tiles3dLayer.readyPromise.then(function (layer) {
|
console.log("load完成", layer);
|
console.log("URL:", tiles3dLayer);
|
|
|
// 获取模型的边界框
|
const boundingBox = tiles3dLayer.tileset.root.boundingVolume.boundingBox;
|
|
if (boundingBox) {
|
// 提取边界框的顶点坐标
|
const min = boundingBox.minimum;
|
const max = boundingBox.maximum;
|
|
// 计算模型的高度
|
const height = max[2] - min[2];
|
|
console.log("模型的 height 为:", height);
|
} else {
|
console.log("无法获取模型的边界框");
|
}
|
|
// 监听加载进度
|
tiles3dLayer.tileset.loadProgress.addEventListener(function (numberOfPendingRequests, numberOfTilesProcessing) {
|
if (numberOfPendingRequests === 0 && numberOfTilesProcessing === 0) {
|
console.log("Loading: 停止加载");
|
return;
|
}
|
console.log(`Loading: 待处理请求数: ${numberOfPendingRequests}, 处理数: ${numberOfTilesProcessing}`);
|
});
|
});
|
|
|
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
function onUnmounted() {
|
map = null
|
}
|
|
// 显示整栋楼
|
function showAll() {
|
tiles3dLayer.style = undefined
|
}
|
// 负一层
|
function minusOne() {
|
showCengByStyle("B1")
|
}
|
|
// 1~5层
|
function show(num) {
|
showCengByStyle(num)
|
}
|
|
// API: http://mars3d.cn/api/TilesetLayer.html#style
|
// 说明：https://github.com/CesiumGS/3d-tiles/tree/master/specification/Styling
|
|
function showCengByStyle(ceng) {
|
var ceng1 =ceng +5;
|
tiles3dLayer.closeHighlight()
|
tiles3dLayer.style = new Cesium.Cesium3DTileStyle({
|
color: {
|
conditions: [
|
["${标高} >" + ceng + " && ${标高} <" + ceng1 + "", "rgb(255, 255, 255)"],
|
["true", "rgba(255, 255, 255,0.01)"]
|
]
|
}
|
})
|
console.log(tiles3dLayer.style)
|
}
|
|
</script>
|
</body>
|
</html>
|
