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);
相关推荐
郝学胜-神的一滴11 天前
[简化版 GAMES 101] 计算机图形学 04:二维变换上
c++·算法·unity·godot·图形渲染·unreal engine·cesium
duansamve14 天前
Cesium快速入门到精通系列教程二十五:以较长经纬度跨度为基准,将多边形充满屏幕,返回此时的中心点坐标及相机高度
cesium
阿琳a_20 天前
在github上部署个人的vitepress文档网站
前端·vue.js·github·网站搭建·cesium
云上飞4763696221 天前
glb模型在Cesium中发黑的机理分析
cesium·glb模型发黑
ct97823 天前
Cesium的Primitive API
gis·webgl·cesium
Irene199124 天前
OpenLayers 和 Cesium 都是流行的开源 JavaScript 库,用于在网页上构建地图和地理空间应用
openlayers·cesium
fxshy24 天前
前端直连模型 vs 完整 MCP:大模型驱动地图的原理与实践(技术栈Vue + Cesium + Node.js + WebSocket + MCP)
前端·vue.js·node.js·cesium·mcp
棋鬼王24 天前
Cesium(十) 动态修改白模颜色、白模渐变色、白模光圈特效、白模动态扫描光效、白模着色器
前端·javascript·vue.js·智慧城市·数字孪生·cesium
duansamve25 天前
Cesium快速入门到精通系列教程二十四:限制相机在特定的Level之间展示地图
cesium
duansamve1 个月前
Vue3的Vite项目中直接引入的方式使用Cesium
cesium