需求描述：需要一个火场燃烧效果，火场从小到大蔓延，火场不规则，蔓延速度不规律，燃烧过后的范围颜色变黑。
技术点：czml，粒子效果
已实现：不规则的多边形从小到大平滑蔓延，且边界附带火焰燃烧效果，蔓延速度可控，蔓延方向可控，可新增和删除蔓延点。
//生成火点
this.ParticleCollectionEffect = new ParticleCollectionEffect(
this.$config.viewer,
this.options
);
const czml = [
{
id: "document",
name: "CZML Polygon - Interpolating References",
version: "1.0",
clock: {
//时钟设置，用于控制时间和动画
interval: "2023-11-08T16:54:00Z/2023-11-08T17:20:00Z", //时间间隔，表示场景的时间范围。
currentTime: "2023-11-08T16:54:00Z", //当前
// multiplier: 20, //时间倍数，控制时间流逝的速度。
multiplier: 3, //时间倍数，控制时间流逝的速度。
range: "LOOP_STOP", //时间范围循环方式，当到达时间范围的末尾时停止。
// step: "SYSTEM_CLOCK_MULTIPLIER"//时间步进方式，使用系统时钟倍数进行步进。
},
},
{
id: "dynamicPolygon",
name: "Dynamic Polygon with Reference Properties",
availability: "2023-11-08T16:54:00Z/2023-11-08T17:20:00Z",
polygon: {
positions: {
references: [
"v1#position",
"v2#position",
"v3#position",
"v4#position"
],
},
fill: true,
heightReference: "CLAMP_TO_GROUND",
// perPositionHeight: true,
material: {
solidColor: {
color: [
{
interval: "2023-11-08T16:54:00Z/2023-11-08T17:20:00Z",
rgbaf: [0, 0, 0, 0.6],
},
],
},
},
outline: false,
outlineWidth: 2,
outlineColor: {
rgba: [250, 250, 0, 255],
},
},
},
{
id: "v1",
position: {
interpolationAlgorithm: "LINEAR",
interpolationDegree: 1,
interval: "2023-11-08T16:54:00Z/2023-11-08T17:20:00Z",
epoch: "2023-11-08T16:54:00Z",
cartographicDegrees: [
0, 118.9857457905, 33.3705867106, 0, 40, 118.9857457905, 33.3705867106, 0
],
},
},
{
id: "v2",
position: {
interpolationAlgorithm: "LINEAR",
interpolationDegree: 1,
interval: "2023-11-08T16:54:00Z/2023-11-08T17:20:00Z",
epoch: "2023-11-08T16:54:00Z",
cartographicDegrees: [
0, 118.9861282873, 33.3706017724, 0, 40, 118.9861282873, 33.3706017724, 0
],
},
},
{
id: "v3",
position: {
interpolationAlgorithm: "LINEAR",
interpolationDegree: 1,
interval: "2023-11-08T16:54:00Z/2023-11-08T17:20:00Z",
epoch: "2023-11-08T16:54:00Z",
cartographicDegrees: [
0, 118.986266983, 33.3704290419, 0, 40, 118.986266983, 33.3704290419, 0
],
},
},
{
id: "v4",
position: {
interpolationAlgorithm: "LINEAR",
interpolationDegree: 1,
interval: "2023-11-08T16:54:00Z/2023-11-08T17:20:00Z",
epoch: "2023-11-08T16:54:00Z",
cartographicDegrees: [
0, 118.9858131327, 33.3704340635, 0, 40, 118.9858131327, 33.3704340635, 0
],
},
},
];
const czml1 = [
{
id: "document",
name: "CZML Polygon - Interpolating References",
version: "1.0",
clock: {
interval: "2023-11-08T17:20:00Z/2023-11-08T17:50:00Z", //时间间隔，表示场景的时间范围。
currentTime: "2023-11-08T17:20:00Z", //当前
multiplier: 3, //1秒的倍速，时间倍数，控制时间流逝的速度。
range: "LOOP_STOP", //时间范围循环方式，当到达时间范围的末尾时停止。
},
},
{
name: "Dynamic Polygon with Reference Properties",
availability: "2023-11-08T17:20:00Z/2023-11-08T17:50:00Z",
polygon: {
positions: {
references: [
"v1#position",
"v2#position",
"v3#position",
"v4#position"
],
},
fill: true,
heightReference: "CLAMP_TO_GROUND",
// perPositionHeight: true,
material: {
solidColor: {
color: [
{
interval: "2023-11-08T17:20:00Z/2023-11-08T17:50:00Z",
rgbaf: [0, 0, 0, 0.6],
}
]
},
},
outline: false,
outlineWidth: 2,
outlineColor: {
rgba: [250, 250, 0, 255],
}
},
},
{
id: "v1",
position: {
interpolationAlgorithm: "LINEAR",
interpolationDegree: 1,
interval: "2023-11-08T17:20:00Z/2023-11-08T17:50:00Z",
epoch: "2023-11-08T17:20:00Z",
cartographicDegrees: [
0, 118.9856482913,
33.375683533, 0, 80, 118.9855538798, 33.370809563, 0, 160,
118.9854448963, 33.3709557895, 0, 320, 118.985296033,
33.3711428113, 0,
],
}
},
{
id: "v2",
position: {
interpolationAlgorithm: "LINEAR",
interpolationDegree: 1,
interval: "2023-11-08T17:20:00Z/2023-11-08T17:50:00Z",
epoch: "2023-11-08T17:20:00Z",
cartographicDegrees: [
0, 118.9862322591,
33.3706590181, 0, 80, 118.9864101731, 33.3707440212, 0, 160,
118.9865650994, 33.3708715861, 0, 320, 118.986782882,
33.3710785274, 0,
],
},
},
{
id: "v3",
position: {
interpolationAlgorithm: "LINEAR",
interpolationDegree: 1,
interval: "2023-11-08T17:20:00Z/2023-11-08T17:50:00Z",
epoch: "2023-11-08T17:20:00Z",
cartographicDegrees: [
0, 118.9863915603,
33.3704082747, 0, 80, 118.9864811941, 33.3703515894, 0, 160,
118.9865739877, 33.3703373287, 0, 320, 118.9866555167,
33.3703414969, 0,
],
},
},
{
id: "v4",
position: {
interpolationAlgorithm: "LINEAR",
interpolationDegree: 1,
interval: "2023-11-08T17:20:00Z/2023-11-08T17:50:00Z",
epoch: "2023-11-08T17:20:00Z",
cartographicDegrees: [
0, 118.9856545041,
33.3653414974, 0, 80, 118.9855142772, 33.3702350981, 0, 160,
118.9853236823, 33.3702647852, 0, 3200, 118.9852208907,
33.3701559674, 0,
],
},
}
];
var dataSourcePromise = this.$config.viewer.dataSources.add(
Cesium.CzmlDataSource.load(czml)
);
// evt.removeEventListener(MyObject.prototype.myListener);
// var dataSourcePromise1 = this.$config.viewer.dataSources.add(
// Cesium.CzmlDataSource.process(czml)
// );
dataSourcePromise
.then((dataSource) => {
// console.log(new Cesium.EntityCollection(dataSource))
let positions = dataSource.entities.getById("dynamicPolygon")._polygon._positions.getValue(
this.$config.viewer.clock.currentTime
);
positions.push(positions[0]);
this.ParticleCollectionEffect._tempLinePositions = positions;
this.ParticleCollectionEffect.calculateFireLine();
setTimeout(() => {
dataSource.process(czml1).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
}, 6000)
this.fireLineTime = setInterval(() => {
let po = dataSource.entities.getById("dynamicPolygon");
let arr = po._polygon._positions.getValue(
this.$config.viewer.clock.currentTime
);
if (arr.length > 1) {
arr.push(arr[0]);
this.ParticleCollectionEffect.update(arr);
} else {
this.ParticleCollectionEffect.clear();
if (this.fireLineTime) {
clearInterval(this.fireLineTime);
this.fireLineTime = null;
}
}
// this.ParticleCollectionEffect.clear();
// this.ParticleCollectionEffect._tempLinePositions = arr;
// this.ParticleCollectionEffect.calculateFireLine();
// for (let index = 0; index < arr.length; index++) {
// this.$config.viewer.entities.add({
// position: arr[index],
// point: {
// color: Cesium.Color.fromCssColorString("rgba(255,174,0,0.9)"),
// pixelSize: 10,
// disableDepthTestDistance: 20000
// }
// })
// }
}, 2000);
})
.catch((error) => {
console.log(error, "sadwdsad");
});
标签：11,position,20,蔓延,08T17,czml,2023,cesium,00Z From： https://www.cnblogs.com/wangkt/p/17839391.html