[cesium] entity 和primitive 绘制对象

阳光穿透心脏的1/2处 2021-12-10 11:31 634阅读 0赞

###  Entity 和primitive 对比 ###

1.  entity偏向数据,primitive偏向图形.primitive更底层
2.  entity用法简单，primitive用法复杂。我们会有这样的疑问：entity已经封装的如此完美，调用如此便捷，为何还要primitive接口呢？区别就是加载效率。primitive更接近webgl底层，没有entity各种各样的附加属性，因此在加载时效率会更高。为了直观感受两者区别，我们分别用entity和primitive方式绘制3150个圆。

一entity方式
    for (var lon = -180.0; lon < 180.0; lon += 4.0) {
                for (var lat = -70.0; lat < 70.0; lat += 4.0) {
                    viewer.entities.add({
                        position: Cesium.Cartesian3.fromDegrees(lon, lat),
                        ellipse: {
                            semiMinorAxis: 10000.0,
                            semiMajorAxis: 10000.0,
                            //height: 200000.0,
                            material: Cesium.Color.GREEN
                        }
                    });
                }
            }
     //primitive方式
            var instances = [];
            for (var lon = -180.0; lon < 180.0; lon += 4.0) {
                for (var lat = -70.0; lat < 70.0; lat += 4.0) {
                    var ellipse = new Cesium.EllipseGeometry({
                        center: Cesium.Cartesian3.fromDegrees(lon, lat),
                        semiMajorAxis: 10000.0,
                        semiMinorAxis: 10000.0,
                        vertexFormat: Cesium.VertexFormat.POSITION_ONLY
                    });
                    var geometry = Cesium.EllipseGeometry.createGeometry(ellipse);
                    var ellipseInstance = new Cesium.GeometryInstance({
                        geometry: geometry,
                        attributes: {
                            color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
                        }
                    });
    
                    instances.push(ellipseInstance);
                }
            }
            viewer.scene.primitives.add(new Cesium.Primitive({
                geometryInstances: instances,
                appearance: new Cesium.PerInstanceColorAppearance()
    
            }));

查看浏览器内存消耗情况：

[![Cesium学习笔记18--绘制对象-效率比较][Cesium_18--_-]][Cesium_18--_-_Cesium_18--_-]

### Entity ###

