控高分析

---

import { Viewer, HeightLimite } from "joDVF";
import { Pane } from "tweakpane";
import {
  SceneMode,
  Cesium3DTileset,
  HeadingPitchRange,
  CesiumTerrainProvider
} from "joCesium";

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

const scene = viewer.scene;
scene.globe.depthTestAgainstTerrain = true;
const dataBaseURL = "./assets/3dtilesets/dayanta/tileset.json";
Cesium3DTileset.fromUrl(dataBaseURL).then((tile) => {
  const boundingSphere = tile.boundingSphere;
  const radius = boundingSphere.radius;
  viewer.scene.primitives.add(tile);
  viewer.zoomTo(tile, new HeadingPitchRange(-1.2, -0.6, radius * 4.0));
});

const heightLimite = new HeightLimite(viewer, {
  height: 45
});

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

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

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

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

  drawBtn.on("click", () => {
    heightLimite.draw();
  });

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

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

    timer = setTimeout(() => {
      heightLimite[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
  };
}