环形特效

---

import { Viewer, CircleScanEffects, CircleWaveEffects } from "joDVF";
import { Pane } from "tweakpane";
import { Cartesian3 } from "joCesium";

const { mapContainer, uiContainer } = createContainer();

const viewer = new Viewer(mapContainer);
viewer.scene.globe.depthTestAgainstTerrain = true;
viewer.camera.flyTo({
  destination: Cartesian3.fromDegrees(
    108.7375135575923,
    33.16163417523299,
    15500.5
  )
});

const circleScan = new CircleScanEffects({
  viewer,
  center: Cartesian3.fromDegrees(108.7375135575923, 33.16163417523299, 1000),
  radius: 1000.0,
  color: "#f05"
});

const circleWave = new CircleWaveEffects({
  viewer,
  center: Cartesian3.fromDegrees(108.781661, 33.160844, 1000),
  radius: 1000.0,
  color: "#f05",
  duration: 1000
});

addUI();
function addUI() {
  const PARAMS = {
    color: "#f05",
    duration: 2000,
    isClockwise: false
  };
  const pane = new Pane({
    container: uiContainer,
    title: "参数"
  });

  // duration
  pane.addBinding(PARAMS, "duration", {
    step: 100,
    min: 100,
    max: 10000
  });

  // color
  pane.addBinding(PARAMS, "color");

  pane.addBinding(PARAMS, "isClockwise", {
    label: "是否为顺时针"
  });

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

    timer = setTimeout(() => {
      // console.log("changed: " + JSON.stringify(ev.value), ev);
      console.log(ev);
      circleScan[ev.target.key] = ev.value;
      circleWave[ev.target.key] = ev.value;
    }, 300);
  });
}

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