Cesium最常用来做数字孪生,在3D地图上创建一个3D模型,并将它放在地图上,贴合地面,使之看起来更加贴近现实中的实际情况,这里就在地球上放置一个3DTile的模型来模拟现实情况。这里的模型我是找的例子,只做一个实现方法上的演示,下面是代码:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<script>
// 设置token
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjNDgzZGEyYy0yZmFkLTQ3ZGItOWU2My1jZjRkN2ZhNTU0OTAiLCJpZCI6MTYyODM0LCJpYXQiOjE2OTMxMjA4MTB9.xHUQdfmqpl3Iei6Iur_AOYeg2jyDiXZsaYBg33KU_zg';
//初始化div容器为cesium
var viewer = new Cesium.Viewer('cesiumContainer');
//加载瓦片集
const tileset = new Cesium.Cesium3DTileset({
url: "tileset.json",
});
tileset.readyPromise.then(function (tileset) {
//将瓦片集添加到cesium场景中
viewer.scene.primitives.add(tileset);
//调用viewer.zoomTo()方法将相机聚焦在瓦片集上
viewer.zoomTo(
tileset,
//这里使用了一个HeadingPitchRange对象,其中包含了相机的朝向、俯仰角和距离
new Cesium.HeadingPitchRange(
0.0,
-0.5,
tileset.boundingSphere.radius * 2.0
)
);
});
</script>
</body>
</html>
以上如果有问题可以在我评论区留言,需要这部分的相关文件也可以留个邮箱