标绘

---

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

const { mapContainer, uiContainer } = createContainer();

const viewer = new Viewer(mapContainer, {
  debug: true
});

let plotEdit = new PlotEdit(viewer, {
  canEdit: !0
});

addUI();

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

  const arrow1Btn = pane.addButton({
    title: "攻击箭头"
  });

  arrow1Btn.on("click", () => {
    plotEdit.start({
      name: "攻击箭头",
      arrowType: 1,
      style: {
        color: "#fc1100",
        heightReference: true
      }
    });
  });

  const arrow2Btn = pane.addButton({
    title: "攻击箭头(平尾)"
  });

  arrow2Btn.on("click", () => {
    plotEdit.start({
      name: "攻击箭头(平尾)",
      arrowType: 2,
      style: {
        color: "#ddff00",
        heightReference: true
      }
    });
  });

  const arrow3Btn = pane.addButton({
    title: "攻击箭头(燕尾)"
  });

  arrow3Btn.on("click", () => {
    plotEdit.start({
      name: "攻击箭头(燕尾)",
      arrowType: 3,
      style: {
        color: "#00e41b",
        heightReference: true
      }
    });
  });

  const arrow4Btn = pane.addButton({
    title: "闭合曲面"
  });

  arrow4Btn.on("click", () => {
    plotEdit.start({
      name: "闭合曲面",
      arrowType: 4,
      style: {
        color: "#001CF4",
        heightReference: true
      }
    });
  });

  const arrow5Btn = pane.addButton({
    title: "钳击箭头"
  });

  arrow5Btn.on("click", () => {
    plotEdit.start({
      name: "钳击箭头",
      arrowType: 5,
      style: {
        color: "#00ffe5",
        heightReference: true
      }
    });
  });

  const arrow6Btn = pane.addButton({
    title: "单尖直箭头"
  });

  arrow6Btn.on("click", () => {
    plotEdit.start({
      name: "单尖直箭头",
      arrowType: 6,
      style: {
        color: "#f200ff",
        heightReference: true
      }
    });
  });

  const arrow7Btn = pane.addButton({
    title: "单尖直箭头（燕尾）"
  });

  arrow7Btn.on("click", () => {
    plotEdit.start({
      name: "单尖直箭头（燕尾）",
      arrowType: 7,
      style: {
        color: "#D07900",
        heightReference: true
      }
    });
  });

  const arrow8Btn = pane.addButton({
    title: "弓形面"
  });

  arrow8Btn.on("click", () => {
    plotEdit.start({
      name: "弓形面",
      arrowType: 8,
      style: {
        color: "#00B038",
        heightReference: true
      }
    });
  });

  const arrow9Btn = pane.addButton({
    title: "直箭头"
  });

  arrow9Btn.on("click", () => {
    plotEdit.start({
      name: "直箭头",
      arrowType: 9,
      style: {
        color: "#C8CB99",
        heightReference: true
      }
    });
  });

  const arrow10Btn = pane.addButton({
    title: "矩形旗"
  });

  arrow10Btn.on("click", () => {
    plotEdit.start({
      name: "矩形旗",
      arrowType: 10,
      style: {
        color: "#0094DE",
        heightReference: true
      }
    });
  });

  const arrow11Btn = pane.addButton({
    title: "扇形"
  });

  arrow11Btn.on("click", () => {
    plotEdit.start({
      name: "扇形",
      arrowType: 11,
      style: {
        color: "#5902BC",
        heightReference: true
      }
    });
  });

  const arrow12Btn = pane.addButton({
    title: "三角旗"
  });

  arrow12Btn.on("click", () => {
    plotEdit.start({
      name: "三角旗",
      arrowType: 12,
      style: {
        color: "#5902BC",
        heightReference: true
      }
    });
  });

  const arrow13Btn = pane.addButton({
    title: "矩形波浪旗"
  });

  arrow13Btn.on("click", () => {
    plotEdit.start({
      name: "矩形波浪旗",
      arrowType: 10,
      style: {
        color: "#5902BC",
        heightReference: true
      }
    });
  });

  const arrow14Btn = pane.addButton({
    title: "曲线"
  });

  arrow14Btn.on("click", () => {
    plotEdit.start({
      name: "曲线",
      arrowType: 10,
      style: {
        color: "#D0CD00",
        heightReference: true
      }
    });
  });

  const arrow15Btn = pane.addButton({
    title: "单线箭头"
  });

  arrow15Btn.on("click", () => {
    plotEdit.start({
      name: "单线箭头",
      arrowType: 10,
      style: {
        color: "#41D020",
        heightReference: true
      }
    });
  });

  const clearBtn = pane.addButton({
    title: "清除"
  });

  clearBtn.on("click", () => {
    plotEdit.removeAll();
  });
}

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