cesium创建视椎体（可动态旋转）

已于 2023-12-22 13:53:19 修改
阅读量3.9k 收藏 21
点赞数 5
分类专栏： GIS 文章标签： 前端 javascript html
于 2023-09-04 17:36:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CheryW/article/details/132673735
版权

一、封装创建视锥体的类（用全局viewer）

export class CreateFrustum{
    constructor(options){
        this.position = options.position;
        this.orientation = options.orientation;
        this.fov = options.fov || 30;
        this.near = options.near || 10;
        this.far = options.far || 100;
        this.aspectRatio = options.aspectRatio;
        this.add();
    }

    // 更新视锥体的姿态
    update(position, orientation){
        this.position = position;
        this.orientation = orientation;
        this.add();
    }

    // 创建视锥体和轮廓线
    add(){
        this.clear();
        this.addFrustum();
    }

    // 清除视锥体和轮廓线
    clear(){
        this.clearFrustum();
    }

    // 清除视锥体
    clearFrustum(){
        if(this.frustumPrimitive){
            viewer.scene.primitives.remove(this.frustumPrimitive);
            this.frustumPrimitive = null;
        }
    }

    // 创建视锥体及轮廓线
    addFrustum(){
        let frustum = new Cesium.PerspectiveFrustum({
            // 查看的视场角，绕Z轴旋转，以弧度方式输入
            // fov: Cesium.Math.PI_OVER_THREE,
            fov: Cesium.Math.toRadians(this.fov),
            // 视锥体的宽度/高度
            aspectRatio: this.aspectRatio,
            // 近面距视点的距离
            near: this.near,
            // 远面距视点的距离
            far: this.far,
        });
        let instanceGeo = new Cesium.GeometryInstance({
            geometry: new Cesium.FrustumGeometry({
	            frustum: frustum,
	            origin: this.position,
	            orientation: this.orientation,
	            vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
	        }),
            attributes: {
                color: Cesium.ColorGeometryInstanceAttribute.fromColor(
                    new Cesium.Color(1.0, 0.0, 0.0, 0.5)
                ),
            },
        });
        let instanceGeoLine = new Cesium.GeometryInstance({
            geometry: new Cesium.FrustumOutlineGeometry({
	            frustum: frustum,
	            origin: this.position,
	            orientation: this.orientation,
	        }),
            attributes: {
                color: Cesium.ColorGeometryInstanceAttribute.fromColor(
                    new Cesium.Color(1.0, 0.0, 0.0, 0.5)
                ),
            },
        });
        let primitive = new Cesium.Primitive({
            geometryInstances: [instanceGeo,instanceGeoLine],
            appearance: new Cesium.PerInstanceColorAppearance({
                closed: true,
                flat: true,
            }),
            asynchronous: false,
        });
        this.frustumPrimitive = viewer.scene.primitives.add(primitive);
    }
    }
}

注：ts写法与上诉文件仅开头部分不同

export class CreateFrustum{
   position: any;
   orientation:any;
   fov:any;
   near:any;
   far:any;
   aspectRatio:any;
   frustumPrimitive:any;
   constructor(options){
       this.position = options.position;
       this.orientation = options.orientation;
       this.fov = options.fov || 30;
       this.near = options.near || 10;
       this.far = options.far || 100;
       this.aspectRatio = options.aspectRatio;
       this.add();
   }
}

视椎体与视椎线分开封装

class CreateFrustum{
    constructor(options){
        this.position = options.position;
        this.orientation = options.orientation;
        this.fov = options.fov || 30;
        this.near = options.near || 10;
        this.far = options.far || 100;
        this.aspectRatio = options.aspectRatio;
        this.add();
    }

    // 更新视锥体的姿态
    update(position, orientation){
        this.position = position;
        this.orientation = orientation;
        this.add();
    }

    // 创建视锥体和轮廓线
    add(){
        this.clear();
        this.addFrustum();
        this.addOutline();
    }

    // 清除视锥体和轮廓线
    clear(){
        this.clearFrustum();
        this.clearOutline();
    }

    // 清除视锥体
    clearFrustum(){
        if(this.frustumPrimitive){
            viewer.scene.primitives.remove(this.frustumPrimitive);
            this.frustumPrimitive = null;
        }
    }

    // 清除轮廓线
    clearOutline(){
        if(this.outlinePrimitive){
            viewer.scene.primitives.remove(this.outlinePrimitive);
            this.outlinePrimitive = null;
        }
    }

