原文链接及内容

效果如下图所示:

示例代码如下:

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
/**
* 生成用于访问 iTwin 的共享密钥(无需 OAuth)
* 请访问:https://developer.bentley.com/apis/access-control-v2/operations/create-itwin-share/
*/
Cesium.ITwinPlatform.defaultShareKey =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpVHdpbklkIjoiNTM1YTI0YTMtOWIyOS00ZTIzLWJiNWQtOWNlZGI1MjRjNzQzIiwiaWQiOiI2NTEwMzUzMi02MmU3LTRmZGQtOWNlNy1iODIxYmEyMmI5NjMiLCJleHAiOjE3NzcwNTU4MTh9.Q9MgsWWkc6bb1zHUJ7ahZjxPtaTWEjpNvRln7NS3faM";

const viewer = new Cesium.Viewer("cesiumContainer", {
geocoder: false,
sceneModePicker: false,
homeButton: false,
navigationHelpButton: false,
navigationInstructionsInitiallyVisible: false,
fullscreenButton: false,
selectionIndicator: false,
skyBox: false,
timeline: false,
animation: false,
shouldAnimate: true,
baseLayerPicker: false,
});
viewer.cesiumWidget.creditContainer.style.display = "none";

viewer.scene.skyAtmosphere.show = true;

const iTwinId = "535a24a3-9b29-4e23-bb5d-9cedb524c743";
const realityMeshId = "85897090-3bcc-470b-bec7-20bb639cc1b9";
//ITwinData类提供了几个将 iTwin 平台数据加载到 CesiumJS 的方法
const tileset = await Cesium.ITwinData.createTilesetForRealityDataId(
iTwinId,
realityMeshId,
);
viewer.scene.primitives.add(tileset);
tileset.maximumScreenSpaceError = 2;

// 创建 Bing Maps 的图像层(仅包含注记(标签),无地图)
const labelImageryLayer = Cesium.ImageryLayer.fromProviderAsync(
Cesium.IonImageryProvider.fromAssetId(2411391),
);
tileset.imageryLayers.add(labelImageryLayer);

Sandcastle.addToggleButton(
"显示注记图层",
labelImageryLayer.show,
function (checked) {
labelImageryLayer.show = checked;
},
);

// 看向费城(位于美国宾夕法尼亚州)
viewer.scene.camera.setView({
destination: new Cesium.Cartesian3(
1252289.5782535905,
-4732887.700120302,
4075105.3952877373,
),
orientation: new Cesium.HeadingPitchRoll(
6.130466027267037,
-1.1315283015826818,
6.2831472551984575,
),
});