Bootstrap

Cesium14-Primitve绘制图形

一：基本概念

1：Primitve的概念

Primitve是一种比较复杂的、面向图形开发人员的类，其绘制图形的方式更接近底层。

其由两部分组成：

Geometry:用于定义图形的结构，如面、椭圆、线条等；

Appearance:用于定义图形渲染着色，简单点说就是定义图形的外观材质；

2：Primitve可绘制的图形

PolylineGeometry可以具有一定宽度的多段线
PolygonGeometry可以具有空洞或者拉伸高度的多边形
EllipseGeometry椭圆或者拉伸的椭圆
CircleGeometry圆或者拉伸的椭圆
CorridorGeometry走廊，沿地表且具有一定的宽度
RectangleGeometry矩形或者拉伸的矩形
WallGeometry具有一定高度的墙
BoxGeometry以原点为中心点的立方体
EllipsoidGeometry以原点为中心的椭球体
CylinderGeometry圆柱体或圆锥体
SphereGeometry以原点为中心点的球体

3：Primitve的外观

Cesium支持的几何外观
MaterialApperance任意几何外观，支持使用材质着色
EllipsoidSurfaceApperance椭球体表面的外观，不支持几何体
PerInstanceColorAppereance让几何形状使用自定义颜色着色
PolylineMaterialApperance多线段的几何外观，支持使用材质着色
PolylineColorApperance使用每个片段或顶点的颜色来着色多线段

二：实际操作

1：线

（1）、通过new Cesium.GeometryInstance创建几何对象；

（2）、通过new Cesium.PolylineMaterialAppearance创建一个外观对象；

（3）、通过new Cesium.Primitive创建一个图元对象

（关键代码）

 let polyline = new Cesium.GeometryInstance({
            geometry: new Cesium.PolylineGeometry({
                positions: Cesium.Cartesian3.fromDegreesArray([
                    108.0, 31.0, 100.0, 36.0, 105.0, 39.0
                ]),
                width: 10.0
            })
        })

        let polylineApperance = new Cesium.PolylineMaterialAppearance({
            material: Cesium.Material.fromType('Color', {
                color: new Cesium.Color(1.0, 1.0, 0.0, 1.0)
            })
        })

        let addPolylineGeometry = new Cesium.Primitive({
            geometryInstances: polyline,
            appearance: polylineApperance
        })

        viewer.scene.primitives.add(addPolylineGeometry)

（代码效果）

2：面 

（1）、通过new Cesium.GeometryInstance创建几何对象；

（2）、通过new Cesium.MaterialAppearance创建一个外观对象；

（3）、通过new Cesium.Primitive创建一个图元对象

（关键代码）


        /* 面 */
        let polygon = new Cesium.GeometryInstance({
            geometry: new Cesium.PolygonGeometry({
                polygonHierarchy: new Cesium.PolygonHierarchy(
                    Cesium.Cartesian3.fromDegreesArray([
                        108, 45, 109, 48, 104, 48, 103, 45
                    ])
                )
            })
        })

        let polygonApperance = new Cesium.MaterialAppearance({
            material: Cesium.Material.fromType('Dot', {
                color: new Cesium.Color(1.0, 1.0, 0.0, 1.0)
            })
        })

        let addPolygonGeometry = new Cesium.Primitive({
            geometryInstances: polygon,
            appearance: polygonApperance
        })

        viewer.scene.primitives.add(addPolygonGeometry)

（代码效果）

3：椭圆

（1）、通过new Cesium.GeometryInstance创建几何对象；

（2）、通过new Cesium.EllipsoidSurfaceAppearance创建一个外观对象；

（3）、通过new Cesium.Primitive创建一个图元对象

(关键代码)

     /* 椭圆 */
        let ellipse = new Cesium.GeometryInstance({
            geometry: new Cesium.EllipseGeometry({
                center: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
                semiMajorAxis: 500000.0,
                semiMinorAxis: 300000
            })
        })

        let ellipseApperance = new Cesium.EllipsoidSurfaceAppearance({
            material: Cesium.Material.fromType('Stripe', {
                color: new Cesium.Color(1.0, 1.0, 0.0, 1.0)
            })
        })

        let addEllipseGeometery = new Cesium.Primitive({
            geometryInstances: ellipse,
            appearance: ellipseApperance
        })

        viewer.scene.primitives.add(addEllipseGeometery)

（代码效果）

4：圆

（1）、通过new Cesium.GeometryInstance创建几何对象；

（2）、通过new Cesium.EllipsoidSurfaceAppearance创建一个外观对象；

（3）、通过new Cesium.Primitive创建一个图元对象

