Cesiumlab发布3dtiles白膜流程与前端可视化加载
1.前置准备
1.1 安装CesiumLab并注册(CesiumLab安装、CesiumLab账号注册以及不同授权类型的说明 CesiumLab系列教程 - 知乎 (zhihu.com))；
1.2 最好安装有Qgis可以进行简单数据处理（如果有完整数据可以不用）(qgis3.32安装包-CSDN博客)
1.3 了解cesium.js
1.4 准备好数据（shpfile、obj等）(数据：【免费】北京各城区shpfile数据资源-CSDN文库)
2.处理流程
2.1.打开cesiumLab，选择数据处理–> 通用模型切片：
2.2.在输入文件中选择 +SHP，导入shpfile文件，并设置shpfile文件高度为根据floor层高来拉伸
2.3.选择资源库位置，随便在一个文件夹下都行，命一下名
2.4.全选字段，让字段信息载入到最终生成的3dtile的属性里，存储类型设置为散列，选择输出位置，提交处理即可
2.5.cesiumLab中浏览
3.前端页面中加载：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><style>*{margin: 0;padding: 0;overflow: hidden;}#cesiumContainer{width: 100vw;height: 100vh;}</style><script src="../node_modules/cesium/Build/Cesium/Cesium.js"></script><!-- <link href="../node_modules/cesium/Build/Cesium/Widgets/widgets.css"> --><style>@import url(../node_modules/cesium/Build/Cesium/Widgets/widgets.css);</style></head>
<body><div id="cesiumContainer" style="width: 100vw; height: 100vh;"></div><script>Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0NTEzNGViNC0zZDBkLTRlODktOGViOC0yODg5ODQ4YmQ5YzYiLCJpZCI6MTAzMTUxLCJpYXQiOjE2NTkzMTU5MjJ9.L7FacAYyOisZNsuk7ojO57iiuNB5Xgxm4dqV45DB994';let viewer = new Cesium.Viewer("cesiumContainer");//let weblayer = new Cesium.Cesium3DTileset({url:"../../data/yanqing/tileset.json",skipLevelOfDetail: true,skipLevels: 4,baseScreenSpaceError: 1024,maximumScreenSpaceError: 256, // 数值加大，能让最终成像变模糊skipScreenSpaceErrorFactor: 16,immediatelyLoadDesiredLevelOfDetail: true,loadSiblings: true, // 如果为true则不会在已加载完概况房屋后，自动从中心开始超清化房屋cullWithChildrenBounds: true,cullRequestsWhileMoving: true,cullRequestsWhileMovingMultiplier: 10, // 值越小能够更快的剔除preloadWhenHidden: true,preloadFlightDestinations: false,preferLeaves: true,maximumMemoryUsage: 128, // 内存分配变小有利于倾斜摄影数据回收，提升性能体验progressiveResolutionHeightFraction: 0, // 数值偏于0能够让初始加载变得模糊dynamicScreenSpaceErrorDensity: 0.5, // 数值加大，能让周边加载变快dynamicScreenSpaceErrorFactor: 1,dynamicScreenSpaceError: true, // 根据测试，有了这个后，会在真正的全屏加载完之后才清晰化房屋});viewer.scene.primitives.add(weblayer);viewer.flyTo(weblayer);</script>
</body>
</html>
视频演示地址：https://blog.csdn.net/qq_44849312/article/details/143024086