cesium 指定点旋转rectangle Primitive方式 矩阵篇

cesium中rectangle是水平垂直于正北方向的,rectangle的属性中有rotation,但是rotation是以矩形的中心点进行旋转的,旋转过程中矩形的形状可能会变形,如果需要以矩形的顶点为原点进行旋转,可以采用primitive的方式添加polygon,并设置polygon的矩阵。

用entity的方式参考cesium 指定点旋转rectangle entity方式 坐标篇-CSDN博客

一、primitive的方式添加polygon

 let p1 = [113.389, 38.094669];
        let p2 = [113.390968, 38.095338];


// 通过矩形的2个点,得到多边形的四个点
            let polygonInstance = new Cesium.GeometryInstance({
                geometry: Cesium.PolygonGeometry.fromPositions({
                    positions: Cesium.Cartesian3.fromDegreesArray([
                        ...p1,
                        p2[0], p1[1],
                        ...p2,
                        p1[0], p2[1]
                    ]),
                    height: 0,
                    vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
                }),
                attributes: {
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString('#00ff00').withAlpha(0.5))
                }
            });
            let polygonPrimitive = new Cesium.Primitive({
                geometryInstances: [polygonInstance],
                undisplayable: true,
                appearance: new Cesium.PerInstanceColorAppearance({
                    flat: true,
                    translucent: false
                })
            });

            viewer.scene.primitives.add(polygonPrimitive);

二、设置polygon的矩阵,以p1为原点顺时针旋转30度

let center = Cesium.Cartesian3.fromDegrees(...p1);
            let localToWorld_Matrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
            let worldToLocal_Matrix = Cesium.Matrix4.inverse(localToWorld_Matrix, new Cesium.Matrix4);

            let rotationZ = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(r));
            let rotationMatrix = Cesium.Matrix4.fromRotation(rotationZ);

            let localRotationMatrix = Cesium.Matrix4.multiply(rotationMatrix, worldToLocal_Matrix, new Cesium.Matrix4);
            let worldMatrix = Cesium.Matrix4.multiply(localToWorld_Matrix, localRotationMatrix, new Cesium.Matrix4);

            polygonPrimitive.modelMatrix = worldMatrix;

代码解析:Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(-30));

  1. cesium中z轴是向上的,所以面对着屏幕以p1为原点旋转需要调用用fromRotationZcesium mapboxgl+threebox glb 朝向问题 坐标轴方向_threebox z轴向上-CSDN博客
  2. fromRotationZ()指向正方向为逆时针方向,所以以p1为原点顺时针旋转30度的时候传入角度是-30

相关推荐
htsitr11 小时前
Cesium的ClearCommand的流程
cesium·clearcommand
duansamve2 天前
WebGIS地图框架有哪些?
javascript·gis·openlayers·cesium·mapbox·leaflet·webgis
汪洪墩3 天前
【Mars3d】实现这个地图能靠左,不居中的样式效果
前端·javascript·vue.js·3d·webgl·cesium
vener_6 天前
Cesium用zoomTo函数实现对目标(各种实体)的视角控制
前端·javascript·cesium
智方科技10 天前
3DTiles之使用customShader调整风格
3d·智慧城市·cesium
山海鲸可视化10 天前
GIS融合之路(八)-如何用Cesium直接加载OSGB文件(不用转换成3dtiles)
3d·gis·数字孪生·cesium·倾斜摄影·osgb
智方科技10 天前
如何编译 Cesium 源码
3d·智慧城市·cesium·tilesbuilder
柳晓黑胡椒11 天前
cesiusm实现 多图例展示+点聚合(base64图标)
css3·canvas·base64·cesium·animation
智方科技小智11 天前
3DTiles之使用customShader调整风格
cesium
智方科技小智11 天前
3D Tiles 之 Geometry Error 介绍
cesium