cesium 加载3D建筑模型(3D tiles)
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);