Cesium|xt3d 雷达追踪圆锥体

最新推荐文章于 2023-06-26 13:35:11 发布
最新推荐文章于 2023-06-26 13:35:11 发布
阅读量1.1k 收藏 2
点赞数 1
文章标签： 3d javascript 前端 xt3d webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xietao20/article/details/123363246
版权

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://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;
        }
    </style>
</head>

<body>
    <div id="map3d"></div>
    <script>
        let xt3dInit = {
            init(el) {
                this.initViewer(el);
                this.load3dtiles();
                //源点坐标
                this.originPoint = [106.45531788088708, 29.50637660924465, 35];
                this.originPosition = Cesium.Cartesian3.fromDegrees(this.originPoint[0], this.originPoint[1], this.originPoint[2] + 20);
                this.conicSensor = new xt3d.SpacePlugin.ConicSensor(this.viewer, this.originPosition);

                this.addRadarModel();
                this.addTarget();
                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;

            },

            //设置视角
            setView() {
                this.viewer.scene.camera.setView({
                    duration: 1,
                    destination: {
                        x: -2168792.734068365,
                        y: 6881947.030631928,
                        z: 2564864.3138284963
                    },
                    orientation: {
                        heading: 6.2092497690218975,
                        pitch: -0.8489176138360675,
                        roll: 0.0001151687477829455
                    }
                });
            },

            //添加雷达模型
            addRadarModel() {
                var entity = this.viewer.entities.add({
                    name: "leida",
                    position: Cesium.Cartesian3.fromDegrees(this.originPoint[0], this.originPoint[1], this.originPoint[2]),
                    model: {
                        uri: "/data.xt3d.cn/assets/glb/leida.glb",
                        scale: 0.5,
                        maximumScale: 1,
                        silhouetteColor: Cesium.Color.fromAlpha(Cesium.Color.YELLOW, 0.8), //设置模型外轮廓颜色与透明度
                        silhouetteSize: 1 //设置模型外轮廓线宽度
                    },
                });
            },

            //添加目标 ，这里以运行的飞机为例
            addTarget() {
                var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
                var stop = Cesium.JulianDate.addSeconds(
                    start,
                    360,
                    new Cesium.JulianDate()
                );

                this.viewer.clock.startTime = start.clone();
                this.viewer.clock.stopTime = stop.clone();
                this.viewer.clock.currentTime = start.clone();
                this.viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
                this.viewer.clock.multiplier = 10;
                var position = this.computeCirclularFlight(this.originPoint[0], this.originPoint[1], 5, start);

                this.targetEntity = this.viewer.entities.add({
                    availability: new Cesium.TimeIntervalCollection([
                        new Cesium.TimeInterval({
                            start: start,
                            stop: stop,
                        }),
                    ]),
                    position: position,
                    orientation: new Cesium.VelocityOrientationProperty(position),
                    model: {
                        uri: "/data.xt3d.cn/assets/glb/Cesium_Air.glb",
                        minimumPixelSize: 128,
                    },
                    path: {
                        resolution: 1,
                        material: new Cesium.PolylineGlowMaterialProperty({
                            glowPower: 0.1,
                            color: Cesium.Color.YELLOW,
                        }),
                        width: 10,
                    },
                });

                this.targetEntity.position.setInterpolationOptions({
                    interpolationDegree: 2,
                    interpolationAlgorithm: Cesium.HermitePolynomialApproximation,
                })
                this.addTickEvent(); //注册事件 获取飞机的实时位置
            },

            //生成目标的运行轨迹
            computeCirclularFlight(lon, lat, radius, start) {
                var property = new Cesium.SampledPositionProperty();
                for (var i = 0; i <= 360; i += 45) {
                    var radians = Cesium.Math.toRadians(i);
                    var time = Cesium.JulianDate.addSeconds(
                        start,
                        i,
                        new Cesium.JulianDate()
                    );
                    var position = Cesium.Cartesian3.fromDegrees(
                        lon + radius * 1.5 * Math.cos(radians),
                        lat + radius * Math.sin(radians),
                        300000
                    );
                    property.addSample(time, position);

                    this.viewer.entities.add({
                        position: position,
                        point: {
                            pixelSize: 8,
                            color: Cesium.Color.TRANSPARENT,
                            outlineColor: Cesium.Color.YELLOW,
                            outlineWidth: 3,
                        },
                    });
                }
                return property;
            },

            //动态获取目标点位置
            addTickEvent() {
                this.viewer.clock.onTick.addEventListener(e => {
                    const targetPosition = this.targetEntity.position.getValue(
                        this.viewer.clock.currentTime
                    );
                    this.conicSensor.updateTargetPosition(targetPosition);
                }, this);
            },

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

                tileset.readyPromise
                    .then(tileset => {
                        xt3d.TilesetPlugin.setTilesetHeight(tileset, 55);
                    })
                    .otherwise(function(error) {
                        console.log(error);
                    });
            },

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

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

</html>

预览地址

xt3d 在线预览地址

