缓冲区分析

---

import { Viewer, BufferAnalysis } from "joDVF";
import { Pane } from "tweakpane";
import {
  Cartesian3,
  HeadingPitchRoll,
  Math,
  SceneMode,
  CesiumTerrainProvider
} from "joCesium";

const { mapContainer, uiContainer } = createContainer();

const viewer = new Viewer(mapContainer, {
  sceneOptions: SceneMode.SCENE3D,
  terrainProvider: await CesiumTerrainProvider.fromUrl(
    "/cacheServer/assets.cesium.com/1"
  )
});

viewer.camera.flyTo({
  destination: Cartesian3.fromDegrees(105.414901, 30.365411, 3710),
  orientation: new HeadingPitchRoll(
    Math.toRadians(150),
    Math.toRadians(-50),
    0.0
  )
});

// 参数
const PARAMS = {
  radius: 10
};

const bufferPARAMS = { 缓冲半径: 10 };

const bufferAnalysis = new BufferAnalysis(viewer, {
  radius: PARAMS.radius,
  clampToGround: true
});

addUI();
function addUI() {
  const pane = new Pane({
    container: uiContainer,
    title: "参数"
  });

  pane.addBinding(bufferPARAMS, "缓冲半径");

  // 点缓冲
  const pointBufferBtn = pane.addButton({
    title: "点缓冲"
  });

  pointBufferBtn.on("click", () => {
    bufferAnalysis.pointBuffer();
  });

  // 线缓冲
  const lineBufferBtn = pane.addButton({
    title: "线缓冲"
  });

  lineBufferBtn.on("click", () => {
    bufferAnalysis.lineBuffer();
  });

  // 面缓冲
  const polygonBufferBtn = pane.addButton({
    title: "面缓冲"
  });

  polygonBufferBtn.on("click", () => {
    bufferAnalysis.polygonBuffer();
  });

  // 清除
  const clearBtn = pane.addButton({
    title: "清除"
  });

  clearBtn.on("click", () => {
    bufferAnalysis.clear();
  });

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

    timer = setTimeout(() => {
      console.log("changed: " + JSON.stringify(ev.value), ev);
      bufferAnalysis[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
  };
}