cesium primitive 移动 缩放 旋转 矩阵

旋转参考:cesium 指定点旋转rectangle Primitive方式 矩阵篇-CSDN博客

平移参考:cesium 调整3dtiles的位置 世界坐标下 相对坐标下 平移矩阵-CSDN博客

一、primitive方式添加polygon
javascript 复制代码
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);

二、平移

以p1为原点,将p1移动到(113.392209, 38.095546),其他几个点相对p1移动

javascript 复制代码
let origin = Cesium.Cartesian3.fromDegrees(...p1);
            let offset = Cesium.Cartesian3.fromDegrees(
                113.392209, 38.095546
            );
            let translate = Cesium.Cartesian3.subtract(
                offset,
                origin,
                new Cesium.Cartesian3()
            );

            polygonPrimitive.modelMatrix = Cesium.Matrix4.fromTranslation(translate)

三、缩放

以p1为原点,在x轴方向缩放2倍大小

javascript 复制代码
let origin = Cesium.Cartesian3.fromDegrees(...p1);
            let localMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
            let inverseMatrix = Cesium.Matrix4.inverse(localMatrix, new Cesium.Matrix4);

            let scaleMatrix = Cesium.Matrix4.fromScale(new Cesium.Cartesian3(2, 1, 1));
            let modelMatrix = Cesium.Matrix4.multiply(scaleMatrix, inverseMatrix, new Cesium.Matrix4);

            polygonPrimitive.modelMatrix = Cesium.Matrix4.multiply(localMatrix, modelMatrix, new Cesium.Matrix4);
相关推荐
夜郎king2 天前
基于 Cesium + 天地图的三维地理可视化:以“岳麓山名人墓“为例,详解地形夸张、自动环绕与标签碰撞避让
cesium·实景三维·人文历史
前端小崔17 天前
Three.js 与 Cesium 融合实战问题汇总
前端·three.js·cesium
洛兮银儿17 天前
前端页面引入cesium
前端·cesium
GISBox20 天前
数字孪生项目必备:RVT模型转3DTiles格式的高效解决方案
gis·cesium·格式转换·服务发布·gisbox·rvt切片·3dtiles格式
ToTacview20 天前
Web 可视化卡顿的归因方法论:以“流畅一段、停顿一下“为例的代码级根治
cesium
夜郎king21 天前
基于天地图 Cesium 三维服务实现三维地球及地球自转实践
数据分析·cesium·3d地图·三维地球
luckystar513~23 天前
Navara是WebGIS的第三条路吗?
gis·cesium·mapbox·地图引擎·地理可视化
灵境(虚幻知音)1 个月前
WebGL 不支持>1px的线绘制,那 Cesium 的带宽度的线是怎么画出来的?
webgl·cesium·着色器
ToTacview1 个月前
WebGL 没有几何着色器,那 Cesium 的粗线是怎么画出来的?
cesium
用户61595868000221 个月前
Cesium 入门系列(四):区域高亮显示的两种实现方案
cesium