Cesium|xt3d动态线

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

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.addPolylineLinkPulse();
                this.addPolylineTrialFlow();
                this.addPolylineArrowOpacity();
                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: false,
                    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
                    })
                });

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

            addPolylineLinkPulse() {
                let lines = [
                    [{
                        x: -1705722.7375782044,
                        y: 5456272.240635795,
                        z: 2818985.3064158773
                    }, {
                        x: -1707465.3050721162,
                        y: 5455799.126313257,
                        z: 2818846.9912274643
                    }, {
                        x: -1709648.901559206,
                        y: 5455193.614325796,
                        z: 2818696.3690761398
                    }],
                    [{
                        x: -1705743.9778158371,
                        y: 5456179.3424243955,
                        z: 2819151.1387875197
                    }, {
                        x: -1708235.6078501693,
                        y: 5455529.657677858,
                        z: 2818901.457562383
                    }, {
                        x: -1709625.693373575,
                        y: 5455126.525294995,
                        z: 2818839.3192474963
                    }]
                ];
                let colors = [Cesium.Color.RED, Cesium.Color.AQUA]
                lines.forEach((item, index) => {
                    this.viewer.entities.add({
                        polyline: {
                            positions: item,
                            width: 8,
                            material: new xt3d.PolylineObject.PolylineLinkPulseMaterialProperty({
                                color: colors[index], //颜色
                                duration: 10000, //时间 控制速度
                                url: "/data.xt3d.cn/assets/images/polylinematerial/LinkPulse.png", //材质图片
                            }),
                            clampToGround: true
                        }
                    });
                })
            },

            addPolylineTrialFlow() {
                let lines = [
                    [{
                        x: -1705719.5727869077,
                        y: 5456375.624182519,
                        z: 2818788.4358880203
                    }, {
                        x: -1707268.7350737453,
                        y: 5455952.069465352,
                        z: 2818671.210907333
                    }, {
                        x: -1709635.8100880147,
                        y: 5455271.383798028,
                        z: 2818554.747371558
                    }],
                    [{
                        x: -1705774.083582354,
                        y: 5456455.8386593675,
                        z: 2818601.42995507
                    }, {
                        x: -1708265.7347283296,
                        y: 5455756.4481896395,
                        z: 2818447.2990572792
                    }, {
                        x: -1709574.189798031,
                        y: 5455378.459767089,
                        z: 2818386.0095119956
                    }]
                ]

                let colors = [Cesium.Color.RED, Cesium.Color.AQUA]
                lines.forEach((item, index) => {
                    this.viewer.entities.add({
                        polyline: {
                            positions: item,
                            width: 8,
                            material: new xt3d.PolylineObject.PolylineTrialFlowMaterialProperty({
                                color: colors[index],
                                duration: 2000,
                            }),
                            clampToGround: true
                        }
                    });
                })
            },

            addPolylineArrowOpacity() {
                let lines = [
                    [{
                        x: -1705759.1254791946,
                        y: 5456563.243728887,
                        z: 2818403.8820573976
                    }, {
                        x: -1709580.2897493609,
                        y: 5455451.370047656,
                        z: 2818242.146330367
                    }],
                    [{
                        x: -1705781.5982320097,
                        y: 5456612.565487121,
                        z: 2818295.519493847
                    }, {
                        x: -1709605.7903465675,
                        y: 5455497.846780045,
                        z: 2818137.4127685623
                    }]
                ]

                let colors = [Cesium.Color.YELLOW, Cesium.Color.AQUA]
                lines.forEach((item, index) => {
                    this.viewer.entities.add({
                        polyline: {
                            positions: item,
                            width: 8,
                            material: new xt3d.PolylineObject.PolylineArrowMaterialProperty({
                                color: colors[index],
                                duration: 800,
                                count: 3, //重复次数
                                url: "/data.xt3d.cn/assets/images/polylinematerial/arrowopacity.png", //材质图片"
                            }),
                            clampToGround: true
                        }
                    });
                })
            },

            setView() {
                this.viewer.scene.camera.setView({
                    duration: 1,
                    destination: {
                        x: -1709251.0767395466,
                        y: 5461386.32337908,
                        z: 2820645.238657382
                    },
                    orientation: {
                        heading: 0.13762265446730737,
                        pitch: -1.460307026543739,
                        roll: 0.003401834066556475
                    }
                });
            },


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

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

