cesium 加载3D建筑模型(3D tiles)

时间:2025-05-12 10:59:43
const scene = viewer.scene const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); //处理事件 const highlighted = { feature: undefined, originalColor: new Cesium.Color(), }; const selected = { feature: undefined, originalColor: new Cesium.Color(), }; const metadataOverlay = document.createElement("div"); viewer.container.appendChild(metadataOverlay); //弹窗tips的样式 metadataOverlay.className = "backdrop"; metadataOverlay.style.display = "none"; metadataOverlay.style.position = "absolute"; metadataOverlay.style.bottom = "0"; metadataOverlay.style.left = "0"; metadataOverlay.style["pointer-events"] = "none"; //设置元素是否对鼠标事件做出反应 metadataOverlay.style.padding = "4px"; metadataOverlay.style.backgroundColor = "#303030"; metadataOverlay.style.whiteSpace = "pre-line"; metadataOverlay.style.fontSize = "16px"; metadataOverlay.style.borderRadius = "4px"; //添加想要处理的回调函数 handler.setInputAction(function (movement) { //movement:startPosition开始位置,endPosition结束位置(代表当前模型位置) if (true) { if (Cesium.defined(highlighted.feature)) { highlighted.feature.color = highlighted.originalColor; highlighted.feature = undefined; } //返回一个带有“primitive”属性的对象,该属性包含场景中位于特定窗口坐标处的第一个图元(顶部),如果该位置没有任何内容,则返回undefined const feature = scene.pick(movement.endPosition); const featurePicked = feature instanceof Cesium.Cesium3DTileFeature; //是否包含此属性 const isBuildingFeature = featurePicked && feature.hasProperty("Majority_Ownership_Type");if (isBuildingFeature) { if (feature !== selected.feature) { highlighted.feature = feature; Cesium.Color.clone(feature.color, highlighted.originalColor); feature.color = Cesium.Color.AQUA; } metadataOverlay.style.display = "block"; metadataOverlay.style.bottom = `${viewer.canvas.clientHeight - movement.endPosition.y}px`; metadataOverlay.style.left = `${movement.endPosition.x}px`; var tableHtmlScratch = `<div style="color: #fff">${feature.getProperty( "Majority_Ownership_Type")}</div>` metadataOverlay.innerHTML = tableHtmlScratch; } else { metadataOverlay.style.display = "none"; } } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);