淹没分析实例

---

import { Viewer, Flood } from "joDVF";
import { Pane } from "tweakpane";
import {
  Cartesian3,
  HeadingPitchRoll,
  Color,
  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: new Cartesian3(
    -2211829.8331659427,
    4938813.600360793,
    3365879.7124653924
  ),
  orientation: new HeadingPitchRoll(
    0.4002421058189718,
    -0.299157026567058,
    0.001231284133687005
  )
});

viewer.scene.globe.depthTestAgainstTerrain = true;
const scene = viewer.scene;
const flood = new Flood(viewer);

const entity = viewer.entities.add({
  name: "floodentity",
  polygon: {
    hierarchy: Cartesian3.fromDegreesArrayHeights([
      114.13029675978136, 32.06933796950796, 675.4841171655997,
      114.13487994717813, 32.06829218157696, 95.31622495628841,
      114.14026883870666, 32.066067564431755, 146.40972653055348,
      114.13728356244222, 32.06393417913118, 83.13323751290879
    ]),
    height: 100,
    extrudedHeight: 0,
    material: Color.BLUE.withAlpha(0.5),
    outline: true,
    outlineColor: Color.WHITE
  }
});
// viewer.trackedEntity = entity;

flood.onChange.addEventListener(function (result) {
  console.log(result);
});
flood.addEntity(entity, {
  height: 40
});
addUI();
function addUI() {
  const pane = new Pane({
    container: uiContainer,
    title: "操作"
  });

  const startBtn = pane.addButton({
    title: "开始"
  });

  startBtn.on("click", () => {
    flood.start(10, {
      maxHeight: 200
    });
  });

  const pauseBtn = pane.addButton({
    title: "暂停"
  });

  pauseBtn.on("click", () => {
    if (!flood.isPause) {
      flood.pause();
      pauseBtn.title = "继续";
    } else {
      flood.continue();
      pauseBtn.title = "暂停";
    }
  });

  const stopBtn = pane.addButton({
    title: "停止"
  });

  stopBtn.on("click", () => {
    if (flood) flood.stop(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
  };
}