原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Google%20Photorealistic%203D%20Tiles%20with%20Building%20Insert.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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
const viewer = new Cesium.Viewer("cesiumContainer", {
  sceneModePicker: false,
  homeButton: false,
  navigationHelpButton: false,
  baseLayerPicker: false,
  navigationInstructionsInitiallyVisible: false,
  fullscreenButton: false,
  selectionIndicator: false,
  skyBox: false,
  timeline: false,
  animation: false,
  shouldAnimate: true,
  infoBox: false,
  geocoder: Cesium.IonGeocodeProviderType.GOOGLE,
  /**
   * globe属性设置为false，无需显示地球，因为 Photorealistic 3D Tiles 已包含地形数据
   */
  globe: false,
});
viewer.cesiumWidget.creditContainer.style.display = "none";

// 启用渲染天空
viewer.scene.skyAtmosphere.show = true;

// 添加谷歌的 Photorealistic 3D Tiles
try {
  const googleTileset = await Cesium.createGooglePhotorealistic3DTileset({
    /**
     * 只有 Google Geocoder 可与 Google Photorealistic 3D Tiles 配合使用。
     * 将查看器构造函数选项的`geocode`属性设置为 IonGeocodeProviderType.GOOGLE。
     */
    onlyUsingWithGoogleGeocoder: true,
  });
  viewer.scene.primitives.add(googleTileset);
} catch (error) {
  console.log(`创建 world terrain 时出错. ${error}`);
}

// 添加目标地块的高亮显示
const targetHighlight = new Cesium.Entity({
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray(
      [
        [-105.0077102972673, 39.75198671798765],
        [-105.0095858062031, 39.75049417970743],
        [-105.00969000114443, 39.75035082687128],
        [-105.00972838875393, 39.75013579705808],
        [-105.00971742086537, 39.74997136204101],
        [-105.00962967775735, 39.749768979944236],
        [-105.00932806082336, 39.74928832007956],
        [-105.00887837739427, 39.749444324087904],
        [-105.00854934073887, 39.749663572365904],
        [-105.00822578802776, 39.749967145754084],
        [-105.00715641889735, 39.751312128419926],
        [-105.00715641889735, 39.75135429046085],
        [-105.0077102972673, 39.75198671798765],
      ].flat(2)
    ),
    material: Cesium.Color.YELLOW.withAlpha(0.6),
    classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
  },
});
viewer.entities.add(targetHighlight);

// 添加建筑物瓦片集
let buildingTileset;
try {
  buildingTileset = await Cesium.Cesium3DTileset.fromIonAssetId(1670818);
  viewer.scene.primitives.add(buildingTileset);
} catch (error) {
  console.log(`加载建筑物瓦片集出错.${error}`);
}

// 缩放至新建筑物位置
const cameraOffset = new Cesium.HeadingPitchRange(
  Cesium.Math.toRadians(95.0),
  Cesium.Math.toRadians(-18.0),
  600.0
);
viewer.zoomTo(buildingTileset, cameraOffset);

Sandcastle.addToggleButton("显示建筑物", true, function (checked) {
  buildingTileset.show = checked;
});

// 切换是否高亮显示目标位置
Sandcastle.addToggleButton(
  "高亮显示目标位置",
  true,
  function (checked) {
    if (checked) {
      viewer.entities.add(targetHighlight);//添加高亮
    } else {
      viewer.entities.remove(targetHighlight);//移除高亮
    }
  }
);