WDMSLayer

---

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

const { mapContainer, uiContainer } = createContainer();

const viewer = new Viewer(mapContainer);
// 视频拼接实例
const videoMosaicer = new WDMSLayer(viewer, {
  url: "http://47.92.252.186:8880/fcgi-bin/WDMServer",
  videoUrl: "C:\\vid-f220731131737_15.ts",
  layerName: "VideoMosaicer1",
  driverId: "route1",
  tileWidth: 512,
  tileHeight: 512
});

const PARAMS = {
  driveStatus: "",
  mosaicerStatus: ""
};

// 获取视频拼接状态
videoMosaicer.statusEvent.addEventListener((arg) => {
  console.log(`驱动状态：${arg[0].msg}`);
  PARAMS.mosaicerStatus = `驱动状态：${arg[0].msg}`;
});

videoMosaicer.mosaicerEvent.addEventListener((arg) => {
  console.log(`拼接状态：${arg[0].textInfo}`);
  PARAMS.driveStatus = `拼接状态：${arg[0].textInfo}`;
});

addUI(uiContainer);

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

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

  const startBtn = pane.addButton({
    title: "start",
    label: "开启拼图" // optional
  });

  startBtn.on("click", () => {
    videoMosaicer.start();
  });

  const stopBtn = pane.addButton({
    title: "stop",
    label: "结束拼图"
  });

  stopBtn.on("click", () => {
    videoMosaicer.stop();
  });

  pane.addBinding(PARAMS, "driveStatus", {
    readonly: true,
    multiline: true,
    rows: 3
  });

  pane.addBinding(PARAMS, "mosaicerStatus", {
    readonly: true,
    multiline: true,
    rows: 3
  });
}