二三维联动

---

import { Viewer, Linkage23D } from "joDVF";
import { Pane } from "tweakpane";

const { mapContainer, uiContainer } = createContainer();

const viewer = new Viewer(mapContainer);
let linkage23D = new Linkage23D(viewer, {
  container: "secondaryScene"
});
addUI();
function addUI() {
  const pane = new Pane({
    container: uiContainer,
    title: "操作"
  });

  const btnOpen = pane.addButton({
    title: "开启"
  });

  btnOpen.on("click", () => {
    if (!linkage23D) {
      linkage23D = new Linkage23D(viewer, {
        container: "secondaryScene"
      });
    }
    viewer.container.style.width = "50%";
    viewer.resize();
    var container1 = document.createElement("div");
    container1.id = "secondaryScene";
    container1.style.width = "100%";
    container1.style.height = "100%";
    container1.style.float = "right";
    container1.style.overflow = "hidden";
    container1.style.color = "blue";
    container1.style.position = "absolute";
    container1.style.top = "0px";
    container1.style.left = "50%";
    viewer.container.append(container1);
    linkage23D.linkage();
  });

  const btnClose = pane.addButton({
    title: "关闭"
  });

  btnClose.on("click", () => {
    viewer.container.style.width = "100%";
    viewer.resize();
    viewer.container.removeChild(document.getElementById("secondaryScene"));
    if (linkage23D) {
      linkage23D.destroy();
    }
  });
}

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