雾

---

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

const { mapContainer, uiContainer } = createContainer();
const viewer = new Viewer(mapContainer);
const PARAMS = {
  far: 2400,
  show: false,
  color: "rgb(255, 255, 255)"
};
let fogObj;
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) => changeFogVisible(isCloseEffect),
  far: (z) => fogByDistance(z),
  color: (color) => changeColor(color)
};
function addUI() {
  const pane = new Pane({
    container: uiContainer,
    title: "参数"
  });

  pane.addBinding(PARAMS, "show", {
    label: "开启雾特效"
  });
  // color
  pane.addBinding(PARAMS, "color", { label: "颜色" });
  // far
  pane.addBinding(PARAMS, "far", {
    label: "强度",
    step: 100,
    min: 0,
    max: 20000
  });
  // // near
  // pane.addInput(PARAMS, "near", {
  //   label: "近距离",
  //   step: 10,
  //   min: -50,
  //   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 changeFogVisible(isCloseEffect) {
  if (!fogObj) {
    fogObj = new FogEffect(viewer, {
      color: Color.fromCssColorString(PARAMS.color),
      far: PARAMS.far
    });
  }
  fogObj.show(isCloseEffect);
}
// 设置强度
function fogByDistance(z) {
  if (!fogObj) return;
  fogObj.fogByDistance(z);
}
function changeFogX(x) {
  if (!fogObj) return;
  fogObj.setDistanceX(x);
}
function changeColor(color) {
  if (!fogObj) return;
  fogObj.setColor(Color.fromCssColorString(color));
}

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
  };
}