Cesium|xt3d球体材质

最新推荐文章于 2023-11-13 16:20:34 发布

xt3d

最新推荐文章于 2023-11-13 16:20:34 发布

阅读量413

点赞数

文章标签： cesium xt3d webgis

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

版权

cesium|xt3d 专栏收录该内容

89 篇文章 51 订阅

订阅专栏

此博客演示了如何使用Cesium库和xt3d扩展在Web环境中创建3D球体，并展示了不同颜色和动画效果的球体实例。通过Cesium的 Viewer 组件与xt3d的EllipsoidMaterial结合，实现了球体的3D渲染及动态视觉效果。代码中详细定义了球体的位置、大小、颜色和动画参数。

摘要由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://cdn.jsdelivr.net/npm/cesium@1.84.0/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/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;
        }
    </style>
</head>

<body>
    <div id="map3d"></div>
    <script>
        let xt3dInit = {
            init(el) {
                this.initViewer(el);
                this.addEllipsoids();
                this.setView();
            },

            //初始化viewer
            initViewer(el) {
                this.viewer = new Cesium.Viewer(el, {
                    infoBox: false,
                    selectionIndicator: false,
                    navigation: false,
                    animation: true,
                    timeline: false,
                    baseLayerPicker: false,
                    geocoder: false,
                    homeButton: false,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                    shouldAnimate: true,
                    imageryProvider: new Cesium.UrlTemplateImageryProvider({
                        url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
                    })
                });
                this.viewer.animation.container.style.visibility = 'hidden'; // 不显示动画控件 

                //是否开启抗锯齿
                this.viewer.scene.fxaa = true;
                this.viewer.scene.postProcessStages.fxaa.enabled = true;
            },

            //添加球体
            addEllipsoids() {
                //CYAN
                this.viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(103.41774762544196, 35.083265862726655, 0),
                    ellipsoid: {
                        radii: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),
                        maximumCone: Cesium.Math.PI_OVER_TWO,
                        material: new xt3d.EllipsoidObject.EllipsoidMaterial({
                            color: Cesium.Color.CYAN,
                            duration: 2000,
                            count: 3
                        })
                    },
                });

                //RED
                this.viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(103.34514794376686, 35.11942651143058, 0),
                    ellipsoid: {
                        radii: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),
                        maximumCone: Cesium.Math.PI_OVER_TWO,
                        material: new xt3d.EllipsoidObject.EllipsoidMaterial({
                            color: Cesium.Color.RED,
                            duration: 2000,
                            count: 3
                        })
                    },
                });

                //YELLOW
                this.viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(103.45794453902958, 35.12239650479235, 0),
                    ellipsoid: {
                        radii: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),
                        maximumCone: Cesium.Math.PI_OVER_TWO,
                        material: new xt3d.EllipsoidObject.EllipsoidMaterial({
                            color: Cesium.Color.YELLOW,
                            duration: 2000,
                            count: 9
                        })
                    },
                });

                // SPRINGGREEN   
                this.viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(103.39379061776741, 35.166000463967926, 0),
                    ellipsoid: {
                        radii: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),
                        maximumCone: Cesium.Math.PI_OVER_TWO,
                        material: new xt3d.EllipsoidObject.EllipsoidMaterial({
                            color: Cesium.Color.SPRINGGREEN,
                            duration: 2000,
                            count: 9
                        })
                    },
                });

                //LIME
                this.viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(103.49621921280655, 35.165679940417995, 0),
                    ellipsoid: {
                        radii: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),
                        maximumCone: Cesium.Math.PI_OVER_TWO,
                        material: new xt3d.EllipsoidObject.EllipsoidMaterial({
                            color: Cesium.Color.LIME,
                            duration: 2000,
                            count: 15
                        })
                    },
                });

                // MEDIUMTURQUOISE 

                this.viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(103.4361227864825, 35.20684165883036, 0),
                    ellipsoid: {
                        radii: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),
                        maximumCone: Cesium.Math.PI_OVER_TWO,
                        material: new xt3d.EllipsoidObject.EllipsoidMaterial({
                            color: Cesium.Color.MEDIUMTURQUOISE,
                            duration: 2000,
                            count: 15
                        })
                    },
                });
            },

            setView() {
                let flyToOpts = {
                    destination: {
                        x: -1233509.025606406,
                        y: 5100923.547921194,
                        z: 3654112.8922849945
                    },
                    orientation: {
                        heading: 5.431743193211036,
                        pitch: -0.877469591050072,
                        roll: 0.003210416202778177
                    },
                    duration: 1
                };
                this.viewer.scene.camera.flyTo(flyToOpts);
            },

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

        xt3dInit.init("map3d");
    </script>
</body>

</html>