Cesium|xt3d动态墙体高级

最新推荐文章于 2024-01-18 15:53:10 发布
最新推荐文章于 2024-01-18 15:53:10 发布
阅读量581 收藏 1
点赞数
文章标签： cesium xt3d webgis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xietao20/article/details/120022305
版权

Cesium|xt3d动态墙体高级

效果

在这里插入图片描述

代码

 <!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.setView();
                this.addWall1();
                this.addWall2();
                this.addRegion();
            },

            //初始化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.UrlTemplateImageryProvider({
                        url: "https://a.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=mapboxTk"
                    })
                });
                this.viewer.scene.globe.depthTestAgainstTerrain = true;

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

            },

            //墙体1
            addWall1() {
                let ps = [{
                    x: -2474889.688032698,
                    y: 4824960.400990192,
                    z: 3346614.48985844
                }, {
                    x: -2474959.112277405,
                    y: 4825272.063037195,
                    z: 3346117.112050627
                }, {
                    x: -2474939.1810194487,
                    y: 4825404.969460795,
                    z: 3345941.373409761
                }, {
                    x: -2474820.374826624,
                    y: 4825655.0848918725,
                    z: 3345670.0249841893
                }, {
                    x: -2474843.7659115475,
                    y: 4825747.278287367,
                    z: 3345521.071249182
                }, {
                    x: -2475040.2968019145,
                    y: 4825831.891434628,
                    z: 3345254.417419442
                }, {
                    x: -2475473.209816208,
                    y: 4825960.80360176,
                    z: 3344752.4666252937
                }, {
                    x: -2477532.4158931,
                    y: 4824887.94326429,
                    z: 3344775.4429073003
                }, {
                    x: -2477541.3292041654,
                    y: 4824715.925108329,
                    z: 3345015.3520040256
                }, {
                    x: -2477729.6032597255,
                    y: 4824404.662660069,
                    z: 3345322.7504442455
                }, {
                    x: -2477696.14832603,
                    y: 4824303.597160613,
                    z: 3345492.131472891
                }, {
                    x: -2477338.4608761664,
                    y: 4824051.183092954,
                    z: 3346116.7295456477
                }, {
                    x: -2477102.505171502,
                    y: 4823769.316606554,
                    z: 3346693.825706187
                }, {
                    x: -2474887.535021391,
                    y: 4824959.289977459,
                    z: 3346617.6624656776
                }, {
                    x: -2474889.688032698,
                    y: 4824960.400990192,
                    z: 3346614.48985844
                }];

                let wall = new xt3d.WallObject.FlowWall(
                    this.viewer,
                    ps, {
                        wallHeight: 800,
                        wallColor: Cesium.Color.LIME,
                        duration: 1000,
                        materialType: xt3d.WallObject.MaterialTypes.LINEFLOW,
                    }
                );

                ps = [ {
                    x: -2478447.17080598,
                    y: 4831557.146644312,
                    z: 3334506.1226337403
                }, {
                    x: -2480787.0201762747,
                    y: 4821660.851263834,
                    z: 3346990.726326899
                }, {
                    x: -2474062.5162910437,
                    y: 4823110.367259704,
                    z: 3349859.5029249857
                }, {
                    x: -2467178.109099282,
                    y: 4827663.208404705,
                    z: 3348386.2184367767
                }, {
                    x: -2468122.4976675673,
                    y: 4836466.567306413,
                    z: 3335041.7993537257
                }, {
                    x: -2478447.17080598,
                    y: 4831557.146644312,
                    z: 3334506.1226337403
                }];
                wall = new xt3d.WallObject.FlowWall(
                    this.viewer,
                    ps, {
                        wallHeight: 800,
                        wallColor: Cesium.Color.RED,
                        duration: 1000,
                        materialType: xt3d.WallObject.MaterialTypes.LINEARGRADIENT,
                        colorStops: [{
                            stop: 0,
                            color: "rgba(220,168,24,0.5)"
                        }, {
                            stop: 1,
                            color: "rgba(255,0,0,0.5)"
                        }]
                    }
                );
            },

            //墙体2
            addWall2() {
                let ps = [{
                    x: -2472746.317645412,
                    y: 4827440.497417323,
                    z: 3344635.0383727686
                }, {
                    x: -2473924.83663286,
                    y: 4826329.797883995,
                    z: 3345361.4869923065
                }, {
                    x: -2473227.8781009037,
                    y: 4825844.349650365,
                    z: 3346568.7831696123
                }, {
                    x: -2471128.5540824533,
                    y: 4826930.959796889,
                    z: 3346552.6072027795
                }, {
                    x: -2471138.95000219,
                    y: 4827726.807578295,
                    z: 3345404.4772703657
                }, {
                    x: -2472746.317645412,
                    y: 4827440.497417323,
                    z: 3344635.0383727686
                }];

                let wall = new xt3d.WallObject.FlowWall(
                    this.viewer,
                    ps, {
                        wallHeight: 800,
                        wallColor: Cesium.Color.YELLOW,
                        duration: 1000,
                        materialType: xt3d.WallObject.MaterialTypes.SCROLL,
                    }
                );
            },

            //行政边界  
            addRegion() {
                fetch("/data.xt3d.cn/assets/data/hefei_bianjie.json")
                    .then(res => {
                        return res.json();
                    })
                    .then(res => {
                        let coordinates = res.geometry.coordinates[0];
                        let ps = this.coordinateToPositions(coordinates);
                        let regionWall = new xt3d.WallObject.FlowWall(this.viewer, ps, {
                            wallHeight: 800,
                            wallColor: Cesium.Color.YELLOW,
                            duration: 1000,
                            materialType: xt3d.WallObject.MaterialTypes.LINEFLOW,
                        });
                    });
            },

            //坐标转换
            coordinateToPositions(coordinates) {
                let positions = [];
                coordinates.map(c => {
                    positions.push(Cesium.Cartesian3.fromDegrees(c[0], c[1], 0));
                });
                return positions;
            },

            //设置视角
            setView() {
                let flyToOpts = {
                    destination: {
                        x: -2476803.194269737,
                        y: 4822850.889125045,
                        z: 3364779.000587992
                    },
                    orientation: {
                        heading: 3.384793240534525,
                        pitch: -0.3895587871147317,
                        roll: 6.282401674798557
                    },
                    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>

预览地址

xt3d 在线预览地址

xt3d
关注
专栏目录
cesium动态立体墙（电子围栏效果）
God's asylum的博客
08-25 326
加载立体墙，修改material材质效果来实现。
Cesium 实现动态立体墙效果；可以直接复制代码到 cesium sandcastle 中运行查看效果；
12-31
Cesium 实现动态立体墙效果；可以直接复制代码到 cesium sandcastle 中运行查看效果；
cesium实现立体动态墙
12-04 2109
AnimationWall.js： 实现：
cesium绘制动态墙体
weixin_45501117的博客
08-17 802
【代码】cesium绘制动态墙体。
Cesium通过着色器实现~动态墙效果
qq_35984445的博客
11-18 3180
转载链接：https://blog.csdn.net/wgf1997/article/details/105680049 colors1.png 一、由上到下 // 着色器代码 "czm_material czm_getMaterial(czm_materialInput materialInput)\n\ {\n\ czm_material material = czm_getDefaultMaterial(materialInput);\n\ vec2 st = materialInpu
cesium实现动态立体墙效果
热门推荐
专注GIS开发
02-13 1万+
cesium实现动态立体墙效果
viewShed3d-cesium.js
07-28
var viewshed = new Cesium.ViewShed3D(viewer, { horizontalAngle: Number(viewModel.horizontalAngle), verticalAngle: Number(viewModel.verticalAngle), distance: Number(viewModel.distance), calback: ...
95.（cesium篇）cesium动态单体化-3D建筑物（楼栋）.rar
07-07
该资源包的执行效果查看地址：...“地图之家”专栏中的“95.（cesium篇）cesium动态单体化-3D建筑物（楼栋）”。如下载有问题，可联系博主。 解压密码：cesium
96.（cesium篇）cesium动态单体化-3D建筑物（楼层）.rar
07-08
该资源包的执行效果查看地址：...“地图之家”专栏中的“96.（cesium篇）cesium动态单体化-3D建筑物（楼层）”。如下载有问题，可联系博主。 解压密码：cesium
58.（cesium篇）cesium叠加动态立体墙(着色器)(上下方向).zip
06-13
该资源包的执行效果查看地址：...“地图之家”专栏中的“58.（cesium篇）cesium叠加动态立体墙(着色器)(上下方向)”。如下载有问题，可联系博主。 解压密码：cesium
Cesium绘制动态墙
最新发布
你们瞎搞
01-18 1006
包括要绘制的围栏坐标以及围栏高度，以及纹理材质中要提供的图片，图片在将在文章顶部展示👆。2.调用初始化动态墙的方法，主要是运用了Primitive的材质渲染（GLSL语言）
Cesium-Examples:Cesium示例，包括3DTiles、雷达扫描、动态扩散点、渐变立体墙、渐变建筑物、视场角大小、日照分析、空间三角形、可视域分析、动画、站心坐标转换、地形开挖、方量计算、FlowLine等
05-24
Cesium-Examples Cesium示例，包括可视域分析、动画、渲染等 示例 3DTiles的加载，包括模型和建筑物 绘制各种emtity 绘制各种primitive 添加材质，包括动画、动态图片和闪烁材质 添加雷达扫描效果，以及雷达范围 动态扩散点 动态立体墙 渐变建筑物 可视域分析，包括地形和3DTiles 设置视场角大小 日照分析 添加空间三角形 站心坐标转WGS84（已知A点经纬度，以A点为站心观测到B点仰角为elevation，方位角为azimuth，距离为distance，求B点坐标） 地形开挖 方量计算 FlowLine Style
59.（cesium篇）cesium叠加动态立体墙(着色器)(顺逆时针方向).zip
06-13
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“59.（cesium篇）cesium叠加动态立体墙(着色器)(顺逆时针方向)”。如下载有问题，可联系博主。 解压密码：cesium
cesuim WallFlowMaterialProperty实现动态墙
qq_63736937的博客
09-27 350
深色蓝色区域会不断的从下向上动态流动 不断的重复。
Cesium动态立体墙效果
xt3d的博客
09-08 7898
使用Cesium wall墙体对象制作的动态效果 在***安保指挥系统中用于重点管控区域、封控圈层等特效，效果看起来比较酷炫，领导们喜欢。 录制的GIF有点模糊，附上两张截图
cesium加载电子围栏，通过shader自定义材质实现动态墙效果，cavans自定义材质实现分层效果
weixin_39150852的博客
05-11 5727
cavans自定义材质，设置颜色 /** * 颜色渐变 */ getColorRamp(elevationRamp, isVertical = true) { let ramp = document.createElement('canvas'); ramp.width = isVertical ? 1 : 100; ramp.height = isVertical ? 100 : 1; let ctx = ramp.getContext('2d'); let
Cesium 动态墙体
09-22
Cesium动态墙体是通过使用CallbackProperty类实现的。CallbackProperty类可以将属性的值设置为一个回调函数，并在每一帧更新该属性的值。在Cesium中，可以使用CallbackProperty类来实现动态效果，比如动态墙体的效果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xt3d

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值