Cesiumlab发布3dtiles白膜流程与前端可视化加载

时间：2024-10-21 08:17:52

Cesiumlab发布3dtiles白膜流程与前端可视化加载

1.前置准备

1.1 安装CesiumLab并注册(CesiumLab安装、CesiumLab账号注册以及不同授权类型的说明 CesiumLab系列教程 - 知乎 (zhihu.com))；

1.2 最好安装有Qgis可以进行简单数据处理（如果有完整数据可以不用）(qgis3.32安装包-****博客)

1.3 了解cesium.js

1.4 准备好数据（shpfile、obj等）(数据：【免费】北京各城区shpfile数据资源-****文库)

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.****.net/qq_44849312/article/details/143024086

相关文章