量测

---

import { Viewer, MeasureHandler, MeasureMode } 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(118.9117467, 32.1165988, 1500.5),
  orientation: new HeadingPitchRoll(
    Math.toRadians(167.76451058600975),
    Math.toRadians(-54.218418549197381),
    0.0
  )
});

const scene = viewer.scene;
const distanceHandler = new MeasureHandler(viewer, MeasureMode.Distance);

distanceHandler.measuredEvent.addEventListener((result) => {
  console.log(result, "result");
  const [distance] = result;
  console.log(distance + " 米");
});

const areaHandler = new MeasureHandler(viewer, MeasureMode.Area);

areaHandler.measuredEvent.addEventListener((result) => {
  const [area] = result;
  console.log(area + " 平方米");
});

const heightHandler = new MeasureHandler(viewer, MeasureMode.DVH);
const angleHandler = new MeasureHandler(viewer, MeasureMode.Angle);

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

  const distanceBtn = pane.addButton({
    title: "测距"
  });

  distanceBtn.on("click", () => {
    distanceHandler.activate();
  });

  const areaBtn = pane.addButton({
    title: "测面积"
  });

  areaBtn.on("click", () => {
    areaHandler.activate();
    areaHandler.drawHandler.enableAssist = true;
  });

  const heightBtn = pane.addButton({
    title: "测高"
  });

  heightBtn.on("click", () => {
    heightHandler.activate();
  });

  const angleBtn = pane.addButton({
    title: "测角度"
  });

  angleBtn.on("click", () => {
    angleHandler.activate();
  });

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

  clearBtn.on("click", () => {
    if (distanceHandler) {
      distanceHandler.clear();
    }
    if (areaHandler) {
      areaHandler.clear();
    }
    if (heightHandler) {
      heightHandler.clear();
    }
    if (angleHandler) {
      angleHandler.clear();
    }
  });
}

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