（关键代码）

    /* 圆 */
        let circle = new Cesium.GeometryInstance({
            geometry: new Cesium.CircleGeometry({
                center: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
                radius: 300000
            })
        })

        let circleApperance = new Cesium.EllipsoidSurfaceAppearance({
            material: Cesium.Material.fromType('Grid', {
                color: new Cesium.Color(1.0, 1.0, 0.0, 1.0)
            })
        })

        let addCircleGeometery = new Cesium.Primitive({
            geometryInstances: circle,
            appearance: circleApperance
        })

        viewer.scene.primitives.add(addCircleGeometery)

（代码效果）

5：走廊 

（1）、通过new Cesium.GeometryInstance创建几何对象；

（2）、通过new Cesium.PerInstanceColorAppearance创建一个外观对象；

（3）、通过new Cesium.Primitive创建一个图元对象

（关键代码）

     /* 走廊 */
        let corridor = new Cesium.GeometryInstance({
            geometry: new Cesium.CorridorGeometry({
                positions: Cesium.Cartesian3.fromDegreesArray([
                    108.0, 31.0, 100.0, 36.0, 105.0, 39.0
                ]),
                width: 10000
            }),
            attributes: {
                color: new Cesium.ColorGeometryInstanceAttribute(0.2, 0.5, 0.2, 0.7)
            }
        })

        let corridorApperance = new Cesium.PerInstanceColorAppearance({
            flat: true,
            translucent: true
        })

        let addCorridorGeometry = new Cesium.Primitive({
            geometryInstances: corridor,
            appearance: corridorApperance
        })

        viewer.scene.primitives.add(addCorridorGeometry)

（代码效果）

6：矩形 

（1）、通过new Cesium.GeometryInstance创建几何对象；

（2）、通过new Cesium.EllipsoidSurfaceAppearance创建一个外观对象；

（3）、通过new Cesium.Primitive创建一个图元对象

（关键代码）


        /* 矩形 */
        let rectangle = new Cesium.GeometryInstance({
            geometry: new Cesium.RectangleGeometry({
                rectangle: Cesium.Rectangle.fromDegrees(95.0, 39.0, 100.0, 42.0)
            }),

        })

        let rectangleAppearance = new Cesium.EllipsoidSurfaceAppearance({
            material: Cesium.Material.fromType('Water')
        })

        let addRectangleAppearance = new Cesium.Primitive({
            geometryInstances: rectangle,
            appearance: rectangleAppearance
        })

        viewer.scene.primitives.add(addRectangleAppearance)

（代码效果）

7：墙 

（1）、通过new Cesium.GeometryInstance创建几何对象；

（2）、通过new Cesium.MaterialAppearance创建一个外观对象；

（3）、通过new Cesium.Primitive创建一个图元对象

（关键代码）

        /* 墙 */
        let wall = new Cesium.GeometryInstance({
            geometry: new Cesium.WallGeometry({
                positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                    107.0, 43.0, 100000,
                    97.0, 43.0, 100000,
                    97.0, 40.0, 100000.0,
                    107.0, 40.0, 100000.0,
                    107.0, 43.0, 10000.0
                ])
            }),

        })

        let wallAppearance = new Cesium.MaterialAppearance({
            material: Cesium.Material.fromType('Color', {
                color: new Cesium.Color(1.0, 1.0, 0.0, 1.0)
            })
        })

        let addWallAppearance = new Cesium.Primitive({
            geometryInstances: wall,
            appearance: wallAppearance
        })

        viewer.scene.primitives.add(addWallAppearance)

（代码效果）

8：盒子 

（1）、通过Cesium.Cartesian3.fromDegrees定义盒子||本地参考系的中心点

（2）、通过Cesium.Transforms.eastNorthUpToFixedFrame获取中心点的正东、正北及地表法线方向

（3）、通过Cesium.Matrix4.multiplyByTranslation计算变换矩阵

（4）、通过Cesium.Matrix4.multiplyByUniformScale将几何图形从模型坐标表示形式转换为世界坐标表示形式

（5）、通过new Cesium.GeometryInstance创建几何对象；

（6）、通过new Cesium.PerInstanceColorAppearance创建一个外观对象；

（7）、通过new Cesium.Primitive创建一个图元对象

(关键代码)

 /* 盒子 */
        let boxCenter = Cesium.Cartesian3.fromDegrees(106.0, 45.0)
        let transformMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(boxCenter)

        let affineMatrix = Cesium.Matrix4.multiplyByTranslation(
            transformMatrix,
            new Cesium.Cartesian3(0, 0, 80000),
            new Cesium.Matrix4()
        )

        let boxModelMatrix = Cesium.Matrix4.multiplyByUniformScale(
            affineMatrix,
            1.0,
            new Cesium.Matrix4()
        )

        let box = new Cesium.GeometryInstance({
            modelMatrix: boxModelMatrix,
            geometry: Cesium.BoxGeometry.fromDimensions({
                dimensions: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0)
            }),
            attributes: {
                color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom())
            }
        })

        let boxAppearance = new Cesium.PerInstanceColorAppearance(

        )

        let addBoxGeometry = new Cesium.Primitive({
            geometryInstances: box,
            appearance: boxAppearance
        })

        viewer.scene.primitives.add(addBoxGeometry)

