首页 > 其他分享 >Cesium 几何编辑

Cesium 几何编辑

时间:2023-01-12 22:35:35浏览次数:51  
标签:Cartesian3 编辑 let 几何 Cesium new Matrix4 坐标系

最近做了个Cesium几何编辑的功能,通过鼠标画点线面等,记录一下问题

感兴趣的朋友可以移步:LiZzhi/cesium-plugin (github.com)

功能本身不难,无非就是封装鼠标事件,记录好数据,随时可以撤销,清除。

在做画矩形时,一些坐标转换的操作折腾了我挺久(属实有点丢人了,学测绘的让坐标转换绕蒙圈属实有点丢人了。。。)。

封装一个方法,通过三个点确定一个矩形,大概的需求就是前两个点固定了一条边以后,第三个点要投影到固定边的法线上,并算出第四个点。

开始通过向量和三角函数计算,但是结果总有点小问题,后来索性直接翻CesiumAPI,发现利用Transforms基本就可以解决所有问题。

先说思路:

如下图,一次绘制 A、B、C 三点,C 点投影至 向量 AB 的法线上,确定 C1,再计算 D1

( 此处坐标轴只是为了易懂,并非真正的坐标系 )

思路有了,就该上代码了,首先要借助 Cesium 中的 Transforms API,将世界坐标系转为以 A 为原点,AB 为X轴的局部坐标系

headingPitchRollToFixedFrame 允许我们通过设置原点,姿态角等参数构建旋转矩阵

 首先我们先构建姿态角

function getHeadingPitch(pointA: Cartesian3, pointB: Cartesian3): number[]{
    // 建立以点A为原点,X轴为east,Y轴为north,Z轴朝上的坐标系
    let transform = Cesium.Transforms.eastNorthUpToFixedFrame(pointA);
    // 向量AB
    let positionvector = Cesium.Cartesian3.subtract(pointB, pointA, new Cesium.Cartesian3());
    // 因transform是将A为原点的eastNorthUp坐标系中的点转换到世界坐标系的矩阵
    // AB为世界坐标中的向量
    // 因此将AB向量转换为A原点坐标系中的向量,需乘以transform的逆矩阵。
    let vector = Cesium.Matrix4.multiplyByPointAsVector(Cesium.Matrix4.inverse(transform, new Cesium.Matrix4()), positionvector, new Cesium.Cartesian3());
    // 归一化
    let direction = Cesium.Cartesian3.normalize(vector, new Cesium.Cartesian3());
    // heading
    let heading = Math.atan2(direction.y, direction.x) - Cesium.Math.PI_OVER_TWO;
    heading = Cesium.Math.TWO_PI - Cesium.Math.zeroToTwoPi(heading)
    // pitch
    let pitch = Cesium.Math.PI_OVER_TWO - Cesium.Math.acosClamped(direction.z)
    return [heading, pitch]
}

然后构建旋转矩阵

let [heading, pitch] = getHeadingPitch(pointA, pointB)

let hpr = new Cesium.HeadingPitchRoll(heading, pitch, 0)
let localToWorldMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(
    pointA, hpr, e
)

// 世界坐标系到局部坐标系的变换矩阵
let worldToLocalMatrix = Cesium.Matrix4.inverse(
    localToWorldMatrix,
    new Cesium.Matrix4()
);

然后计算局部坐标系中,C1 和 D 的坐标,并转为世界坐标系

// pointB,pointC 转局部坐标
let localPosB = Cesium.Matrix4.multiplyByPoint(
    worldToLocalMatrix,
    pointB,
    new Cesium.Cartesian3()
);    

let localPosC = Cesium.Matrix4.multiplyByPoint(
    worldToLocalMatrix,
    pointC,
    new Cesium.Cartesian3()
);
let localPosC1 = new Cesium.Cartesian3(localPosC.x , localPosB.y)
let localPosD = new Cesium.Cartesian3(localPosC.x, 0)

// C1,D 世界坐标
let worldPointC1 = Cesium.Matrix4.multiplyByPoint(
    localToWorldMatrix, 
    localPosC1, 
    new Cesium.Cartesian3()
);
let worldPointD = Cesium.Matrix4.multiplyByPoint(
    localToWorldMatrix, 
    localPosD, 
    new Cesium.Cartesian3()
);

上述代码其实并不复杂,很好理解,完整版请移步LiZzhi/cesium-plugin (github.com),如果对您有帮助,请给我一颗star,谢谢。

标签:Cartesian3,编辑,let,几何,Cesium,new,Matrix4,坐标系
From: https://www.cnblogs.com/xt112233/p/17048118.html

相关文章

  • 【转】PageOffice 在线编辑 office文件,回调父页面
    一、子页面调用父页面的方法varvalue=window.external.CallParentFunc("ParentFunName(Arguments);");//父页面的JS函数有返回值window.external.CallParentFunc("Paren......
  • 【转】PageOffice——动态填充Word模板并在线编辑
    说明:使用pageoffice动态给word模板填充数据,插入图片、excel、word格式的文件和创建表格。一、准备工作:本地创建一个doc或者docx格式的文件,在文件中需要插入数据的地方设......
  • macOS 设置vim编辑器语法高亮、显示行号
    1、切换到~/目录下cd~/2、新建.vimrc文件vi.vimrc3、编辑.vimrc文件内容syntaxonsetnusetautoindentsetcindent效果如下:......
  • SiteFactory编辑器支持Word文档粘贴
    ​ 这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下)<%@ page language="java"......
  • SiteFactory编辑器支持Word文档上传
    ​ 当前功能基于PHP,其它语言流程大致相同 1.新增上传wordjson配置在ueditor\php\config.json中新增如下配置:     /* 上传word配置 */    "wordAction......
  • Cesium模型贴地问题(八)
    2023-01-121.sampleTerrainMostDetailed   根据提供的terrainPrivider和点的弧度坐标计算出当前点的高度信息。 varp=newCesium.Cartographic.fromC......
  • exel中做折线图,编辑图例
      1、选择做折线图的内容, 2、插入折线图  选择一个图例,右键选择数据源 选择修改项,点击编辑  ......
  • SiteFactory编辑器支持Word文档导入
    ​ 1.编辑器修改(可选)1.1在 ueditor/config.json 中添加代码块    /* 上传word配置 */    "wordActionName":"wordupload",/* 执行上传视频的action......
  • SiteFactory编辑器支持Word文档一键上传
    ​ 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.j......
  • 【计算几何】浅谈凸包Andrew算法
    前置知识基础计算几何定义。引文这样一个问题,有许多个杆子,需要用绳子围住所有的杆子,然鹅没有很多的绳子,求最短需要多少绳子。整个图大概是这样的,正文我们要如何解......