    // 创建视锥体
    addFrustum(){
        let frustum = new Cesium.PerspectiveFrustum({
            // 查看的视场角，绕Z轴旋转，以弧度方式输入
            // fov: Cesium.Math.PI_OVER_THREE,
            fov: Cesium.Math.toRadians(this.fov),
            // 视锥体的宽度/高度
            aspectRatio: this.aspectRatio,
            // 近面距视点的距离
            near: this.near,
            // 远面距视点的距离
            far: this.far,
        });
        let geometry = new Cesium.FrustumGeometry({
            frustum: frustum,
            origin: this.position,
            orientation: this.orientation,
            vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
        });
        let instance = new Cesium.GeometryInstance({
            geometry: geometry,
            attributes: {
                color: Cesium.ColorGeometryInstanceAttribute.fromColor(
                    new Cesium.Color(1.0, 0.0, 0.0, 0.5)
                ),
            },
        });
        let primitive = new Cesium.Primitive({
            geometryInstances: instance,
            appearance: new Cesium.PerInstanceColorAppearance({
                closed: true,
                flat: true,
            }),
            asynchronous: false,
        });
        this.frustumPrimitive = viewer.scene.primitives.add(primitive);
    }

    // 创建轮廓线
    addOutline(){
        let frustum = new Cesium.PerspectiveFrustum({
            // 查看的视场角度，绕Z轴旋转，以弧度方式输入
            // The angle of the field of view (FOV), in radians. 
            // This angle will be used as the horizontal FOV if the width is greater than the height, otherwise it will be the vertical FOV.
            fov: Cesium.Math.toRadians(this.fov),
            // 视锥体的宽度/高度
            aspectRatio: this.aspectRatio,
            // 近面距视点的距离
            near: this.near,
            // 远面距视点的距离
            far: this.far,
        });
        let geometry = new Cesium.FrustumOutlineGeometry({
            frustum: frustum,
            origin: this.position,
            orientation: this.orientation,
            vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
        });
        let instance = new Cesium.GeometryInstance({
            geometry: geometry,
            attributes: {
                color: Cesium.ColorGeometryInstanceAttribute.fromColor(
                    new Cesium.Color(1.0, 1.0, 0.0, 1.0)
                ),
            },
        });
        let primitive = new Cesium.Primitive({
            geometryInstances: instance,
            appearance: new Cesium.PerInstanceColorAppearance({
                closed: true,
                flat: true,
            }),
            asynchronous: false,
        });
        this.outlinePrimitive = viewer.scene.primitives.add(primitive);
    }
}

export default CreateFrustum;

调用

// 创建视点
let origin = Cesium.Cartesian3.fromDegrees(120, 30);

// 视角定位
viewer.camera.flyTo({
    destination: origin,
});

let head = 0;
let pitch = 0;
let roll = 0;
let hpr = new Cesium.HeadingPitchRoll(heading,pitch,roll)
let orientation = Cesium.Quaternion.fromHeadingPitchRoll(hpr);

// 创建视锥体
let createFrustum = new CreateFrustum({
    position: origin,
    orientation: orientation,
    fov: 90,
    near: 10,
    far: 100,
    aspectRatio: 600 / 1080,
});

// 动态修改视锥体的姿态
setInterval(()=>{
    // 绕Z轴旋转-航向
    // head += 0.01;

    // 绕X轴旋转-俯仰
    // pitch += 0.01;

    // 绕Y轴旋转-翻滚
    roll += 0.01;
    hpr = new Cesium.HeadingPitchRoll(heading,pitch,roll)
    orientation = Cesium.Quaternion.fromHeadingPitchRoll(hpr);
    createFrustum.update(origin, orientation);
}, 200)
},

二、传入viewer

/**
 * 绘制视锥
 */
export default class {
    constructor(viewer, options) {
        this.viewer = viewer;
        this._position = options.position;
        this._orientation = options.orientation;
        this._fov = options.fov || 35.0;
        this._near = options.near||0.1;
        this._far = options.far||20;
        this._fill = options.fill || false;
        this._closed = options.closed || false;
        this._color = options.color || new Cesium.Color(1.0, 0.0, 0.0, 0.2);
        this._outlineColor=options.outlineColor||new Cesium.Color(0.0, 0.0, 0.0, 0.5);
        this._flat = options.flat || true;
        this.update(this._position,this._orientation);
    }

