Cesium总结二地层模型爆炸

GEX0o0
已于 2024-02-01 10:43:36 修改
阅读量330
点赞数 2
分类专栏：地图框架:Cesium 文章标签： javascript
于 2024-02-01 10:37:57 首次发布
本文链接：https://blog.csdn.net/gexin0517/article/details/135967891
版权
地图框架:Cesium 专栏收录该内容
2 篇文章 0 订阅
订阅专栏
地层模型爆炸

效果展示：
代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./CimSDK/CimSDK.min.css">
    <link rel="stylesheet" href="./CimSDK/Workers/layui/css/layui.css">
</head>

<body>
    <div id="sdkContainer">
        <div class="panel">
            <div onclick="Spread()">爆炸</div>
            <div onclick="Close()">清除爆炸</div>
            <div onclick="clippingModel()">开始剖切</div>
            <div onclick="remove()">移除</div>
        </div>
    </div>
    </div>
    <script src="./CimSDK/Workers/jquery-3.5.0.min.js"></script>
    <script src="./CimSDK/CimSDK.min.js"></script>
    <script>
        window.earthCtrl = new SmartEarth.EarthCtrl("sdkContainer", {
            timeline: false,
        });
        let Cesium = SmartEarth.Cesium
        let viewer = earthCtrl.viewer

        let baseNum = 15
        let rate = 0.5

        let model = earthCtrl.factory.createModelLayer({
            sourceType: "b3dm",
            url: './diceng/tileset.json',
        });

        earthCtrl.userScene.flyTo(model);

        //等待模型加载完毕飞往该模型
        model._primitive.readyPromise.then(() => {
            flyto()
        })

        function flyto() {
            const options = {
                duration: 2,
                offset: new SmartEarth.Cesium.HeadingPitchRange(1.0, -0.3, 1000)
            };
            earthCtrl.userScene.flyTo(model.item, options);
        }

        let hasExplode = false

        function Spread() {
            let tileset = model._primitive
            viewer.scene.globe.show = false;
            if (hasExplode) {
                Close()
            } else {
                tileset.readyPromise.then(function () {
                    var dcCount = tileset.root.children[0].children.length;
                    let tilesets = tileset.root.children[0].children
                    let partLength = parseInt(dcCount / 2)
                    if (dcCount % 2 == 0) {
                        for (let index = 0; index < partLength - 1; index++) {
                            let child = tilesets[partLength - index - 1]
                            changePos(child, index * -1, false)
                        }
                        for (let index = partLength; index < dcCount - 1; index++) {
                            let child = tilesets[index]
                            changePos(child, index, true)
                        }
                    } else {
                        for (let index = 0; index <= partLength - 1; index++) {
                            let child = tilesets[partLength - index]
                            changePos(child, index * -1, false)
                        }
                        changePos(tilesets[0], partLength * -1, false)
                        for (let index = partLength + 1; index <= dcCount - 1; index++) {
                            let child = tilesets[index]
                            changePos(child, index - partLength, true)
                        }
                    }
                    hasExplode = true
                })
            }
        }

        function Close() {
            viewer.scene.globe.show = true;
            if (!hasExplode) {
                return
            }
            let tileset = model._primitive
            tileset.readyPromise.then(function () {
                var dcCount = tileset.root.children[0].children.length;
                let tilesets = tileset.root.children[0].children
                let partLength = parseInt(dcCount / 2)
                if (dcCount % 2 == 0) {
                    for (let index = 0; index < partLength - 1; index++) {
                        let child = tilesets[partLength - index - 1]
                        changePos(child, index * -1, false)
                    }
                    for (let index = partLength; index < dcCount - 1; index++) {
                        let child = tilesets[index]
                        changePos(child, index, true)
                    }
                } else {
                    for (let index = 0; index <= partLength - 1; index++) {
                        let child = tilesets[partLength - index]
                        changePos(child, index, true)
                    }
                    changePos(tilesets[0], partLength, true)
                    for (let index = partLength + 1; index <= dcCount - 1; index++) {
                        let child = tilesets[index]
                        changePos(child, (index - partLength) * -1, false)
                    }
                }
                hasExplode = false
            })
        }

        function changePos(child, scale, isPlus) {
            let timer = null
            var mm = child.transform;
            let current = 0
            ani()
            function ani() {
                if (isPlus) {
                    if (current >= baseNum * scale) {
                        cancelAnimationFrame(timer)
                    } else {
                        current += rate;
                        var temp = {
                            x: 0,
                            y: 0,
                            z: current
                        }
                        let m2 = new Cesium.Matrix4()
                        Cesium.Matrix4.multiplyByTranslation(mm, temp, m2);
                        child.transform = m2;
                        timer = window.requestAnimationFrame(ani)
                    }
                } else {
                    if (current <= baseNum * scale) {
                        cancelAnimationFrame(timer)
                    } else {
                        current -= rate;
                        var temp = {
                            x: 0,
                            y: 0,
                            z: current
                        }
                        let m2 = new Cesium.Matrix4()
                        Cesium.Matrix4.multiplyByTranslation(mm, temp, m2);
                        child.transform = m2;
                        timer = window.requestAnimationFrame(ani)
                    }
                }
            }
        }

        let modelCuttingArr = [];
        function clippingModel() {
            const modelCutting = earthCtrl.analysis.createModelCutting({
            });
            viewer.scene.globe.show = false;
            let tileset = model._primitive
            tileset.readyPromise.then(function () {
                let tilesets = tileset.root.children[0].children

                var mm = tileset.root.children[0].children[0].transform;
                var tempCartesian = new Cesium.Cartesian3();
                Cesium.Cartesian3.subtract(tileset.root.children[0].children[0].boundingSphere.center, tileset.boundingSphere.center, tempCartesian);
                var tempHeight = tempCartesian.z;
                tempHeight = Math.abs(tempHeight)

                var mm2 = tileset.root.children[0].children[tilesets.length - 1].transform;
                var tempCartesian2 = new Cesium.Cartesian3();
                Cesium.Cartesian3.subtract(tileset.root.children[0].children[tilesets.length - 1].boundingSphere.center, tileset.boundingSphere.center, tempCartesian2);
                var tempHeight2 = tempCartesian.z;
                tempHeight2 = Math.abs(tempHeight2)

                let deeps = tempHeight + tempHeight2
                console.log(deeps);

                modelCutting.startDrawing({
                    modelArr: [model._primitive],
                    deepth: 10000,
                });
                modelCuttingArr.push(modelCutting);
            })
        };

        function remove() {
            if (modelCuttingArr.length < 1) {
                return;
            }
            modelCuttingArr.forEach((e) => {
                e.removeFromMap();
            });
            modelCuttingArr = [];
        }

    </script>
</body>

<style>
    #sdkContainer {
        width: 100%;
        height: 100%;

        .panel {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 999;
            background: white;
            height: 50px;
            width: 240px;
            display: flex;
            text-align: center;
            line-height: 50px;

            div {
                width: 100px;
                height: 100%;
                background: blue;
                cursor: pointer;
                color: white;


                &:hover {
                    color: black;
                    background: white;
                }

            }
        }
    }
</style>

</html>