技术点：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"); });