以下是与Cesium入门相关的常用参数及使用案例,结合官方文档和开发实践整理而成:


核心参数配置

Viewer初始化参数

const viewer = new Cesium.Viewer('cesiumContainer', {
  imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
  }),
  terrainProvider: Cesium.createWorldTerrain(),
  timeline: true,  // 显示时间轴
  animation: true,  // 显示动画控件
  baseLayerPicker: false,  // 禁用底图选择器
  shouldAnimate: true  // 自动播放动画
});

相机控制参数

viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000), // 经纬度和高度
  orientation: {
    heading: Cesium.Math.toRadians(0),  // 朝向角
    pitch: Cesium.Math.toRadians(-45),  // 俯仰角
    roll: 0
  }
});


实体(Entity)参数

添加3D模型

viewer.entities.add({
  name: '直升机模型',
  position: Cesium.Cartesian3.fromDegrees(116.4, 39.9),
  model: {
    uri: 'models/CesiumAir/Cesium_Air.glb',
    minimumPixelSize: 128,  // 最小渲染尺寸
    maximumScale: 100  // 最大缩放比例
  }
});

多边形绘制

viewer.entities.add({
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([116.3,39.8, 116.5,39.8, 116.4,39.9]),
    material: new Cesium.Color(1.0, 0.0, 0.0, 0.5),  // RGBA颜色
    height: 1000,  // 离地高度
    outline: true
  }
});


可视化效果参数

粒子系统(爆炸效果)

const particleSystem = viewer.scene.primitives.add(
  new Cesium.ParticleSystem({
    image: 'images/smoke.png',  // 粒子贴图
    startColor: Cesium.Color.RED.withAlpha(0.7),
    endColor: Cesium.Color.YELLOW.withAlpha(0.1),
    startScale: 1.0,
    endScale: 5.0,
    minimumSpeed: 10.0,
    maximumSpeed: 20.0
  })
);

光照参数

viewer.scene.globe.enableLighting = true;  // 启用动态光照
viewer.scene.light = new Cesium.DirectionalLight({
  direction: new Cesium.Cartesian3(1.0, -1.0, -1.0)  // 光线方向
});


实用案例

加载GeoJSON数据

Cesium.GeoJsonDataSource.load('data/geojson.json').then(dataSource => {
  viewer.dataSources.add(dataSource);
  const entities = dataSource.entities.values;
  entities.forEach(entity => {
    entity.polygon.material = Cesium.Color.BLUE.withAlpha(0.5);
  });
});

动态路径动画

const positionProperty = new Cesium.SampledPositionProperty();
const startTime = Cesium.JulianDate.now();
positionProperty.addSample(startTime, Cesium.Cartesian3.fromDegrees(116.3, 39.8));

// 添加路径点
for (let i = 1; i <= 10; ++i) {
  const time = Cesium.JulianDate.addSeconds(startTime, i * 2, new Cesium.JulianDate());
  const position = Cesium.Cartesian3.fromDegrees(116.3 + i * 0.02, 39.8 + i * 0.01);
  positionProperty.addSample(time, position);
}

viewer.entities.add({
  position: positionProperty,
  path: {
    resolution: 1,
    material: new Cesium.PolylineGlowMaterialProperty({
      glowPower: 0.2,
      color: Cesium.Color.YELLOW
    })
  }
});


以上案例可直接集成到项目中,需确保已正确引入Cesium库。参数调整时建议参考官方文档的详细说明。

Logo

纵情码海钱塘涌,杭州开发者创新动! 属于杭州的开发者社区!致力于为杭州地区的开发者提供学习、合作和成长的机会;同时也为企业交流招聘提供舞台!

更多推荐