    update(position, orientation) {
        this._position = position;
        this._orientation = orientation;
        this._add();
    }

    _add() {
        this._clear();
        this._addFrustum();
        this._addOutline();
    }

    _clear() {
        this._clearFrustum();
        this._clearOutline();
    }

    _addFrustum() {
        if (!Cesium.defined(this._position)) {
            return;
        }
        if (!Cesium.defined(this.viewer)) {
            return;
        }
        var scene = this.viewer.scene;
        var frustum = new Cesium.PerspectiveFrustum({
            fov: Cesium.Math.toRadians(this._fov),
            aspectRatio: scene.canvas.clientWidth / scene.canvas.clientHeight,
            near: this._near,
            far: this._far,
        });
        this._frustum=frustum;

        var frustumGeometry = new Cesium.FrustumGeometry({
            frustum: frustum,
            origin: this._position,
            orientation: this._orientation,
            vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
        });

        var frustumGeometryInstance = new Cesium.GeometryInstance({
            geometry: frustumGeometry,
            attributes: {
                color: Cesium.ColorGeometryInstanceAttribute.fromColor(
                    this._color
                ),
            },
            id: "frustum",
        });

        this._frustumPrimitive = scene.primitives.add(
            new Cesium.Primitive({
                geometryInstances: frustumGeometryInstance,
                appearance: new Cesium.PerInstanceColorAppearance({
                    closed: this._closed,
                    flat: this._flat,
                }),
                asynchronous:false
            })
        );
    }

调用

//视锥绘制开始
var mCameraHeightThanBottom = modelm.boundingSphere.radius / 1.7;
let mCameraLoc = matrixUtil.localToWorldCartesian3(
  worldCoorOrigin,
  x - localconfig.x,
  y - localconfig.y,
  z + mCameraHeightThanBottom - localconfig.z
);
let m2 = Cesium.Transforms.eastNorthUpToFixedFrame(mLoc);
var rotation222 = Cesium.Matrix4.getMatrix3(m2, new Cesium.Matrix3());
Cesium.Matrix3.multiply(
  rotation222,
  Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(angle + 90)),
  rotation222
);
Cesium.Matrix3.multiply(
  rotation222,
  Cesium.Matrix3.fromRotationX(Cesium.Math.PI_OVER_TWO * 0.91),
  rotation222
);
var orientation222 = Cesium.Quaternion.fromRotationMatrix(rotation222);
this.drawViewFrustum(mCameraLoc, orientation222);//画
//视锥绘制结束
this.angleHistory = angle; //保存当前角度
modelm.modelMatrix = m;//新模型矩阵，更新模型位置和角度

三、补充说明

视锥的形态和初始姿态（heading>0,pitch>0,roll>0）
在这里插入图片描述
视锥构造参数：
在这里插入图片描述
frustum:视锥本体，

origin:轴心，就是顶点的位置，

orientation:决定相机看的方向,

vertexFormat:该参数和视锥绘制没有关系，保持默认即可。

frustum参数

在这里插入图片描述
near和far参数：
在这里插入图片描述
fov:查看的视场角，绕z轴旋转，以弧度方式输入。

aspectRatio:垂直边和水平边的比值。
在这里插入图片描述

