function showQxShequDemo() { tiles3dLayer = new mars3d.layer.TilesetLayer({ name: "模型", // 图层名称,用于标识该图层 url: "/hxzkuwb/view/Home/tiles/tileset.json", // 3D Tiles 数据的 URL 地址,指向 JSON 文件 position: { lng: 116.279916, lat: 39.831517, alt: 0 }, // 图层的初始位置,包含经度、纬度和高度 maximumScreenSpaceError: 1, // 最大屏幕空间误差,控制模型的细节渲染级别,值越高性能越好但视觉效果可能下降 shadows: Cesium.ShadowMode.DISABLED, // 设置阴影模式,禁用阴影以提高性能,若需要可设置为 ENABLED 启用阴影 skipLevelOfDetail: true, // 跳过细节层级,减少渲染时的计算负担,提升性能 loadSiblings: true, // 加载兄弟节点,确保在需要时快速加载周围节点,提高流畅性 cullRequestsWhileMoving: true, // 在移动时进行剔除,减少不必要的渲染计算,提高性能 cullRequestsWhileMovingMultiplier: 10, // 在移动时的剔除请求倍数,设置为 10 表示在移动时增加剔除请求,进一步提升性能 preferLeaves: true, // 优先加载叶子节点,优化加载顺序,提升用户体验,特别是在复杂场景中 preloadWhenHidden: true, // 在模型隐藏时进行预加载,减少下次显示时的延迟 cullWithChildrenBounds:true, highlight: { type: "click", color: "#00ffff" }, }); map.addLayer(tiles3dLayer) tiles3dLayer.readyPromise.then(function (layer) { console.log("load完成", layer) console.log("URL:", tiles3dLayer); // tiles3dLayer.tileset 是 Cesium3DTileset,支持绑定所有Cesium原生事件 // 参考API http://mars3d.cn/api/cesium/Cesium3DTileset.html tiles3dLayer.tileset.loadProgress.addEventListener(function (numberOfPendingRequests, numberOfTilesProcessing) { if (numberOfPendingRequests === 0 && numberOfTilesProcessing === 0) { console.log("Loading: 停止加载") toastr.clear();//移除所有,有动画效果 setTimeout(() => { toastr.success("加载完成", "三维模型", { timeOut: 3000 // 3秒后自动消失 }); }, 500) return } console.log("加载中") console.log(`Loading: 待处理请求数: ${numberOfPendingRequests}, 处理数: ${numberOfTilesProcessing}`) }) }) tiles3dLayer.on(mars3d.EventType.click, function (event) { console.log("单击了3dtiles图层", event) console.log(event.name) var nodeid = event.graphic.attr.id console.log(event.graphic.attr.标高) tiles3dLayer.closeHighlight() tiles3dLayer.style = new Cesium.Cesium3DTileStyle({ color: { conditions: [ ["${标高} ==='" + nodeid + "'", "rgba(255, 200, 200,0)"], ["true", "rgba(255, 255, 255,1)"] ] } }) }) // 加载的事件 只执行一次 tiles3dLayer.on(mars3d.EventType.initialTilesLoaded, function (event) { console.log("触发initialTilesLoaded事件", event) }) // 会执行多次,重新加载一次完成后都会回调 tiles3dLayer.on(mars3d.EventType.allTilesLoaded, function (event) { console.log("触发allTilesLoaded事件", event) }) } function showCengByStyle(floor,floor2) { console.log(floor,floor2) if (floor == 0) { tiles3dLayer.style = undefined }else{ tiles3dLayer.closeHighlight() tiles3dLayer.style = new Cesium.Cesium3DTileStyle({ color: { conditions: [ ["${标高} > "+floor+" && ${标高} < "+floor2+" ", "rgba(255, 255, 255,1)"], ["true", "rgba(255, 255, 255,0)"] ] } }) } } //动态效果 function addBlinkEffect(floor, floor2) { tiles3dLayer.closeHighlight(); let isBlinkOn = true; const blinkInterval = setInterval(() => { let colorCondition; if (isBlinkOn) { colorCondition = [ ["${标高} > " + floor + " && ${标高} < " + floor2 + " ", "rgba(255, 255, 255,1)"], ["true", "rgba(255, 255, 255,0)"] ]; } else { colorCondition = [ ["${标高} > " + floor + " && ${标高} < " + floor2 + " ", "rgba(255, 255, 255,0)"], ["true", "rgba(255, 255, 255,0)"] ]; } tiles3dLayer.style = new Cesium.Cesium3DTileStyle({ color: { conditions: colorCondition } }); isBlinkOn = !isBlinkOn; }, 500); }