1材质
    空间对象可视化，不仅需要知道对象的空间位置，还需要知道对象的显示样式。显示样式就是通过材质来控制，比如说颜色、透明度、纹理贴图、更高级的光照等等。我们常用到就是颜色和透明度。
    以下代码为绘制一个半透明的红色椭圆，设置material为Cesium.Color.RED.withAlpha(0.5)透明度为0.5的红色：
        viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(103.0, 40.0),
            name: 'Red ellipse on surface with outline',
            ellipse: {
                semiMinorAxis: 250000.0,
                semiMajorAxis: 400000.0,
                material: Cesium.Color.RED.withAlpha(0.5),
            }
        });
    2填充和边框
    填充和边框共同组成了面状对象的样式，通过制定属性fill（默认为true）和outline（默认为false）来确定是否显示填充和边框，material对应填充样式，outlineColor和outlineWidth对应边框的颜色和宽度。如一下内容绘制一个填充半透明红色边框为蓝色的椭圆：
     viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(103.0, 40.0),
            name: 'Red ellipse on surface with outline',
            ellipse: {
                semiMinorAxis: 300000.0,
                semiMajorAxis: 300000.0,
                height: 200000.0,
                fill:true,
                material: Cesium.Color.RED.withAlpha(0.5),
                outline: true, //必须设置height，否则ouline无法显示
                outlineColor: Cesium.Color.BLUE.withAlpha(0.5),
                outlineWidth:10.0//不能设置，固定为1
            }
        });
    效果：
    Cesium学习笔记14--绘制对象-Entity管理
    
    3贴图
    通过设置material为图片url，可以将图片填充到对象中：
     viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(103.0, 40.0),
                name: 'Red ellipse on surface with outline',
                ellipse: {
                    semiMinorAxis: 250000.0,
                    semiMajorAxis: 400000.0,
                    height: 200000.0,
                    fill:true,
                    material: "./sampledata/images/globe.jpg",
                    outline: true, //必须设置height，否则ouline无法显示
                    outlineColor: Cesium.Color.BLUE.withAlpha(0.5),
                    outlineWidth: 10.0//windows系统下不能设置固定为1
                }
            });
    4垂直拉伸
    有时候我们需要将面在垂直方向进行拉伸形成体，通过extrudedHeight即可实现这种效果，形成的体积任然符合它拉伸面的地球曲率。
    viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(103.0, 40.0),
                name: 'Red ellipse on surface with outline',
                ellipse: {
                    semiMinorAxis: 250000.0,
                    semiMajorAxis: 400000.0,
                    height: 200000.0,
                    extrudedHeight: 400000.0,
                    fill:true,
                    material: Cesium.Color.RED.withAlpha(0.5),
                    outline: true, //必须设置height，否则ouline无法显示
                    outlineColor: Cesium.Color.BLUE.withAlpha(0.5),
                    outlineWidth:10.0//windows系统下不能设置固定为1
                }
            });
    5场景中entity管理
    viewer.entities属性实际上是一个EntityCollecton对象，是entity的一个集合，提供了add、remove、removeAll等等接口来管理场景中的entity。
    查看帮助文档，提供一下接口：
    Cesium.EntityCollection.collectionChangedEventCallback(collection, added, removed, changed)
    add(entity) → Entity
    computeAvailability() → TimeInterval
    contains(entity) → Boolean
    getById(id) → Entity
    getOrCreateEntity(id) → Entity
    remove(entity) → Boolean
    removeAll()
    removeById(id) → Boolean
    resumeEvents()
    suspendEvents()
    6选择
    在多数应用场景中，我们不仅需要绘制出空间对象还需要用鼠标拾取对象，cesium为我们提供了scene.pick接口，如下代码实现坐标左键单击实现对象的拾取：
     viewer.entities.add({
                id:'obj_id_110',
                position: Cesium.Cartesian3.fromDegrees(103.0, 40.0),
                name: 'Red ellipse on surface with outline',
                ellipse: {
                    semiMinorAxis: 250000.0,
                    semiMajorAxis: 400000.0,
                    height: 200000.0,
                    extrudedHeight: 400000.0,
                    fill: true,
                    material: Cesium.Color.RED.withAlpha(0.5),
                    outline: true, //必须设置height，否则ouline无法显示
                    outlineColor: Cesium.Color.BLUE.withAlpha(0.5),
                    outlineWidth: 10.0//windows系统下不能设置固定为1
                }
            });
    
            var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
            handler.setInputAction(function (movement) {
                var pick = viewer.scene.pick(movement.position);
                if (Cesium.defined(pick) && (pick.id.id === 'obj_id_110')) {
                    ;
                }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    
    以上代码，在添加的entity中加入id唯一标识，然后利用ScreenSpaceEventHandler接口监听鼠标事件，在左键单击事件中，通过viewer.scene.pick获取点击出的对象，如果对象不为空且id匹配则说明选中。

### Primitive ###

1合并几何图形（Combing Geometries）
    cesium给出primitive最大用意应该是提高渲染效率问题，当我们使用一个图元绘制多个静态对象时，这种优势就显现出来了。下面代码时绘制两个对象：
    var instance = new Cesium.GeometryInstance({
                geometry: new Cesium.RectangleGeometry({
                    rectangle: Cesium.Rectangle.fromDegrees(105.20, 30.55, 106.20, 31.55),
                    vertexFormat:Cesium.EllipsoidSurfaceAppearance.VERTEXT_FORMAT
                })
            });
            var instance1 = new Cesium.GeometryInstance({
                geometry: new Cesium.RectangleGeometry({
                    rectangle: Cesium.Rectangle.fromDegrees(107.20, 30.55, 108.20, 31.55),
                    vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEXT_FORMAT
                })
            });
            viewer.scene.primitives.add(new Cesium.Primitive({
                geometryInstances: [instance, instance1],
                appearance: new Cesium.EllipsoidSurfaceAppearance({
                    material:Cesium.Material.fromType('Stripe')
                })
            }));
    我们可以使用PerInstanceColorAppearance为每个实例赋不同颜色：
    var instance = new Cesium.GeometryInstance({
                geometry: new Cesium.RectangleGeometry({
                    rectangle: Cesium.Rectangle.fromDegrees(105.20, 30.55, 106.20, 31.55),
                    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEXT_FORMAT
                }),
                attributes: {
                    color:new Cesium.ColorGeometryInstanceAttribute(0.0,0.0,1.0,0.8)
                }
            });
            var instance1 = new Cesium.GeometryInstance({
                geometry: new Cesium.RectangleGeometry({
                    rectangle: Cesium.Rectangle.fromDegrees(107.20, 30.55, 108.20, 31.55),
                    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEXT_FORMAT
                }),
                attributes: {
                    color: new Cesium.ColorGeometryInstanceAttribute(1.0, 0.0, 0.0, 0.8)
                }
            });
            viewer.scene.primitives.add(new Cesium.Primitive({
                geometryInstances: [instance, instance1],
                appearance: new Cesium.PerInstanceColorAppearance()
            }));
    合并多个GeometryInstances 为一个Primitive可以极大的提高性能，下面的例子创建了2592一颜色各异的矩形，覆盖整个地球 ：
    var instances = [];
            for (var lon = -180.0; lon < 180.0; lon += 5.0) {
                for (var lat = -90.0; lat < 90.0; lat += 5.0) {
                    instances.push(new Cesium.GeometryInstance({
                    geometry: new Cesium.RectangleGeometry({
                    rectangle: Cesium.Rectangle.fromDegrees(lon, lat, lon + 5.0, lat +5.0)
                        }),
                        attributes: {
                            color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({
                                alpha: 0.5
                            }))
                        }
                    }));
                }
            }
            viewer.scene.primitives.add(new Cesium.Primitive({
                geometryInstances: instances, //合并
                //某些外观允许每个几何图形实例分别指定某个属性，例如：
                appearance: new Cesium.PerInstanceColorAppearance()
            }));
    2选取几何图形（Picking）
    即使多个 GeometryInstance被合并为单个Primitive，让然可以独立的被访问。我们可以为每一个GeometryInstance指定一个id，并且可以通过Scene.pick来判断该实例是否被选取：
     var instance = new Cesium.GeometryInstance({
                geometry: new Cesium.RectangleGeometry({
                    rectangle: Cesium.Rectangle.fromDegrees(107.20, 30.55, 108.20, 31.55)
                }),
                id: 'rectangle-1',
                attributes: {
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
                }
            });
            viewer.scene.primitives.add(new Cesium.Primitive({
                geometryInstances: instance,
                appearance: new Cesium.PerInstanceColorAppearance()
            }));
            var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
            //设置单击事件的处理句柄
            handler.setInputAction(function (movement) {
                var pick = viewer.scene.pick(movement.position);
                if (Cesium.defined(pick) && (pick.id === 'rectangle-1')) {
                    ;
                }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    3几何图形实例（Geometry Instances）
    上面的例子中，我们已经用到了GeometryInstances，注意GeometryInstance与Geometry的关系：前者是后者的容器，多个Instance可以共用一个Geometry，并且可以通过GeometryInstances.modelMatrix属性提供不同position、scale、rotate等位置、缩放、旋转信息。例如，下面的例子使用同一个Geometry绘制了两个Instance，一个位于另一个的上方：
    var ellipsoidGeometry = new Cesium.EllipsoidGeometry({
                vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
                radii: new Cesium.Cartesian3(300000.0, 200000.0, 150000.0)//三轴半径
            });
            //下方的实例
            var cyanEllipsoidInstance = new Cesium.GeometryInstance({
                geometry: ellipsoidGeometry,
                modelMatrix: Cesium.Matrix4.multiplyByTranslation(
                   Cesium.Transforms.eastNorthUpToFixedFrame(
                    Cesium.Cartesian3.fromDegrees(107.20, 30.55)),
                    new Cesium.Cartesian3(0.0, 0.0, 150000.0),
                    new Cesium.Matrix4()
                ),
                attributes: {
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
                }
            });
            //上方的实例
            var orangeEllipsoidInstance = new Cesium.GeometryInstance({
                geometry: ellipsoidGeometry,
                modelMatrix: Cesium.Matrix4.multiplyByTranslation(
                    Cesium.Transforms.eastNorthUpToFixedFrame(
                    Cesium.Cartesian3.fromDegrees(107.20, 30.55)),
                    new Cesium.Cartesian3(0.0, 0.0, 450000.0),
                    new Cesium.Matrix4()
                ),
                attributes: {
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE)
                }
            });
            viewer.scene.primitives.add(new Cesium.Primitive({
                geometryInstances: [
                    cyanEllipsoidInstance, orangeEllipsoidInstance
                ],
                appearance: new Cesium.PerInstanceColorAppearance({
                    translucent: false,
                    closed: true
                })
            }));
    4更新单个GeometryInstance的属性
      var circleInstance = new Cesium.GeometryInstance({
                geometry: new Cesium.CircleGeometry({
                    center: Cesium.Cartesian3.fromDegrees(107.20, 30.55),
                    radius: 250000.0,
                    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
                }),
                attributes: {
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(
                    new Cesium.Color(1.0, 0.0, 0.0, 0.5)),
                    show: new Cesium.ShowGeometryInstanceAttribute(true) //显示或者隐藏
                },
                id: 'circle'
            });
            var primitive = new Cesium.Primitive({
                geometryInstances: circleInstance,
                appearance: new Cesium.PerInstanceColorAppearance({
                    translucent: false,
                    closed: true
                })
            });
            viewer.scene.primitives.add(primitive);
            //定期修改颜色
            setInterval(function () {
                //获取某个实例的属性集
                var attributes = primitive.getGeometryInstanceAttributes('circle');
                attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(
                Cesium.Color.fromRandom({
                    alpha: 1.0
                }));
    5场景中primitive管理
    场景通过viewer.scene.primitives属性来管理添加的primitive对象，primitives是PrimitiveCollection类型，查看帮助文档：
    Cesium学习笔记16--绘制对象-Primitive管理
    提供一下接口来管理场景中primitive对象：
    add(primitive) → Object
    contains(primitive) → Boolean
    destroy() → undefined
    get(index) → Object
    isDestroyed() → Boolean
    lower(primitive)
    lowerToBottom(primitive)
    raise(primitive)
    raiseToTop(primitive)
    remove(primitive) → Boolean
    removeAll()

### 演示  ###

这里对entity几个图形做了一下简单封装供使用

/**
     * entity 添加实体
     * 
     * @type 类型
     * @param entity参数
     * 调用方法
     * var entity = new _cesiumTool({viewer:this.viewer}).createEntity({handleType:"cylinder",p:{length: Math.max.apply(null,height),slices:4}});
     */
    _cesiumTool.prototype.createEntity =  function(param){
        try {
         var t = this,viewer = t.viewer,p = param.p,entity = null;
         if(param === null) return;
         
         switch(param.handleType){
             case "cylinder":{ 
                 var cylinderEntity = viewer.entities.add({
                     cylinder: {
                         HeightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //表示相对于地形的位置。
                         length: p.length == null?600000:p.length,     //长度
                         topRadius: p.topRadius == null?0:p.topRadius,    //顶点半径
                         bottomRadius: p.bottomRadius == null?600000 / 4 :p.bottomRadius,  //底部半径
                         material: p.material == null?Cesium.Color.RED.withAlpha(.4) :p.material,  //填充材料
                         outline: p.outline == null? !0:p.outline,            //轮廓
                         numberOfVerticalLines: p.numberOfVerticalLines == null?0:p.numberOfVerticalLines, //垂直线数
                         slices:p.slices == null?128:p.slices,         //周边数
                         outlineColor: p.outlineColor == null?Cesium.Color.RED.withAlpha(.8):p.outlineColor  //颜色轮廓
                     }
                 });
                 entity = cylinderEntity;
                 break; 
             }
             case "box":{
                 var boxEntity = viewer.entities.add({
                     name: 'Blue box',
                     position: Cesium.Cartesian3.fromDegrees(homePOsition[0], homePOsition[1], 0),
                     box: {
                         dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
                         material: Cesium.Color.BLUE
                     }
                 });
                 entity = boxEntity;
                 break; 
             }
             case "circle":{
                 var circleEntity = viewer.entities.add({
                     position: Cesium.Cartesian3.fromDegrees(111.0, 40.0, 150000.0),
                     name: 'Green circle at height',
                     ellipse: {
                         semiMinorAxis: 300000.0,
                         semiMajorAxis: 300000.0,
                         height: 200000.0,
                         material: Cesium.Color.GREEN
                     }
                 });
                 entity = circleEntity;
                 break; 
             }
             case "ellipse":{
                 var ellipseEntity = viewer.entities.add({
                     position: Cesium.Cartesian3.fromDegrees(103.0, 40.0),
                     name: 'Red ellipse on surface with outline',
                     ellipse: {
                         semiMinorAxis: 250000.0,
                         semiMajorAxis: 400000.0,
                         material: Cesium.Color.RED.withAlpha(0.5),
                         outline: true,
                         outlineColor: Cesium.Color.RED
                     }
                 });
                 entity = ellipseEntity;
                 break; 
             }
             case "corridor":{
                 var corridorEntity = viewer.entities.add({
                     name: 'Red corridor on surface with rounded corners and outline',
                     corridor: {
                         positions: Cesium.Cartesian3.fromDegreesArray([
                         100.0, 40.0,
                         105.0, 40.0,
                         105.0, 35.0
                         ]),
                         width: 200000.0,
                         material: Cesium.Color.RED.withAlpha(0.5),
                         outline: true,
                         outlineColor: Cesium.Color.RED
                     }
                 });
                 entity = corridorEntity;
                 break; 
             }
             case "polygon":{
                 var polygonEntity = viewer.entities.add({
                     name: 'Red polygon on surface',
                     polygon: {
                         hierarchy: Cesium.Cartesian3.fromDegreesArray([115.0, 37.0,
                         115.0, 32.0,
                         107.0, 33.0,
                         102.0, 31.0,
                         102.0, 35.0]),
                         material: Cesium.Color.RED
                     }
                 });
                 entity = polygonEntity;
                 break; 
             }
             case "polyline":{
                 var polylineEntity = viewer.entities.add({
                     name: 'Red line on the surface',
                     polyline: {
                         positions: Cesium.Cartesian3.fromDegreesArray([75, 35,
                         125, 35]),
                         width: 5,
                         material: Cesium.Color.RED
                     }
                 });
                 entity = polylineEntity;
                 break; 
             }
             default :{}   
         }
        } catch (error) {
            console.log("error mannager:" + error)
        }
        
        return entity;
     }

[Cesium_18--_-]: https://imgconvert.csdnimg.cn/aHR0cDovL3M0LnNpbmFpbWcuY24vbXc2OTAvMDA2cFpuUHd6eTdsRElxMUR4MWYzJjY5MA?x-oss-process=image/format,png
[Cesium_18--_-_Cesium_18--_-]: /images/20211210/2d082bbfb19946d6ba042fea94abb570.png