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);
相关推荐
Mapmost11 小时前
全新升级!3DTiles加载速度Mapmost完胜Cesium
性能优化·webgl·cesium
不浪brown11 小时前
告别静态水面的平庸!Cesium中实现水面倒影+动态流向的逼真水特效
cesium
汪洪墩1 天前
使用Mars3d加载热力图的时候,出现阴影碎片
开发语言·前端·javascript·vue.js·cesium
springfe01012 天前
Cesium 3D地图 图元 圆柱 图片实现
前端·cesium
不浪brown5 天前
浏览器3D渲染卡成PPT?6个性能优化指标,你都知道吗?
three.js·cesium
GIS之家11 天前
vue+cesium示例:3D热力图(附源码下载)
前端·vue.js·3d·cesium·webgis·3d热力图
不浪brown11 天前
开源!矢量建筑白模泛光特效以及全国77个大中城市的矢量shp数据获取!
前端·cesium
在下胡三汉13 天前
怎么解决cesium加载模型太黑,程序崩溃,不显示,位置不对模型太大,Cesium加载gltf/glb模型后变暗
3dmax·cesium
GIS之家17 天前
vue+cesium示例:地形开挖(附源码下载)
前端·javascript·vue.js·gis·cesium·webgis
duansamve17 天前
Cesium快速入门到精通系列教程二:添加地形与添加自定义地形、相机控制
cesium