xt3d
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
cesium 光锥（发光锥体图元效果）
God's asylum的博客
05-05 282
图形分为四个实体来解决分级别为圆锥、圆锥外围移动小点点、底部发光圆框、底部旋转虚线，分别采用图元加载方法进行加载，修改其中的材质就可以个出现效果了。底部旋转虚线和圆锥外围发光点采用canvas来进行编写。
Cesum 3D雷达扫描
05-06
Cesium 3D雷达扫描，支持扫描形状角度的设置，扫描体支持二维扇形和3D扇形体，有问题看这 https://github.com/easydu2002/cesium-demo
cesium圆形扫描、雷达扫描（一般用于预警）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
01-17 5701
最近再做eact-cesium项目来预警了在地图上其经纬度闪烁，找了好久才找到方法（当然是别人封装的）。 效果图 /** *圆形扩大扫描圈 * */ function AddCircleScanPostStage(viewer, cartographicCenter, maxRadius, scanColor, duration) { va...
Cesium雷达追踪圆锥体
xt3d的博客
10-31 4696
Cesium雷达追踪圆锥体 实现效果 实现思路 通过原点与目标点，计算原点处的方向角，推算圆锥体的相关参数 关键代码 //添加圆锥体 addSpaceFollow() { this.viewer.entities.add({ orientation: new Cesium.CallbackProperty(e => { let m = this.getModelMatrix(this.originPosition, t
Cesium添加雷达扫描圆
最新发布
m0_53264079的博客
06-26 559
cesium
003：vue+cesium 设置skybox透明并添加背景图
大剑师兰特的GIS世界
02-25 1328
第003个本示例的目的是介绍如何在vue+leaflet中设置skybox透明并添加背景图。我们不想要黑乎乎的背景，想自定义一个背景图，然后前面显示地球。
Cesium雷达追踪卫星
03-31
Cesium雷达追踪卫星，模拟卫星轨道使用Czml文件
cesium 旋转弹跳四棱锥（光带扫描）（动态泛光效果）
q1025387665a的博客
05-31 5812
前言：本文主要分以下几个部分阐述功能的核心实现。 1、 四棱锥的生成 2、物体的平移（也就是弹跳，本质上来说就是控制物体的渲染位置） 3、物体的绕自身中心轴旋转 4、Cesium drawCommand下的纹理贴图。 5、光带扫描（也有人叫动态泛光，这种效果在啥子智慧城市出现的比较多） 静态效果图 四棱锥的生成 上图可知， 四个边缘上的点是同一Y值，拉高中心点的y值或者减少 中心点的y值就可以形成一...
Cesium画个雷达四凌锥体
细雨纷飞~~~
05-19 1214
var targetPosition = Cesium.Cartesian3.fromDegrees(116.57, 26.91, 2000.0); viewer.entities.add({ name:"雷达四凌锥体", position:targetPosition, orientation: Cesium.Transforms.headingPitchRollQuaternion(targetPosition, new Cesium.HeadingPitch.
Cesium雷达追踪追踪（雷达探照效果）
God's asylum的博客
06-11 2423
cesium 雷达照射，探测跟踪效果，本文最后否有源码，可直接复制使用
cesium中绘制面片
行走的过客
11-14 1304
在cesium平台上绘制面片，可以实现颜色的rgb随高度渐变，网格间隔数，网格大小，高度范围自定义，并且使用样条曲线公式进行了平滑处理，可自定义样条数量，实现任意阶数的二维样条曲面自动构建。
cesium卫星雷达示例，html,三维开发实例 前端开发
05-21
cesium卫星雷达示例，html,三维开发实例 前端开发
基于锥束CT切片图像的复杂零件三维表面重构 (2006年)
05-21
根据锥束CT切片图像的特点，提出了一种面向复杂零件的三维表面重构新方法：首先采用3D亚体素边缘检测算法提取序列切片图像的高精度封闭轮廓，并重构出切片轮廓的拓扑信息，然后采用一种改进的基于截面属性的轮廓分割算法得到若干组局部结构轮廓集，最后对这些轮廓集进行叠加与拼合，形成零件的整个三维表面。实验结果表明，该方法分割轮廓准确，稳定性好，对具有复杂内外结构的零件，可确保其重构结果的拓扑正确性。
cesium 雷达扫射不会追随鼠标移动
12-18
即便开启深度检测也会有问题，自己写了不会有问题的雷达扫射效果，固定点位
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叠加一张雷达图
赵晨的博客
03-15 1276
解析雷达图在之前的文章中已经写过，叠加后效果如下： function CreateImagery(picpath) { if (polygonLidar != null) viewer.scene.imageryLayers.remove(polygonLidar, true); polygonLidar = viewer.imageryLayers.addImageryProvider (new Cesium.SingleTileImageryProvider(
Cesium雷达追踪追踪（圆锥体效果）
God's asylum的博客
05-28 1396
【代码】Cesium雷达追踪追踪（圆锥体效果）
cesium雷达追踪圆锥体
05-24
Cesium雷达可以用来追踪圆锥体，但需要一些特殊的算法和技术来实现。圆锥体通常是一个三维物体，其形状类似于圆锥。在雷达追踪中，我们需要获取该物体的位置和速度等信息，以便进行跟踪和预测。 一种常见的方法是使用卡尔曼滤波器来对圆锥体进行跟踪。卡尔曼滤波器是一种基于状态空间模型的递归滤波算法，可以用于估计变量的状态和误差，并根据观测结果进行修正。在圆锥体追踪中，我们可以将圆锥体的位置和速度等参数作为系统状态，使用雷达测量结果来更新状态并进行预测。 除了卡尔曼滤波器，还可以使用其他方法来进行圆锥体追踪，例如扩展卡尔曼滤波器、粒子滤波器等。这些方法都需要根据具体场景和需求进行选择和调整，以达到最佳的追踪效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

xt3d

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

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

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

打赏作者

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

抵扣说明：

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

余额充值