原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=3D%20Tiles%20Inspector.html&label=All

实现效果如下视频所示：

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<template>
  <CesiumMap @viewerCreated="viewerCreated" />
</template>

<script setup>
import { addWorldTerrain, verifyTerrain } from "@/utils/utils.js";

//#region --------------------- 定义变量----------------
let viewer;
//#endregion

function viewerCreated(v) {
  viewer = v;
  addWorldTerrain(viewer);
  // verifyTerrain(viewer);
  viewer.scene.globe.depthTestAgainstTerrain = true;
  viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);
  // const inspectorViewModel = viewer.cesium3DTilesInspector.viewModel;
  addNYCBuildings();
}

//#region --------------------- 方法区域----------------
async function addNYCBuildings() {
  try {
    const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(75343, {
      enableDebugWireframe: true,//调试时需配置该属性为true
    });
    viewer.scene.primitives.add(tileset);
    /**
     * debugColorizeTiles属性：
     * 该属性仅供调试使用，未经生产环境优化。当设为true时，会为每个瓦片分配随机颜色。
     * 此功能可用于可视化各要素所属的瓦片，尤其在采用叠加式细化策略（Additive Refinement）​时，
     * 父级瓦片中的要素可能与子级瓦片的要素交错显示，此时通过颜色区分尤为有效。
     */
    tileset.debugColorizeTiles = true;

    viewer.zoomTo(
      tileset,
      new Cesium.HeadingPitchRange(
        0.0,
        -0.5,
        tileset.boundingSphere.radius / 4.0
      )
    );
  } catch (err) {
    ElMessage.error(`数据加载出错: ${err}`);
  }
}
//#endregion
</script>

<style lang="scss" scoped>
:deep(.cesium-viewer-cesium3DTilesInspectorContainer) {
  top: 10px;
}
</style>