雪

---

import { Viewer, SnowEffect } from "joDVF";
import { Pane } from "tweakpane";
import { Cartesian3, Matrix4 } from "joCesium";

const { mapContainer, uiContainer } = createContainer();
const viewer = new Viewer(mapContainer);
const scene = viewer.scene;
const PARAMS = {
  show: true,
  snowSize: 0.02,
  snowSpeed: 60
};
let snowInstance;
viewer.camera.flyTo({
  destination: Cartesian3.fromDegrees(104.06783, 30.539619, 300),
  orientation: {
    heading: -2.0,
    pitch: -6.5,
    roll: 0.0
  },
  endTransform: Matrix4.IDENTITY
});
addUI();
const propsHandler = {
  show: (isCloseEffect) => changeSnowVisible(isCloseEffect),
  snowSize: (size) => setSnowSize(size),
  snowSpeed: (speed) => setSnowSpeed(speed)
};
function addUI() {
  const pane = new Pane({
    container: uiContainer,
    title: "参数"
  });

  pane.addBinding(PARAMS, "show", {
    label: "开启雪特效"
  });

  // snowSize
  pane.addBinding(PARAMS, "snowSize", {
    label: "大小",
    step: 0.001,
    min: 0.004,
    max: 0.035
  });
  // snowSpeed
  pane.addBinding(PARAMS, "snowSpeed", {
    label: "雪速",
    step: 10,
    min: 10,
    max: 400
  });

  // 获取参数
  const btn = pane.addButton({
    title: "获取参数",
    label: "参数" // optional
  });

  btn.on("click", () => {
    console.info("控制台已打印参数");
    console.log(PARAMS);
  });

  pane.on("change", (ev) => {
    let timer = null;
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }

    timer = setTimeout(() => {
      propsHandler[ev.target.key](ev.value);
    }, 300);
  });
}

// 开启特效
function changeSnowVisible(isCloseEffect) {
  if (!snowInstance) {
    snowInstance = new SnowEffect(viewer, {
      ...PARAMS
    });
  }
  snowInstance.show(isCloseEffect);
}

// 设置大小
function setSnowSize(size) {
  if (!snowInstance) return;
  snowInstance.setSnowSize(size);
}
function setSnowSpeed(speed) {
  if (!snowInstance) return;
  snowInstance.setSnowSpeed(speed);
}
changeSnowVisible(true);

function createContainer() {
  const container = document.createElement("div");
  container.style.width = "100%";
  container.style.height = "100%";

  const uiContainer = document.createElement("div");
  uiContainer.style.position = "fixed";
  uiContainer.style.top = "5px";
  uiContainer.style.left = "5px";
  document.body.appendChild(container);
  document.body.appendChild(uiContainer);

  return {
    mapContainer: container,
    uiContainer
  };
}