Cesium|xt3d 不同视角漫游

最新推荐文章于 2024-08-14 16:57:42 发布

xt3d

最新推荐文章于 2024-08-14 16:57:42 发布

阅读量422

点赞数

文章标签： cesium xt3d webgis

本文链接：https://blog.csdn.net/xietao20/article/details/123263886

版权

cesium|xt3d 专栏收录该内容

89 篇文章 51 订阅

订阅专栏

该博客演示了如何使用Cesium库和xt3d扩展来创建一个3D场景，并实现从不同视角的漫游效果。代码中详细展示了初始化Cesium Viewer、加载3DTiles数据、设置初始视图以及定义漫游路径的方法。通过点击开始和结束按钮，可以控制漫游的启动和停止。提供的预览地址展示了实际的漫游效果。

摘要由CSDN通过智能技术生成

效果

在这里插入图片描述

代码

 <!DOCTYPE html>
<html lang="zh-CN">

<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>cesium|xt3d</title>
    <!-- 引入Cesium -->
    <script src="https://unpkg.com/cesium@1.84.0/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/cesium@1.84.0/Build/Cesium/Widgets/widgets.css">

    <!--  引入xt3d -->
    <script src="http://www.xt3d.cn/xt3dlib/xt3d.min.js"></script>
    <style>
        html,
        body,
        #map3d {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        
        .btn-container {
            position: absolute;
            left: 10px;
            top: 90px;
            padding: 10px 15px;
            border-radius: 4px;
            border: 1px solid rgba(128, 128, 128, 0.5);
            color: #ffffff;
            background: rgba(0, 0, 0, 0.4);
            box-shadow: 0 3px 14px rgb(128 128 128 / 50%);
            max-width: 380px;
        }
        
        button {
            background: transparent;
            border: 1px solid #00d0ffb8;
            color: white;
            padding: 7px 9px;
            border-radius: 2px;
            margin: 3px;
            cursor: pointer
        }
    </style>
</head>

<body>
    <div id="map3d"></div>
    <div class="btn-container">
        <button onclick="start()">开始</button>
        <button onclick="stop()">结束</button>
    </div>
    <script>
        let xt3dInit = {
            init(el) {
                this.initViewer(el);
                this.load3dtiles();
                this.setView();
            },

            //初始化viewer
            initViewer(el) {
                this.viewer = new Cesium.Viewer(el, {
                    infoBox: false,
                    selectionIndicator: false,
                    navigation: false,
                    animation: false,
                    timeline: false,
                    baseLayerPicker: false,
                    geocoder: false,
                    homeButton: false,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                    shouldAnimate: true,
                    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
                    })

                });
                this.viewer.scene.globe.depthTestAgainstTerrain = true;
                //取消双击锁定事件
                this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
            },

            //加载3dtiles数据
            load3dtiles() {
                var tileset = this.viewer.scene.primitives.add(
                    new Cesium.Cesium3DTileset({
                        url: "http://www.xt3d.cn/data/3dtiles/gongchang/tileset.json",
                    })
                );
            },

            setView() {
                let flyToOpts = {
                    destination: {
                        x: -2553179.736293043,
                        y: 4097996.669789019,
                        z: 4153757.005193304
                    },
                    orientation: {
                        heading: 5.837346505274043,
                        pitch: -0.7927209256695096,
                        roll: 6.281137980253018
                    },
                    duration: 1
                };
                this.viewer.scene.camera.setView(flyToOpts);
            },

            destroy() {
                this.viewer.entities.removeAll();
                this.viewer.imageryLayers.removeAll(true);
                this.viewer.destroy();
            }
        }

        xt3dInit.init("map3d");

        //初始化漫游 
        let positions = [
            Cesium.Cartesian3.fromDegrees(121.9225148454514, 40.8964983923483, 0.5),
            Cesium.Cartesian3.fromDegrees (121.9257958846259, 40.89774213972319, 0.5),
            Cesium.Cartesian3.fromDegrees (121.92589502924505, 40.89781990219659, 0.5),
            Cesium.Cartesian3.fromDegrees (121.9258959182483, 40.89789364033584, 0.5),
            Cesium.Cartesian3.fromDegrees (121.92575821143836, 40.89818783763296, 0.5),
            Cesium.Cartesian3.fromDegrees (121.92538253447907, 40.89879216418771, 0.5),
            Cesium.Cartesian3.fromDegrees (121.92531227264294, 40.89884044807872, 0.5),
            Cesium.Cartesian3.fromDegrees (121.92516992920135, 40.89883888647573, 0.5),
            Cesium.Cartesian3.fromDegrees (121.923680006847, 40.898252224283304, 0.5),
        ];
        let roamObj = new xt3d.TrackRoam.Roam(xt3dInit.viewer, positions, {
            speed: 10,
            modelUrl: "/data.xt3d.cn/assets/gltf/redCar.glb",
            scale: 0.05,
            role: 1
        });

        function start() {
            roamObj.start();
        }

        function stop() {
            roamObj.stop();
        }
    </script>
</body>

</html>