<template>
  <div id="cesiumContainer" class="all"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import { ref } from 'vue'

onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
  const viewer = new Cesium.Viewer("cesiumContainer", {
  })
  let hpr = new Cesium.HeadingPitchRoll();
  let trs = new Cesium.TranslationRotationScale();
  let particleSystem = "";
  const entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(104, 31),
  });
  viewer.clock.shouldAnimate = true;
  viewer.scene.globe.depthTestAgainstTerrain = false;
  const minimum = 10
  const maximum = 20;
  particleSystem = viewer.scene.primitives.add(
    new Cesium.ParticleSystem({
      //ConeEmitter 锥形发射器，BoxEmitter 盒形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器
      emitter: new Cesium.CircleEmitter(Cesium.Math.toRadians(45.0)),
      image:
        "/src/image/燃脂.png",
      startColor: Cesium.Color.RED,
      endColor: Cesium.Color.YELLOW,
      startScale: 1.0,
      endScale: 3.0,
      particleLife: 1.5,
      speed: 10.0,
      emissionRate: 200.0,
      imageSize: new Cesium.Cartesian2(25, 25),
      bursts: [
        new Cesium.ParticleBurst({ time: 0.0, minimum, maximum }),
        new Cesium.ParticleBurst({ time: 0.1, minimum, maximum }),
        new Cesium.ParticleBurst({ time: 0.2, minimum, maximum }),
        new Cesium.ParticleBurst({ time: 0.3, minimum, maximum }),
        new Cesium.ParticleBurst({ time: 0.4, minimum, maximum }),
        new Cesium.ParticleBurst({ time: 0.5, minimum, maximum }),
        new Cesium.ParticleBurst({ time: 0.6, minimum, maximum }),
        new Cesium.ParticleBurst({ time: 0.7, minimum, maximum }),
        new Cesium.ParticleBurst({ time: 0.8, minimum, maximum }),
        new Cesium.ParticleBurst({ time: 0.9, minimum, maximum }),
      ],
    })
  );
  viewer.scene.preUpdate.addEventListener(function (scene, time) {
    particleSystem.modelMatrix = entity.computeModelMatrix(time, new Cesium.Matrix4())
    hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr);
    trs.translation = Cesium.Cartesian3.fromElements(
      -4.0,
      0.0,
      1.4,
      new Cesium.Cartesian3()
    );
    trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(
      hpr,
      new Cesium.Quaternion()
    );

    particleSystem.emitterModelMatrix =
      Cesium.Matrix4.fromTranslationRotationScale(
        trs,
        new Cesium.Matrix4()
      )
  });

  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(104, 31, 80),
    orientation: {
      heading: 5.916424, //相机绕z轴旋转。左右摇头。
      pitch: -1.265734, //相机绕y轴旋转。上下点头。
      roll: 0.0, //相机绕x轴旋转。左右歪头。
    },
    duration: 3,
  });


})
</script>



<style>
.all {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  width: 100%;
  height: 100%
}

.cesium-viewer-bottom {
  display: none;
}

button {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 88;
}
</style>
