QGIS合并相邻建筑shp面，CesiumLab将shp切为3dtiles，使用Cesium展示

本文链接：https://blog.csdn.net/qq_19689967/article/details/121170984

在这里插入图片描述

前言

拿到了一份建筑物数据，是shp格式，由于自己是生活在兰州，便下载了兰州市的shapefile数据，尝试使用CesiumLab去处理此数据，多次未成功！
weixin公众号【图说GIS】
原始数据获取及模型制作请看《全网最快的建筑物白膜生成教程，附62个城市建筑物矢量数据》，由GIS领域非常专业的一位UP主制作，主要讲建筑物白膜生成教程，并附加62个城市建筑物矢量数据。
最终发现问题是里面的一部分面比较碎，需要合并处理。由于自己还未安装iDesktopX，不过截至现在已经下载下来了。便尝试用QGIS处理一下。
在这里插入图片描述

处理方法

工具：Processing Toolbox->Vector geometry->Dissolve

Input layer 选择要进行合并的图层
Dissolve fields 选择合并参考的楼层字段
Dissolved 选择创建临时图层或保存为文件
点击“Run”运行

处理结果如下：
拆分(Multipart to singleparts)
工具：Processing Toolbox->Vector geometry->Multipart to singleparts

Input layer 选择刚才合并生成的图层
Single parts 选择创建临时图层或保存为文件
点击“Run”运行

处理结果

CesiumLab切shp为3dtiles

有dem数据的可以在这里导入dem，对于模型贴地有很重要的作用
cesiumlab2
在这里插入图片描述
cesiumlab3

在这里插入图片描述

Cesium展示

Cesium除了3dtiles可以展示geojson，但对于上述数据，数据量太大，不适合展示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link href="../../Cesium/Widgets/widgets.css" rel="stylesheet">
    <script type="text/javascript" src="../../Cesium/Cesium.js"></script>

    <script src="../config.js"></script>
    <title>兰州建筑模型展示</title>
</head>

<body style="margin: 0px;width:100%;height:100%;">
    <div id="cesiumContainer" style="width:100%;height:100%;position:absolute;"></div>
</body>
<script>
    //created by onegiser at 2021-11-05
    const key="天地图key"
    const viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProviderViewModels: [
            new Cesium.ProviderViewModel({
                name: "天地图影像",
                iconUrl: "/imgs/map/tdt_img.jpg",
                tooltip: "",
                creationFunction: () => {
                     const imgImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
                        url: "http://t{s}.tianditu.com/img_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + key,
                         subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                        tilingScheme: new Cesium.GeographicTilingScheme(),
                         tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"]
                    })
                    return [imgImageryProvider]
                }
            }),
        ],
        terrainProvider: new Cesium.CesiumTerrainProvider({
            url: 'https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path'
        })
    })

    const setHeight = (tileSet, height) => {
        const cartographic = Cesium.Cartographic.fromCartesian(tileSet.boundingSphere.center);
        const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
        const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + height);
        const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
        tileSet.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
    }

    const setStyle = (_3DTileset) => {
        _3DTileset.style = new Cesium.Cesium3DTileStyle({
            color: {
                conditions: [
                    ['${Floor} >= 30', 'rgba(45, 0, 75, 1)'],
                    ['${Floor} >= 25', 'rgba(102, 71, 151, 1)'],
                    ['${Floor} >= 20', 'rgba(170, 162, 204, 1)'],
                    ['${Floor} >= 15', 'rgba(224, 226, 238, 1)'],
                    ['${Floor} >= 10', 'rgba(252, 230, 200, 1)'],
                    ['${Floor} >= 5', 'rgba(248, 176, 87, 1)'],
                    ['${Floor} >= 3', 'rgba(198, 106, 11, 1)'],
                    ['true', 'rgba(127, 59, 8, 1)']
                ]
            }
        });
    }
    const setStyle2 = (_3DTileset) => {
        _3DTileset.style = new Cesium.Cesium3DTileStyle({
            color: {
                conditions: [
                    ["true", "color('cyan')"]
                ]
            }
        });
    }

    const _3DTileset = new Cesium.Cesium3DTileset({
        url: "/data/3dtiles/tileset.json"
    })
    _3DTileset.readyPromise.then(function (argument) {
        viewer.scene.primitives.add(_3DTileset)
        setStyle2(_3DTileset)
        setHeight(_3DTileset,-30)
        viewer.flyTo(_3DTileset)
    })
</script>

</html>