</html>

预览地址

xt3d 在线预览地址

xt3d
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
C2——cesium加载城市级三维管网模型的方案
GIS特战兵
07-06 1万+
创作目的是为感谢“蚂蚁管线”的盛哥提供的免费软件，希望有能力的兄弟能与他合作。 管网覆盖整个市区的管线和管网用shp数据生成三维3Dtiles并加载到cesium里。包括：（绿色） 雨水 ；（紫色）污水；（棕色） 雨污合流；综合管线等。双击可以查看属性，鼠标滑过可以查看ID。管网shp数据达2G，最终模型6G左右
cesium 矢量建筑 3dtiles渲染（渐变效果、动态效果）
renkangever的博客
11-17 3363
需要webgl知识修改cesium原代码， 参考原文：https://blog.csdn.net/fywindmoon/article/details/108414997
【Cesium学习（八）】Cesium设置材质—后续
最新发布
HAI_GUI的博客
06-05 441
【Cesium学习（八）】Cesium设置材质—后续
Cesium-EarthSdk简单功能实现（三）——3D柱状图
u011505575的博客
11-28 1710
Cesium-EarthSdk简单功能实现（三）——3D柱状图 效果： 1、用QGIS或ArcGIS的渔网工具生成统计点阵，并转成如图所示json x和y分别为经纬度坐标，value为柱状图在该点的值 2、参考cesium官网案例，使用cesium原生接口实现 addBarChart() { //获取json var barData = require('@/assets/json/bar.json') //实例化barEntity，添加至vie
Cesium流动线纹理
chudage11的专栏
09-28 7394
1.扩展类PolylineTrailMaterialProperty import Cesium from "cesium/Cesium"; export class PolylineTrailMaterialProperty { constructor(options) { options = Cesium.defaultValue(options, Cesi...
Cesium|xt3d 热点面板文本
xt3d的博客
08-28 462
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" con
54.（cesium篇）cesium叠加动态流线(着色器).zip
11-23
在本教程中，我们将深入探讨如何在Cesium中叠加动态流线并利用着色器来实现这一效果。Cesium是一个强大的开源JavaScript库，用于在Web上创建3D地球和地理空间应用程序。它提供了丰富的功能，包括地理数据可视化、3D...
viewShed3d-cesium.js
07-28
var viewshed = new Cesium.ViewShed3D(viewer, { horizontalAngle: Number(viewModel.horizontalAngle), verticalAngle: Number(viewModel.verticalAngle), distance: Number(viewModel.distance), calback: ...
Cesium 单独加载3D模型
07-17
在本文中，我们将深入探讨如何使用Cesium框架来单独加载3D模型，特别是不包含地球背景的场景。Cesium是一个强大的开源JavaScript库，专为在Web浏览器中展示高精度的3D地理空间数据而设计。它广泛应用于地理信息系统...
Cesium动态绘制面，线，点.vue
09-17
c
在Cesium中绘制动态线段
yue1241630499的博客
06-29 4942
在Cesium中绘制动态线段 以下实现方法均属野路子。 理想中，可以扩展polylinegeometry增加一个customdata属性用于提交除位置外的其他顶点数据，类似于下文使用的color 计划实现类似于蚂蚁线的效果，在Cesium中翻看各种材质，没法发现满足条件的material或Appearance。那么只能自己手工实现了。 基本思路 传递顶点时，附加每个顶点距线段起点的距离，用此距离来实现线段分段 shader中对传入的距离取模，即可实现分段绘制不通的颜色 使用fabric 查看了fa
Cesium--3dtileset建筑渐变加动态线条
12-18
Cesium不改源码，tileset建筑渐变加动态线条
xt3d:使用HaxeLime的开源，跨平台，3D图形和游戏开发框架-Game source platform
03-25
介绍 xTalk3d（简称：talktalk3d或xt3d）是使用Haxe和Lime构建的开源，跨平台，3D图形和游戏开发框架。 xTalk3d旨在提供一种简单的方法，以优化的性能为多个平台开发3D游戏和应用程序。 根据目标平台的不同，它使用OpenGL，Op​​enGL ES或WebGL来提供图形功能。 它可以利用做到这一点， 同时提供图形和用户输入后端支持。 xt3d项目的编译是通过lime命令行工具完成的。 平台类 xTalk3d旨在支持Lime一样多的平台，但目前已在以下平台上进行定期测试： 苹果电脑 HTML5 的iOS 已知以下平台可以工作，但可能需要那些愿意提供帮助的人员进行测试;） 视窗 Linux 安卓 特征 具有3D对象转换的场景图 OpenGL，Op​​enGL ES，WebGL支持 动态照明 纹理贴图 内置和自定义几何的网格 内置材质/着色器 自定义着
Fusioncharts XT V3.2.2最新中文版教程
02-17
Fusioncharts XT V3.2.2最新中文版教程，详细解释Fusioncharts ＸＴ的使用。
Cesium 实战 24 - OD 线，动态连接线（卫星通信）
linzi19900517的博客
07-31 652
最近有个卫星相关的项目，希望有一个卫星通信的效果，在思考之后，觉得其实就是一个线段 entity 对象，给他一个动态效果应该可以实现。Cesium 实战 - OD 线，动态连接线。
cesium 动态线效果
AllBluefm的专栏
04-22 498
【代码】cesium 动态线效果。
[ Cesium ] 根据卫星位置，建立实时动态连线
爪白白的个人博客
11-25 3646
实现思路 通过加载 czml 文件，生成卫星 获取卫星实体的位置，建立连线 监听卫星位置，若发生变化，则刷新连线 问题解决 连线动态变化 setInterval() 可以监听每一帧画面 或者说当启动场景后，setInterval() 每一帧都会被调用 连线闪烁 直接设置连线位置，或者删除连线后重新添加都会造成闪烁 通过使用 CallbackProperty() 可以避免闪烁 完整实现代码 <body> <div id="cesiumContainer"></d
Cesium实现流动线/动态纹理
热门推荐
weixin_42066016的博客
04-10 2万+
之前主要以超图Webgl使用为主，后面由于一些原因，主要分享cesium的使用心得 在使用cesium的时候，常常需要一些动态效果，例如人口迁徙图，管线流动图等，但是cesium示例中没有类似的示例，想要实现的话，最好通过纹理来实现。 创建纹理 cesium中的有很多内置好的纹理，具体可以参考最下面参考文章中的第一个链接，具体关于纹理相关的基础知识，也可以在其中了解到。 创建材质类。 functi...
Cesuim中线的波动纹理
qq_42224893的博客
01-03 865
Cesuim中线的波动纹理 HTML格式 var viewer=ysc.createNormalCesium("cesiumContainer",{}); var data= { flowing:true, height:100000,//抛物线最大高度 flowImage:"img/colors.png" ,center:{...
cesium 动态线流动线
09-02
在Cesium中，可以使用纹理来创建动态线流动线效果。首先，你可以使用CesiumLab将你的数据转换为Cesium可用的3dtiles数据格式。然后，你可以向Cesium.Material中添加你刚刚新建的纹理，以创建动态线流动线效果。你...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

xt3d

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

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

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

打赏作者

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

抵扣说明：

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

余额充值