Appearance
绘制可编辑体
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
};
}
