cesium 添加entities 案例

// 假设你已经初始化了 viewer
// const viewer = new Cesium.Viewer('cesiumContainer');
 
// 为了演示方便，我们先清除所有实体
viewer.entities.removeAll();
 
// ==========================================
// 1. 添加点 (Point)
// ==========================================
const pointEntity = viewer.entities.add({
    name: '红色圆点',
    // 位置：经度 -75.59，纬度 40.03，高度 0
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    point: {
        pixelSize: 10, // 像素大小
        color: Cesium.Color.RED, // 颜色
        outlineColor: Cesium.Color.WHITE, // 边框颜色
        outlineWidth: 2 // 边框宽度
    }
});
 
// ==========================================
// 2. 添加图标/广告牌 (Billboard)
// ==========================================
const billboardEntity = viewer.entities.add({
    name: '图标标记',
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.04883),
    billboard: {
        // 图片地址 (可以是本地路径或 URL)
        image: '../images/Cesium_Logo_overlay.png', 
        width: 32, // 图片显示宽度
        height: 32,
        scale: 1.0, // 缩放比例
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直对齐方式（底部对齐）
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND // 贴地模式
    }
});
 
// ==========================================
// 3. 添加文字标签 (Label)
// ==========================================
const labelEntity = viewer.entities.add({
    name: '文字描述',
    position: Cesium.Cartesian3.fromDegrees(-75.58777, 40.03883, 100), // 稍微抬高一点
    label: {
        text: '这里是核心区域', // 显示的文字
        font: '20px sans-serif', // 字体样式
        style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 样式：填充+描边
        fillColor: Cesium.Color.YELLOW, // 填充色
        outlineColor: Cesium.Color.BLACK, // 描边色
        outlineWidth: 2,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直原点
        pixelOffset: new Cesium.Cartesian2(0, -10) // 像素偏移（防止遮挡点）
    }
});
 
// ==========================================
// 4. 添加线 (Polyline)
// ==========================================
const polylineEntity = viewer.entities.add({
    name: '发光折线',
    polyline: {
        // 坐标数组：[经度1, 纬度1, 经度2, 纬度2, ...]
        positions: Cesium.Cartesian3.fromDegreesArray([
            -75.59, 40.03,
            -75.61, 40.04,
            -75.61, 40.02
        ]),
        width: 5, // 线宽
        // 材质：可以是纯色，也可以是发光材质、虚线等
        material: new Cesium.PolylineGlowMaterialProperty({
            glowPower: 0.2,
            color: Cesium.Color.BLUE
        }),
        clampToGround: true // 是否贴地（设为 true 会忽略高度，紧贴地形）
    }
});
 
// ==========================================
// 5. 添加多边形/面 (Polygon)
// ==========================================
const polygonEntity = viewer.entities.add({
    name: '带高度的多边形',
    polygon: {
        // 定义多边形的顶点
        hierarchy: Cesium.Cartesian3.fromDegreesArray([
            -75.57, 40.03,
            -75.57, 40.04,
            -75.55, 40.04,
            -75.55, 40.03
        ]),
        material: Cesium.Color.ORANGE.withAlpha(0.5), // 半透明橙色
        extrudedHeight: 500, // 拉伸高度（形成 3D 体块）
        outline: true, // 显示边框
        outlineColor: Cesium.Color.BLACK
    }
});
 
// ==========================================
// 6. 添加矩形 (Rectangle)
// ==========================================
const rectangleEntity = viewer.entities.add({
    name: '矩形覆盖',
    rectangle: {
        // 定义矩形的 西、南、东、北 边界 (单位：弧度，所以用 fromDegrees)
        coordinates: Cesium.Rectangle.fromDegrees(-75.54, 40.03, -75.52, 40.05),
        material: Cesium.Color.GREEN.withAlpha(0.6),
        rotation: Cesium.Math.toRadians(45), // 旋转 45 度
        extrudedHeight: 0, // 0 表示紧贴地面但不拉伸
        height: 100 // 距地面的基础高度
    }
});
 
// ==========================================
// 7. 添加圆形/椭圆 (Ellipse)
// ==========================================
const ellipseEntity = viewer.entities.add({
    name: '圆形区域',
    position: Cesium.Cartesian3.fromDegrees(-75.63, 40.03), // 中心点
    ellipse: {
        semiMinorAxis: 500.0, // 短半轴长度（米）
        semiMajorAxis: 500.0, // 长半轴长度（米，相等于圆）
        material: Cesium.Color.MAGENTA,
        outline: true // 显示轮廓
    }
});
 
// ==========================================
// 8. 添加 3D 几何体 - 盒子 (Box)
// ==========================================
const boxEntity = viewer.entities.add({
    name: '盒子',
    position: Cesium.Cartesian3.fromDegrees(-75.63, 40.05, 200), // 注意高度
    box: {
        dimensions: new Cesium.Cartesian3(200.0, 200.0, 200.0), // 长宽高
        material: Cesium.Color.CYAN,
        outline: true
    }
});
 
// ==========================================
// 9. 添加 3D 几何体 - 墙 (Wall)
// ==========================================
const wallEntity = viewer.entities.add({
    name: '围墙',
    wall: {
        // 经度, 纬度, 高度, 经度, 纬度, 高度...
        positions: Cesium.Cartesian3.fromDegreesArrayHeights([
            -75.65, 40.03, 200.0,
            -75.65, 40.04, 200.0
        ]),
        // 墙的底部高度（如果不需要底部贴地，可以设置这个数组）
        minimumHeights: [0, 0], 
        material: Cesium.Color.BROWN
    }
});
 
// ==========================================
// 10. 添加 3D 模型 (Model - glTF/glb)
// ==========================================
const modelEntity = viewer.entities.add({
    name: '飞机模型',
    position: Cesium.Cartesian3.fromDegrees(-75.612, 40.028, 1000),
    // 这里定义模型的朝向 (Orientation) 是比较复杂的，通常需要计算四元数
    // 这里简单演示位置
    model: {
        uri: '../SampleData/models/CesiumAir/Cesium_Air.glb', // 模型路径
        minimumPixelSize: 128, // 最小显示像素，防止缩太小看不见
        maximumScale: 20000, // 最大缩放比例
        scale: 2.0, // 模型自身缩放
        runAnimations: true, // 如果模型带动画，自动播放
        clampAnimations: false // 动画循环
    }
});
 
// ==========================================
// 辅助功能：视角跳转
// ==========================================
// 自动缩放到所有创建的实体范围，确保你能看到它们
viewer.zoomTo(viewer.entities);