分屏对比

---

import { Viewer, MultiViewport, MultiViewportMode, BaseMapMode } from "joDVF";
import { Pane } from "tweakpane";
import { Matrix4, HeadingPitchRange } from "joCesium";

const { mapContainer, uiContainer } = createContainer();

const viewer = new Viewer(mapContainer);

let multiViewport = new MultiViewport(viewer, {
  mode: MultiViewportMode.Dual,
  subBasemap: {
    port1: BaseMapMode.ESRI
  }
});

let tileset = null;

addUI();
function addUI() {
  const pane = new Pane({
    container: uiContainer,
    title: "参数"
  });
  const modeList = pane.addBlade({
    view: "list",
    label: "分屏模式",
    options: [
      { text: "不使用分屏", value: 1 },
      { text: "双视口", value: 2 },
      { text: "三视口", value: 3 },
      { text: "四视口", value: 4 }
    ],
    value: 2
  });

  // 创建分屏
  const createBtn = pane.addButton({
    title: "create",
    label: "创建分屏",
    hidden: true
  });

  // 销毁分屏
  const destoryBtn = pane.addButton({
    title: "destory",
    label: "销毁分屏"
  });

  // 添加图层
  const addLayerBtn = pane.addButton({
    title: "addLayer",
    label: "添加图层" // optional
  });

  addLayerBtn.on("click", () => {
    if (tileset) return;
    tileset = multiViewport.add3DTiles(
      1,
      "./assets/3dtilesets/dayanta/tileset.json"
    );
    tileset.then((tileset) => {
      const modelMatrix = Matrix4.multiply(
        Matrix4.fromArray([
          0.8062928355854908, -0.603174364849412, 9.143814709566822e-7, 0,
          0.6031743648440513, 0.8062928355833111, 0.0000032891244039490175, 0,
          -0.0000027024209071525497, -0.0000020859899490521805,
          1.0069396462137954, 0, -348.5912848538027, 411.5427531453279,
          5.811543947085738, 1
        ]),
        Matrix4.inverse(tileset.root.transform, new Matrix4()),
        new Matrix4()
      );
      Matrix4.multiply(tileset.root.transform, modelMatrix, modelMatrix);
      tileset.modelMatrix = modelMatrix;
      const boundingSphere = tileset.boundingSphere;
      const radius = boundingSphere.radius;
      viewer.zoomTo(tileset, new HeadingPitchRange(-1.2, -0.6, radius * 2.0));
    });
  });

  // 删除图层
  const deleteLayerBtn = pane.addButton({
    title: "deleteLayer",
    label: "删除图层" // optional
  });

  deleteLayerBtn.on("click", () => {
    if (!tileset) return;
    multiViewport.remove3DTiles(1, tileset);
    tileset = null;
  });

  destoryBtn.on("click", () => {
    multiViewport = multiViewport.destroy();
    createBtn.hidden = false;
    destoryBtn.hidden = true;
    modeList.hidden = true;
    addLayerBtn.hidden = true;
    deleteLayerBtn.hidden = true;
  });

  createBtn.on("click", () => {
    createBtn.hidden = true;
    destoryBtn.hidden = false;
    modeList.hidden = false;
    addLayerBtn.hidden = false;
    deleteLayerBtn.hidden = false;
    multiViewport = new MultiViewport(viewer, modeList.value, []);
  });

  pane.on("change", (ev) => {
    console.log("changed: " + JSON.stringify(ev.value), ev);
    if (!multiViewport) return;
    multiViewport.changeMode(ev.value);
  });
}

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