【Cesium】 Primitive创建形状基础---贴地几何体

一、贴地线

// 创建贴地线段几何实例
const instance = new Cesium.GeometryInstance({
    id: "PolylineGeometry",
    geometry: new Cesium.GroundPolylineGeometry({
        positions: Cesium.Cartesian3.fromDegreesArray([
            108.0, 31.0,
            100.0, 36.0,
            105.0, 39.0
        ]),
        width: 10.0,
    })
});
 
// 根据几何实例创建贴地图元
const primitive = new Cesium.GroundPolylinePrimitive({
    geometryInstances: instance,
    appearance: new Cesium.PolylineMaterialAppearance({
        material: Cesium.Material.fromType('Color'),
    })
});
 
// 将图元添加到集合
viewer.scene.primitives.add(primitive)
 
// 定位到指定模型位置
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(108.0, 31.0, 13000000),
    orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-90),
        roll: 0
    },
    duration: 2.0  // 飞行动画的持续时间(单位是秒)
});

二、贴地多边形

// 创建贴地面几何实例
const instance = new Cesium.GeometryInstance({
    id: "PolygonGeometry",
    geometry: new Cesium.PolygonGeometry({
        polygonHierarchy: new Cesium.PolygonHierarchy(
            Cesium.Cartesian3.fromDegreesArray([
                -72.0, 40.0,
                -70.0, 35.0,
                -75.0, 30.0,
                -70.0, 30.0,
                -68.0, 40.0
            ])
        )
    }),
});
 
// 根据几何实例创建贴地面图元
const primitive = new Cesium.GroundPrimitive({
    geometryInstances: instance,  //可以是实例数组
    appearance: new Cesium.MaterialAppearance({
        material: Cesium.Material.fromType('Color', {
            color: Cesium.Color.BLUE
        }),
    })
});
 
// 将图元添加到集合
viewer.scene.primitives.add(primitive)
 
// 定位到指定模型位置
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-72.0, 40, 13000000),
    orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-90),
        roll: 0
    },
    duration: 2.0  // 飞行动画的持续时间(单位是秒)
});

三、贴地椭圆

// 创建椭圆几何实例
const instance = new Cesium.GeometryInstance({
    geometry: new Cesium.EllipseGeometry({
        center: Cesium.Cartesian3.fromDegrees(-100.0, 20.0),
        semiMinorAxis: 500000.0, // semiMinorAxis和semiMajorAxis值相等则为圆形
        semiMajorAxis: 1000000.0,
        rotation: Cesium.Math.PI_OVER_FOUR,
        vertexFormat: Cesium.VertexFormat.POSITION_AND_ST,
    }),
    id: "EllipseGeometry",
});
 
// 根据几何实例创建贴地椭圆图元
const primitive = new Cesium.GroundPrimitive({
    geometryInstances: instance,  //可以是实例数组
    appearance: new Cesium.EllipsoidSurfaceAppearance({
        material: Cesium.Material.fromType('Color')
    })
});
 
// 将图元添加到集合
viewer.scene.primitives.add(primitive)

四、贴地圆形

// 创建圆形几何实例
const instance = new Cesium.GeometryInstance({
    id: "CircleGeometry",
    geometry: new Cesium.CircleGeometry({
        center: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
        radius: 100000.0,
        extrudedHeight: 20000 // 圆形高度,形成圆柱
    })
});
 
 
// 根据几何实例创建图元
const primitive = new Cesium.GroundPrimitive({
    geometryInstances: instance,  //可以是实例数组
    appearance: new Cesium.MaterialAppearance({
        material: Cesium.Material.fromType('Color'),
    })
});
 
// 将图元添加到集合
viewer.scene.primitives.add(primitive)

五、贴地连廊

// 创建连廊几何实例
const instance = new Cesium.GeometryInstance({
    id: "CorridorGeometry",
    geometry: new Cesium.CorridorGeometry({
        vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
        positions: Cesium.Cartesian3.fromDegreesArray([-72.0, 40.0, -70.0, 35.0, -68.0, 38.0]),
        width: 100000,
        extrudedHeight: 1000
    }),
    attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA)
    },
});
 
// 根据几何实例创建贴地连廊图元
const primitive = new Cesium.GroundPrimitive({
    geometryInstances: instance,  //可以是实例数组
    appearance: new Cesium.PerInstanceColorAppearance({
        flat: true,
        translucent: false
    })
});
 
// 将图元添加到集合
viewer.scene.primitives.add(primitive)

六、贴地矩形

// 创建矩形几何实例
const instance = new Cesium.GeometryInstance({
    id: "RectangleGeometry",
    geometry: new Cesium.RectangleGeometry({
        ellipsoid: Cesium.Ellipsoid.WGS84,
        rectangle: Cesium.Rectangle.fromDegrees(-80.0, 39.0, -74.0, 42.0),
        height: 10000.0
    }),
    attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA)
    },
});
 
// 根据贴地矩形实例创建图元
const primitive = new Cesium.GroundPrimitive({
    geometryInstances: instance,  //可以是实例数组
    appearance: new Cesium.PerInstanceColorAppearance({
        flat: true,
        translucent: false
    })
});
 
// 将图元添加到集合
viewer.scene.primitives.add(primitive)
  • 11
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Cesium是一个用于构建地球上三维地理应用的开源JavaScript库。它提供了丰富的功能,包括贴地primitivePrimitive)的支持。 贴地primitive是指在地球表面上精确贴合的三维几何体Cesium中的primitive对象可以用于创建和渲染各种类型的几何体,如点、线、面等。而贴地primitive则是这些几何体在地球表面上的投影。 要创建一个贴地primitive,你可以使用Cesium提供的几何体生成器(GeometryGenerator)来创建几何体,并将其与一个贴地材质(GroundMaterial)结合使用。通过将几何体的顶点位置调整为地球表面上的位置,再使用贴地材质进行渲染,就可以实现贴地效果。 以下是一个使用Cesium创建一个贴地primitive的示例代码: ```javascript // 创建一个几何体 var geometry = Cesium.GeometryGenerator.createGeometry(Cesium.GeometryType.Box); // 将几何体的顶点位置调整为地球表面上的位置 Cesium.GeometryGenerator.projectToGeoreferencedEllipsoid(geometry, Cesium.Ellipsoid.WGS84); // 创建一个贴地材质 var material = new Cesium.GroundMaterial({ color: Cesium.Color.RED }); // 创建一个贴地primitive var primitive = new Cesium.GroundPrimitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: geometry, attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.WHITE) } }), appearance: new Cesium.MaterialAppearance({ material: material }) }); // 将primitive添加到场景中 viewer.scene.primitives.add(primitive); ``` 上述代码创建了一个贴地的红色立方体,并将其添加到了Cesium的场景中。你可以根据自己的需求修改几何体的类型、材质及其他属性来创建不同的贴地primitive
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鱼遇雨愈愉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值