3D Tiles
本示例展示如何加载倾斜摄影 3D Tiles 数据，并实现鼠标交互选择单体建筑物，通过后处理效果高亮显示选中的对象。
核心功能
3D Tiles 加载
使用 Cesium3DTileset 加载倾斜摄影数据（3D Tiles 格式），这是 Cesium 中用于高效渲染大规模 3D 场景的标准格式：
const tileset = await Cesium3DTileset.fromUrl("/cesium/02/data/tileset.json");
viewer.scene.primitives.add(tileset);
viewer.zoomTo(tileset);
鼠标交互选择
示例实现了两种交互效果：
- 鼠标悬停高亮：鼠标移动时使用蓝色边缘高亮当前悬停的对象
- 点击选中：鼠标点击时使用绿色边缘高亮选中的对象
后处理轮廓效果
使用 Cesium 的 PostProcessStageLibrary.createEdgeDetectionStage() 创建边缘检测效果：
const silhouetteBlue = PostProcessStageLibrary.createEdgeDetectionStage();
silhouetteBlue.uniforms.color = Color.BLUE;
silhouetteBlue.uniforms.length = 0.01;
const silhouetteGreen = PostProcessStageLibrary.createEdgeDetectionStage();
silhouetteGreen.uniforms.color = Color.LIME;
silhouetteGreen.uniforms.length = 0.01;
viewer.scene.postProcessStages.add(
PostProcessStageLibrary.createSilhouetteStage([
silhouetteBlue,
silhouetteGreen,
])
);
关键代码
初始化 Viewer
const viewer = new Viewer(el, {
baseLayerPicker: false,
animation: false,
timeline: false,
// ... 禁用其他 UI 控件
});
// 使用自定义底图
const xyz = new UrlTemplateImageryProvider({
url: "//data.mars3d.cn/tile/img/{z}/{x}/{y}.jpg",
});
viewer.imageryLayers.addImageryProvider(xyz);
鼠标事件处理
// 鼠标移动高亮
viewer.screenSpaceEventHandler.setInputAction(
function onMouseMove(movement) {
var pickedFeature = viewer.scene.pick(movement.endPosition);
if (defined(pickedFeature)) {
if (pickedFeature !== silhouetteGreen.selected[0]) {
silhouetteBlue.selected = [pickedFeature];
}
}
},
ScreenSpaceEventType.MOUSE_MOVE
);
// 鼠标点击选中
viewer.screenSpaceEventHandler.setInputAction(
function leftClick(movement) {
var pickedFeature = viewer.scene.pick(movement.position);
if (defined(pickedFeature)) {
silhouetteGreen.selected = [pickedFeature];
}
},
ScreenSpaceEventType.LEFT_CLICK
);
应用场景
- 城市规划：交互式查看和选择建筑物
- 房地产展示：高亮显示特定楼盘或建筑
- 设施管理：选择和查询基础设施信息
- 数字孪生：实现建筑物的单体化查询和分析
注意事项
- 3D Tiles 格式：确保倾斜摄影数据已转换为 3D Tiles 格式（tileset.json）
- 性能优化：大规模场景建议使用 LOD（Level of Detail）优化
- 事件清理：需要移除默认的点击事件以避免冲突
- 后处理性能：边缘检测会增加渲染负担，注意性能影响
- 资源清理：组件卸载时正确销毁 Viewer 实例