cesium-study
/
33.剖切.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8" />
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>Hello World!</title>
    <script src="Build/Cesium/Cesium.js"></script>
    <script src="js/jquery.min.js"></script>
    <style>
        @import url(Build/Cesium/Widgets/widgets.css);

        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>

        alert("没成功");
        //创建一个基本地球
        let viewer = new Cesium.Viewer("cesiumContainer", {
            imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
                url: 'http://t0.tianditu.gov.cn/img\_w/wmts?tk=0702d09e30dca11ed07ba4cec6d6bdac',
                layer: 'img',
                style: 'default',
                tileMatrixSetID: 'w',
                format: 'tiles',
                maximumLevel: 18
            }),
            animation: false, //动画控制，默认true （图中1）
            baseLayerPicker: false,//地图切换控件(底图以及地形图)是否显示,默认显示true  （图中6）
            fullscreenButton: true,//全屏按钮,默认显示true  （图中4）
            geocoder: false,//地名查找,默认true  （图中9）
            timeline: false,//时间线,默认true  （图中3）
            vrButton: false,//双屏模式,默认不显示false
            homeButton: true,//主页按钮，默认true  （图中8）
            infoBox: false,//点击要素之后显示的信息,默认true
            selectionIndicator: true//选中元素显示,默认true
        });
        viewer.cesiumWidget.creditContainer.style.display = "none";//去cesium logo水印

        viewer.scene.debugShowFramesPerSecond = true;//开启帧数
        //viewer.scene.globe.enableLighting = true;
        viewer.shadows = true;
        //添加数据

        //添加文字
        viewer.entities.add({
            name: '文字',
            position: Cesium.Cartesian3.fromDegrees(116.3904715, 39.90571),
            label: {
                text: '看这里',
                font: '19px Helvetica',
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                fillColor: Cesium.Color.AZURE,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 3,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直方向以底部来计算标签的位置
            }
        });

        //添加3dtiles

        var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
            url: '测试辅助文件/Lab导出环氧乙烷/tileset.json', //数据路径
            //url: '测试辅助文件/张单单大厦/tileset.json', //数据路径
            // url: '测试辅助文件/测试小模型/tileset.json', //数据路径
            maximumScreenSpaceError: 16, //最大的屏幕空间误差，数值越小，显示越精细
            maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
            // modelMatrix: m //形状矩阵
        }));

        var boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(116.3904715, 39.90571, 10), 18.7);

        viewer.camera.flyToBoundingSphere(boundingSphere, { duration: 0 });


        var utc = Cesium.JulianDate.fromDate(new Date("2019/10/04 10:30:00"));//UTC
        viewer.clockViewModel.currentTime = Cesium.JulianDate.addHours(utc, 8, new Cesium.JulianDate());//北京时间=UTC+8=GMT+8

        //下面是剖切代码
        // Add a clipping plane, a plane geometry to show the representation of the
        // plane, and control the magnitude of the plane distance with the mouse.


        var clipObjects = ["BIM", "Point Cloud", "Instanced", "Model"];
        var viewModel = {
            debugBoundingVolumesEnabled: false,
            edgeStylingEnabled: true,
            exampleTypes: clipObjects,
            currentExampleType: clipObjects[0],
        };

        var targetY = 0.0;
        var planeEntities = [];
        var selectedPlane;
        var clippingPlanes;

        // Select plane when mouse down
        var downHandler = new Cesium.ScreenSpaceEventHandler(
            viewer.scene.canvas
        );
        downHandler.setInputAction(function (movement) {
            var pickedObject = scene.pick(movement.position);
            if (
                Cesium.defined(pickedObject) &&
                Cesium.defined(pickedObject.id) &&
                Cesium.defined(pickedObject.id.plane)
            ) {
                selectedPlane = pickedObject.id.plane;
                selectedPlane.material = Cesium.Color.WHITE.withAlpha(0.05);
                selectedPlane.outlineColor = Cesium.Color.WHITE;
                scene.screenSpaceCameraController.enableInputs = false;
            }
        }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

        // Release plane on mouse up
        var upHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        upHandler.setInputAction(function () {
            if (Cesium.defined(selectedPlane)) {
                selectedPlane.material = Cesium.Color.WHITE.withAlpha(0.1);
                selectedPlane.outlineColor = Cesium.Color.WHITE;
                selectedPlane = undefined;
            }

            scene.screenSpaceCameraController.enableInputs = true;
        }, Cesium.ScreenSpaceEventType.LEFT_UP);

        // Update plane on mouse move
        var moveHandler = new Cesium.ScreenSpaceEventHandler(
            viewer.scene.canvas
        );
        moveHandler.setInputAction(function (movement) {
            if (Cesium.defined(selectedPlane)) {
                var deltaY = movement.startPosition.y - movement.endPosition.y;
                targetY += deltaY;
            }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        function createPlaneUpdateFunction(plane) {
            return function () {
                plane.distance = targetY;
                return plane;
            };
        }

        var tileset;
        function loadTileset(url) {
            clippingPlanes = new Cesium.ClippingPlaneCollection({
                planes: [
                    new Cesium.ClippingPlane(
                        new Cesium.Cartesian3(0.0, 0.0, -1.0),
                        0.0
                    ),
                ],
                edgeWidth: viewModel.edgeStylingEnabled ? 1.0 : 0.0,
            });

            tileset = viewer.scene.primitives.add(
                new Cesium.Cesium3DTileset({
                    url: url,
                    clippingPlanes: clippingPlanes,
                })
            );

            tileset.debugShowBoundingVolume =
                viewModel.debugBoundingVolumesEnabled;
            return tileset.readyPromise
                .then(function () {
                    var boundingSphere = tileset.boundingSphere;
                    var radius = boundingSphere.radius;

                    viewer.zoomTo(
                        tileset,
                        new Cesium.HeadingPitchRange(0.5, -0.2, radius * 4.0)
                    );

                    if (
                        !Cesium.Matrix4.equals(
                            tileset.root.transform,
                            Cesium.Matrix4.IDENTITY
                        )
                    ) {
                        // The clipping plane is initially positioned at the tileset's root transform.
                        // Apply an additional matrix to center the clipping plane on the bounding sphere center.
                        var transformCenter = Cesium.Matrix4.getTranslation(
                            tileset.root.transform,
                            new Cesium.Cartesian3()
                        );
                        var transformCartographic = Cesium.Cartographic.fromCartesian(
                            transformCenter
                        );
                        var boundingSphereCartographic = Cesium.Cartographic.fromCartesian(
                            tileset.boundingSphere.center
                        );
                        var height =
                            boundingSphereCartographic.height -
                            transformCartographic.height;
                        clippingPlanes.modelMatrix = Cesium.Matrix4.fromTranslation(
                            new Cesium.Cartesian3(0.0, 0.0, height)
                        );
                    }

                    for (var i = 0; i < clippingPlanes.length; ++i) {
                        var plane = clippingPlanes.get(i);
                        var planeEntity = viewer.entities.add({
                            position: boundingSphere.center,
                            plane: {
                                dimensions: new Cesium.Cartesian2(
                                    radius * 2.5,
                                    radius * 2.5
                                ),
                                material: Cesium.Color.WHITE.withAlpha(0.1),
                                plane: new Cesium.CallbackProperty(
                                    createPlaneUpdateFunction(plane),
                                    false
                                ),
                                outline: true,
                                outlineColor: Cesium.Color.WHITE,
                            },
                        });

                        planeEntities.push(planeEntity);
                    }
                    return tileset;
                })
                .otherwise(function (error) {
                    console.log(error);
                });
        }

        function loadModel(url) {
            clippingPlanes = new Cesium.ClippingPlaneCollection({
                planes: [
                    new Cesium.ClippingPlane(
                        new Cesium.Cartesian3(0.0, 0.0, -1.0),
                        0.0
                    ),
                ],
                edgeWidth: viewModel.edgeStylingEnabled ? 1.0 : 0.0,
            });

            var position = Cesium.Cartesian3.fromDegrees(
                -123.0744619,
                44.0503706,
                300.0
            );
            var heading = Cesium.Math.toRadians(135.0);
            var pitch = 0.0;
            var roll = 0.0;
            var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
            var orientation = Cesium.Transforms.headingPitchRollQuaternion(
                position,
                hpr
            );
            var entity = viewer.entities.add({
                name: url,
                position: position,
                orientation: orientation,
                model: {
                    uri: url,
                    scale: 8,
                    minimumPixelSize: 100.0,
                    clippingPlanes: clippingPlanes,
                },
            });

            viewer.trackedEntity = entity;

            for (var i = 0; i < clippingPlanes.length; ++i) {
                var plane = clippingPlanes.get(i);
                var planeEntity = viewer.entities.add({
                    position: position,
                    plane: {
                        dimensions: new Cesium.Cartesian2(300.0, 300.0),
                        material: Cesium.Color.WHITE.withAlpha(0.1),
                        plane: new Cesium.CallbackProperty(
                            createPlaneUpdateFunction(plane),
                            false
                        ),
                        outline: true,
                        outlineColor: Cesium.Color.WHITE,
                    },
                });

                planeEntities.push(planeEntity);
            }
        }


        function reset() {
            viewer.entities.removeAll();
            viewer.scene.primitives.remove(tileset);
            planeEntities = [];
            targetY = 0.0;
            tileset = undefined;
        }


    </script>
</body>
</html>