Cesium快速入门到精通系列教程三：添加物体与3D建筑物

Cesium中添加物体与3D建筑物，对于大规模城市模型，推荐使用 3D Tileset；对于简单几何图形，可以使用 Entity API；对于复杂模型，可以使用 GLTF 格式：

一、添加一个点：

在 Cesium 1.93 中在广州塔（经度：113.3244，纬度：23.1049）上空 800 米处添加一个红点

二、添加Cesium自带的建筑：

以广州塔为中心添加Cesium自带的建筑

三、添加标签与广告牌

  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(guangzhouTowerPosition.longitude, guangzhouTowerPosition.latitude, guangzhouTowerPosition.height + 50), // 广告牌位于塔顶上方50米
    billboard: {
      image: './gzt.png', // 在public目录
      width: 60,
      height: 60,
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平居中
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,    // 垂直底部对齐
      scale: 1.0,
      color: Cesium.Color.RED.withAlpha(0.8)           // 半透明红色
    },
    label: {
      text: '广州塔',
      font: '30px Microsoft YaHei', // 字体样式
      fillColor: Cesium.Color.WHITE,  // 文字颜色
      outlineColor: Cesium.Color.BLACK, // 描边颜色
      outlineWidth: 2,                // 描边宽度
      style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 填充+描边
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      verticalOrigin: Cesium.VerticalOrigin.TOP, // 标签位于广告牌上方
      pixelOffset: new Cesium.Cartesian2(0, 20), // 垂直偏移量
      scale: 0.8
    }
  });

完整代码

四、3D模型添加与设置

在广州塔上空添加一架GLB模型飞机

  const guangzhouTowerPosition = {
    longitude: 113.3244,
    latitude: 23.1049,
    height: 600  // 广州塔实际高度约600米
  };

  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(
      guangzhouTowerPosition.longitude + 0.001,  // 东经偏移100米
      guangzhouTowerPosition.latitude + 0.0005, // 北纬偏移50米
      1500                 // 飞行高度100米
    ),
    model: {
      uri: './model/Cesium_Air.glb', // Cesium_Air.glb在public目录下
      scale: 1.0,                  // 缩放比例（根据模型实际尺寸调整）
      minimumPixelSize: 128,
      maximumScale: 10000,
      // 启用动画（假设模型包含螺旋桨动画）
      animations: [{
        id: 'propeller',
        loop: Cesium.ModelAnimationLoop.REPEAT,
        speed: 2.0 // 转速倍数
      }]
    }
  });

完整代码

五、创建一个多边形实体

const viewer = new Cesium.Viewer("cesiumContainer");

const wyoming = viewer.entities.add({
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([
      -109.080842, 45.002073, -105.91517, 45.002073, -104.058488, 44.996596,
      -104.053011, 43.002989, -104.053011, 41.003906, -105.728954, 40.998429,
      -107.919731, 41.003906, -109.04798, 40.998429, -111.047063, 40.998429,
      -111.047063, 42.000709, -111.047063, 44.476286, -111.05254, 45.002073,
    ]),
    height: 0,
    material: Cesium.Color.RED.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
  },
});

// viewer.flyTo(viewer.entities);
viewer.zoomTo(wyoming);