Cesium 视锥体绘制，并动态更新朝向
苹果园dog
01-26 5103
方法封装： /** * 绘制视锥 * 苹果园dog */ export default class { constructor(viewer, options) { this.viewer = viewer; this._position = options.position; this._orientation = options.orientation; this._fov = options.fov ...
Cesium 实战 23 - 视锥体（Frustum）实现
linzi19900517的博客
12-22 2708
Cesium 实战 - 视锥体（Frustum）实现。
cesium视频投影功能，视频投放，m3u8视频流接入投放
04-20
cesium视频投影功能，视频投放，m3u8视频流接入投放，集成vue项目，定义三角视锥等
Vue.js2+Cesium1.103.0 十四、绘制视锥，并可实时调整视锥姿态
qq_37236395的博客
11-18 1201
【代码】Vue.js2+Cesium1.103.0 十四、绘制视锥，并可实时调整视锥姿态。
Cesium快速入门-实体篇（1）
最新发布
qq_55541095的博客
03-27 1236
前文我们已经学习完如何添加地形和各种在线地球。现在让我们进入实体，一起看看在cesium中如何创建你想用的实体。
视锥裁剪
Gypsyy的专栏
06-27 5738
背景 视锥体（frustum），是指场景中摄像机的可见的一个锥体范围。它有上、下、左、右、近、远，共6个面组成。在视锥体内的景物可见，反之则不可见。为提高性能，只对其中与视锥体有交集的对象进行绘制。 我们计算出视锥体六个面的空间平面方程，将点坐标分别代入六个面的平面方程做比较，则可以判断点是否在视锥体内。 空间平面方程可表示为： Ax+By+Cz=0 对于点
Cesium|xt3d 卫星视椎体（四棱锥体）
xt3d的博客
03-08 1698
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"
cesium视椎体的移动旋转
Scd666666的博客
02-27 1850
cesium视椎体的移动
cesium视椎体使用
Scd666666的博客
02-27 4853
cesium的创建
基于 React hooks + Typescript + Cesium 绘制四棱锥（视椎体）
jiegiser博客
12-30 1319
文章目录效果截图功能介绍实现思路实现步骤安装 react-dat-gui 库创建四棱锥根据参数面板更新视椎体参数整体代码 效果截图 先上截图： 功能介绍 本例子基于 React hooks + Typescript + Cesium 绘制四棱锥（视椎体）；通过 dat.GUI 控制视椎体的参数并获取视椎体相关参数。 图层管理（√） dom 点扩散（√） 轨迹回放（√） 测量（√） 坐标拾取（√） 加载模型数据，拾取三维模型（√） geoserver 结合实现属性查询（√） geoserver 结合实现
Cesium中级开发教程之二十二：视锥体
Cesium开发工程师
12-08 376
教程示例网站：https://thomaz529.github.io。
106.（cesium篇）cesium椎体旋转
地图之家
05-11 701
106.（cesium篇）cesium椎体旋转
cesium 视棱锥
God's asylum的博客
08-25 599
运用cesium Primitive方法来实现，用orientation来存储视棱锥转角，FrustumGeometry来时面的加载，FrustumOutlineGeometry来实现线的加载
cesium 实现旋转椎体
06-08
// 创建椎体 var coneEntity = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), cylinder: { length: 200000.0, topRadius: 0.0, bottomRadius: 200000.0, material: ...
Cesium中椎体上下跳动和旋转的GIS应用
OvzStream的博客
09-23 125
需要注意的是，以上代码仅为示例，具体的应用场景和需求可能需要根据实际情况进行调整和修改。此外，为了完整地运行以上代码，还需要在HTML文档中添加一个具有’id’属性为’cesiumContainer’的容器元素，以容纳Cesium场景的显示。椎体的初始位置设置为地球上的某个坐标点，然后通过动画效果使其在垂直方向上跳动，从初始位置移动到一定高度。本文将介绍如何在Cesium中实现椎体上下跳动和旋转的GIS应用，并提供相应的源代码。最后，将动画效果应用于椎体的模型矩阵，实现椎体的上下跳动效果。
cesium创建视锥体朝向不对的问题
qq_40802396的博客
05-11 745
视锥体朝向问题
开源！Cesium视频投射，手把手教你如何让实时视频流“长”在三维地球里！
02-17 939
曾经有很多朋友问我：如何在Cesium中做视频投射，能不能讲一讲实现思路？今天它来啦！源码文末自取！可能有的小伙伴还不了解：视频投射是什么东东？我们先来了解一下，这个东东它的应用场景都有啥？源码地址不浪的【Cesium案例集合源码如果开源对您有帮助，也欢迎帮我们点一个免费的star，以鼓励和支持我们开源更多案例！不会Cesium的基础，也很难做出更高级的效果，所以可以了解下不浪的教程《Cesium从入门到实战》
Cesium--让椎体模型旋转
weixin_44547616的博客
09-29 3710
椎体模型如下图 思路：不断改变椎体的偏航角（Y轴），从而实现选择 代码： //获取锥体的坐标 var position = Cesium.Cartesian3.fromDegrees(108.95813233063066,34.22065543077288,30); var heading = 0;//偏航角（Y轴） var pitch = 0; //俯仰角（X轴） var roll = 0;//翻滚角（Z轴） //封装改变偏航角的方法 function diaoyong() { heading =
107.（cesium篇）cesium椎体上下跳动
地图之家
05-15 650
107.（cesium篇）cesium椎体上下跳动
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值