雨

---

import { Viewer, RainEffect } 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,
  tiltAngle: -0.2,
  rainSize: 0.3,
  rainSpeed: 300
};
let rainInstance;
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) => changeRainVisible(isCloseEffect),
  tiltAngle: (angle) => setTiltAngle(angle),
  rainSize: (size) => setRainSize(size),
  rainSpeed: (speed) => setRainSpeed(speed)
};
function addUI() {
  const pane = new Pane({
    container: uiContainer,
    title: "参数"
  });

  pane.addBinding(PARAMS, "show", {
    label: "开启雨特效"
  });
  // tiltAngle
  pane.addBinding(PARAMS, "tiltAngle", {
    label: "倾斜角度",
    step: 0.1,
    min: -1,
    max: 1
  });
  // rainSize
  pane.addBinding(PARAMS, "rainSize", {
    label: "大小",
    step: 0.1,
    min: 0.1,
    max: 1
  });
  // rainSpeed
  pane.addBinding(PARAMS, "rainSpeed", {
    label: "雨速",
    step: 50,
    min: 10,
    max: 1000
  });

  // 获取参数
  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 changeRainVisible(isCloseEffect) {
  if (!rainInstance) {
    rainInstance = new RainEffect(viewer, {
      ...PARAMS
    });
  }
  rainInstance.show(isCloseEffect);
}
// 设置角度
function setTiltAngle(val) {
  if (!rainInstance) return;
  rainInstance.setTiltAngle(val);
}
// 设置大小
function setRainSize(size) {
  if (!rainInstance) return;
  rainInstance.setRainSize(size);
}
function setRainSpeed(speed) {
  if (!rainInstance) return;
  rainInstance.setRainSpeed(speed);
}
changeRainVisible(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
  };
}