（代码效果）

9：椭球体

（1）、通过Cesium.Cartesian3.fromDegrees定义椭球||本地参考系的中心点

（2）、通过Cesium.Transforms.eastNorthUpToFixedFrame获取中心点的正东、正北及地表法线方向

（3）、通过Cesium.Matrix4.multiplyByTranslation计算变换矩阵

（4）、通过Cesium.Matrix4.multiplyByUniformScale将几何图形从模型坐标表示形式转换为世界坐标表示形式

（5）、通过new Cesium.GeometryInstance创建几何对象；

（6）、通过new Cesium.PerInstanceColorAppearance创建一个外观对象；

（7）、通过new Cesium.Primitive创建一个图元对象

（关键代码）

   /* 椭球体 */
        let ellipsoidCenter = Cesium.Cartesian3.fromDegrees(106.0, 45.0)
        let transformMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(ellipsoidCenter)

        let affineMatrix = Cesium.Matrix4.multiplyByTranslation(
            transformMatrix,
            new Cesium.Cartesian3(0, 0, 80000),
            new Cesium.Matrix4()
        )

        let ellipsoidModelMatrix = Cesium.Matrix4.multiplyByUniformScale(
            affineMatrix,
            200,
            new Cesium.Matrix4()
        )

        let ellipsoid = new Cesium.GeometryInstance({
            modelMatrix: ellipsoidModelMatrix,
            geometry: new Cesium.EllipsoidGeometry({
                vertextFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
                radii: new Cesium.Cartesian3(800, 800, 1600)
            }),
            attributes: {
                color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom())
            }
        })

        let ellipsoidAppearance = new Cesium.PerInstanceColorAppearance(
            {
                translucent: false
            }
        )

        let addEllipsoidGeometry = new Cesium.Primitive({
            geometryInstances: ellipsoid,
            appearance: ellipsoidAppearance
        })

        viewer.scene.primitives.add(addEllipsoidGeometry)

（代码效果）

10：圆柱体

（1）、通过Cesium.Cartesian3.fromDegrees定义圆柱体||本地参考系的中心点

（2）、通过Cesium.Transforms.eastNorthUpToFixedFrame获取中心点的正东、正北及地表法线方向

（3）、通过Cesium.Matrix4.multiplyByTranslation计算变换矩阵

（4）、通过Cesium.Matrix4.multiplyByUniformScale将几何图形从模型坐标表示形式转换为世界坐标表示形式

（5）、通过new Cesium.GeometryInstance创建几何对象；

（6）、通过new Cesium.PerInstanceColorAppearance创建一个外观对象；

（7）、通过new Cesium.Primitive创建一个图元对象

（关键代码）


        /* 圆柱体 */
        let ellipsoidCenter = Cesium.Cartesian3.fromDegrees(106.0, 45.0)
        let transformMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(ellipsoidCenter)

        let affineMatrix = Cesium.Matrix4.multiplyByTranslation(
            transformMatrix,
            new Cesium.Cartesian3(0, 0, 80000),
            new Cesium.Matrix4()
        )

        let cylinderModelMatrix = Cesium.Matrix4.multiplyByUniformScale(
            affineMatrix,
            10,
            new Cesium.Matrix4()
        )

        let cylinder = new Cesium.GeometryInstance({
            modelMatrix: cylinderModelMatrix,
            geometry: new Cesium.CylinderGeometry({
                length: 400000.0,
                topRadius: 200000,
                bottomRadius: 200000,
                vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
            }),
            attributes: {
                color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom())
            }
        })

        let cylinderAppearance = new Cesium.PerInstanceColorAppearance(
            {
                translucent: false
            }
        )

        let addCylinderAppearance = new Cesium.Primitive({
            geometryInstances: cylinder,
            appearance: cylinderAppearance
        })

        viewer.scene.primitives.add(addCylinderAppearance)

（代码效果）

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
量子叠加态系数_1.2 量子比特
UE4游戏加载流程总览 UE4游戏加载顺序
Java基础知识点
gamma: CE Brightness-Distorted Images by Improved Adaptive Gamma Correction(2017)(附python)
kubernetes实战篇之创建密钥自动拉取私服镜像
golang os/exec包用法之Kill进程及其子进程
目前游戏行业内部主要几款游戏引擎的技术对比
OpenGL高级-帧缓冲
《深度学习实战》第1集：深度学习基础回顾与框架选择
芯片岗实习面经(2020暑期实习)
;