Skip to content

绘制可编辑体


ts
import { Viewer, CubeMode, DrawEditableCube } from "joDVF";
import { Pane } from "tweakpane";
import { Cartesian3, HeadingPitchRoll, Math } 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 cylinderHandler;
let verticalCylinderHandler;
let sphereHandler;
let polyhedronHandler;
let cuboidHandler;

function clear() {
  if (sphereHandler) {
    sphereHandler.clear();
    sphereHandler = null;
  }
  if (polyhedronHandler) {
    polyhedronHandler.clear();
    polyhedronHandler = null;
  }
}

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

  const sphereBtn = pane.addButton({
    title: "球体"
  });

  sphereBtn.on("click", () => {
    clear();
    if (!sphereHandler) {
      sphereHandler = new DrawEditableCube(viewer, CubeMode.Sphere);
    }
    sphereHandler.draw();
  });

  const polyhedronBtn = pane.addButton({
    title: "多面体"
  });

  polyhedronBtn.on("click", () => {
    if (!polyhedronHandler) {
      polyhedronHandler = new DrawEditableCube(viewer, CubeMode.Polyhedron, {
        showOutline: true
      });
    }
    polyhedronHandler.draw();
    polyhedronHandler.drawEndEvent.addEventListener(function (result) {
      console.log("drawEndEvent :>> ", result);
    });
    polyhedronHandler.editEndEvent.addEventListener(function (result) {
      console.log("editEndEvent :>> ", result);
    });
    polyhedronHandler.editMovingEvent.addEventListener(function (result) {
      console.log("editMovingEvent :>> ", result);
    });
  });

  const startEditBtn = pane.addButton({
    title: "开始编辑"
  });

  startEditBtn.on("click", () => {
    sphereHandler && sphereHandler.edit();
    polyhedronHandler && polyhedronHandler.edit();
  });

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

  quitBtn.on("click", () => {
    sphereHandler && sphereHandler.exitEdit(true);
    polyhedronHandler && polyhedronHandler.exitEdit(true);
  });

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