Cesium15-GroundPrimitive绘制贴地图形

一：基本概念

GroundPrimitive是Primitve的扩展，作用是帮助用户将几何图形贴地的类。

GroundPrimitive中的几何图形必须来自单个几何图形，还不支持多个几何图形的批量处理。

二：实际操作

1：贴地线

01.通过new Cesium.GeometryInstance建立几何对象

02.通过new Cesium.PolylineMaterialAppearance新建材质对象

03.通过new Cesium.GroundPolylinePrimitive新建贴地图元对象

（关键代码）

 /* 贴地线 */
        let polyline = new Cesium.GeometryInstance({
            geometry: new Cesium.GroundPolylineGeometry({
                positions: Cesium.Cartesian3.fromDegreesArray([
                    108.0, 31.0, 100.0, 36.0, 105.0, 39.0
                ]),
                width: 2.0
            })
        })

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

        let addGroundPolylineGeometry = new Cesium.GroundPolylinePrimitive({
            geometryInstances: polyline,
            appearance: polylineApperance
        })

        viewer.scene.primitives.add(addGroundPolylineGeometry)

（代码效果）

2：贴地面

01.通过new Cesium.GeometryInstance建立几何对象

02.通过new Cesium.MaterialAppearance新建材质对象

03.通过new Cesium.GroundPrimitive新建贴地图元对象

（关键代码）

     /* 贴地面 */
        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.GroundPrimitive({
            geometryInstances: polygon,
            appearance: polygonApperance
        })

        viewer.scene.primitives.add(addPolygonGeometry)

（代码效果）

3：贴地椭圆

01.通过new Cesium.GeometryInstance建立几何对象

02.通过new Cesium.MaterialAppearance新建材质对象

03.通过new Cesium.GroundPrimitive新建贴地图元对象

（关键代码）

       /* 贴地椭圆 */
        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.GroundPrimitive({
            geometryInstances: ellipse,
            appearance: ellipseApperance
        })

        viewer.scene.primitives.add(addEllipseGeometery)

（代码效果）

4:贴地圆

01.通过new Cesium.GeometryInstance建立几何对象

02.通过new Cesium.MaterialAppearance新建材质对象

03.通过new Cesium.GroundPrimitive新建贴地图元对象

（关键代码）

    /* 贴地圆 */
        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.GroundPrimitive({
            geometryInstances: circle,
            appearance: circleApperance
        })

        viewer.scene.primitives.add(addCircleGeometery)

 （代码效果）

5：贴地走廊

01.通过new Cesium.GeometryInstance建立几何对象

02.通过new Cesium.MaterialAppearance新建材质对象

03.通过new Cesium.GroundPrimitive新建贴地图元对象

（关键代码）

        /* 贴地走廊 */
        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.GroundPrimitive({
            geometryInstances: corridor,
            appearance: corridorApperance
        })

        viewer.scene.primitives.add(addCorridorGeometry)

（代码效果）

6：贴地矩形 

01.通过new Cesium.GeometryInstance建立几何对象

02.通过new Cesium.MaterialAppearance新建材质对象

03.通过new Cesium.GroundPrimitive新建贴地图元对象

（关键代码）

        /* 贴地矩形 */
        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.GroundPrimitive({
            geometryInstances: rectangle,
            appearance: rectangleAppearance
        })

        viewer.scene.primitives.add(addRectangleAppearance)

（代码效果）