填挖方分析

import { Viewer, CutOrFill } from "joDVF";
import { Pane } from "tweakpane";
import { SceneMode, Cartesian3, 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.setView({
  destination: new Cartesian3(
    -2333870.571223592,
    5384120.3211288005,
    2492920.230465747
  ),
  orientation: {
    heading: 5.700765161713878,
    pitch: -0.12708834880667164,
    roll: 6.281841437768163
  }
});

viewer.scene.globe.depthTestAgainstTerrain = true;
const cutOrFill = new CutOrFill(viewer, {
  datumHeight: 100
});

const PARAMS = {
  datumHeight: 100,
  showTin: false,
  showLabel: true
};

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

  pane.addBinding(PARAMS, "datumHeight", {
    label: "基线高度(m)"
  });

  pane.addBinding(PARAMS, "showTin", {
    label: "显示/隐藏三角网"
  });

  pane.addBinding(PARAMS, "showLabel", {
    label: "显示/隐藏场景中的计算结果"
  });

  const drawBtn = pane.addButton({
    title: "绘制区域"
  });

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

  drawBtn.on("click", () => {
    cutOrFill.clear();
    cutOrFill.drawBoundary();
  });

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

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

    timer = setTimeout(() => {
      cutOrFill[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
  };
}
填挖方分析 ​

填挖方分析
