绘制可编辑面

import { Viewer, PlaneMode, DrawEditablePlane } from "joDVF";
import { Pane } from "tweakpane";
import {
  Cartesian3,
  HeadingPitchRoll,
  Math,
  ClassificationType
} from "joCesium";

const { mapContainer, uiContainer } = createContainer();

const viewer = new Viewer(mapContainer);
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;
let lineHandler, polygonHandler;

function clear() {
  lineHandler && lineHandler.clear();
  polygonHandler && polygonHandler.clear();
}

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

  const lineBtn = pane.addButton({
    title: "线"
  });

  lineBtn.on("click", () => {
    if (!lineHandler) {
      lineHandler = new DrawEditablePlane(viewer, PlaneMode.Line, {
        classificationType: ClassificationType.TERRAIN
      });
    }
    lineHandler.draw();
  });

  const polygonBtn = pane.addButton({
    title: "面"
  });

  polygonBtn.on("click", () => {
    if (!polygonHandler) {
      polygonHandler = new DrawEditablePlane(viewer, PlaneMode.Polygon);
    }
    polygonHandler.draw();
  });

  const quitBtn = pane.addButton({
    title: "退出编辑"
  });

  quitBtn.on("click", () => {
    lineHandler && lineHandler.quitEdit();
    polygonHandler && polygonHandler.quitEdit();
  });

  const reeditBtn = pane.addButton({
    title: "重新编辑"
  });

  reeditBtn.on("click", () => {
    lineHandler && lineHandler.reEdit();
    polygonHandler && polygonHandler.reEdit();
  });

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

  clearBtn.on("click", () => {
    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
  };
}
绘制可编辑面 ​

绘制可编辑面
