Cesium核心参数与实战案例详解
以下是与Cesium入门相关的常用参数及使用案例,结合官方文档和开发实践整理而成:Viewer初始化参数相机控制参数添加3D模型多边形绘制粒子系统(爆炸效果)光照参数加载GeoJSON数据动态路径动画以上案例可直接集成到项目中,需确保已正确引入Cesium库。参数调整时建议参考官方文档的详细说明。
·
以下是与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库。参数调整时建议参考官方文档的详细说明。
更多推荐



所有评论(0)