绘制

---

import { Viewer, DrawHandler, DrawMode } from "joDVF";
import { Pane } from "tweakpane";
import {
  Cartesian3,
  HeadingPitchRoll,
  Math,
  ClassificationType
} 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
  )
});

viewer.scene.globe.depthTestAgainstTerrain = true;
const scene = viewer.scene;
const currentPrimitives = null;
const pointHandler = new DrawHandler(viewer, DrawMode.Point);
pointHandler.anchorInterceptor = (screenPosition, position) => {
  console.log(screenPosition, position);
  return true;
};
const lineHandler = new DrawHandler(viewer, DrawMode.Line, {
  classificationType: ClassificationType.TERRAIN
});
lineHandler.anchorInterceptor = (screenPosition, position) => {
  console.log(screenPosition, position);
  return true;
};
const polygonHandler = new DrawHandler(viewer, DrawMode.Polygon, {
  classificationType: ClassificationType.TERRAIN
});
const markerHandler = new DrawHandler(viewer, DrawMode.Marker);

// 启动画线辅助
lineHandler.enableAssist = true;
pointHandler.activeEvent.addEventListener(function (isActive) {});
// 监听绘制点
pointHandler.drewEvent.addEventListener(function (result) {
  // pointHandler.activate();
});
// 绘制线监听
lineHandler.activeEvent.addEventListener(function (isActive) {});
lineHandler.movingEvent.addEventListener(function (windowPosition) {
  // console.log(windowPosition);
});
lineHandler.drewEvent.addEventListener(
  ([positions, primitive, assistPrimitive]) => {
    console.log(positions, primitive, assistPrimitive);
    // for (let i = 0; i < assistPrimitive.length; i++) {
    //   console.log(assistPrimitive[i]);
    //   lineHandler._drawLayer.remove(assistPrimitive[i]);
    //   }
  }
);
// 绘制面
polygonHandler.drewEvent.addEventListener(function ([
  positions,
  primitive,
  assistPrimitive,
  assistLines
]) {
  /*
  for (let i = 0; i < assistPrimitive.length; i++) {
    console.log(assistPrimitive[i]);
    polygonHandler._drawLayer.remove(assistPrimitive[i]);
  }
  for (let i = 0; i < assistLines.length; i++) {
    console.log(assistLines[i]);
    polygonHandler._drawLayer.remove(assistLines[i]);
  }
  */
});

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

  const drawPointBtn = pane.addButton({
    title: "绘制点"
  });

  drawPointBtn.on("click", () => {
    pointHandler.activate();
  });

  const drawLineBtn = pane.addButton({
    title: "绘制线"
  });

  drawLineBtn.on("click", () => {
    lineHandler.activate();
  });

  const drawPolygonBtn = pane.addButton({
    title: "绘制面"
  });

  drawPolygonBtn.on("click", () => {
    polygonHandler.enableAssist = true;
    polygonHandler.activate();
  });

  const drawMarkerBtn = pane.addButton({
    title: "绘制标记"
  });

  drawMarkerBtn.on("click", () => {
    markerHandler.markerStyle = {
      image: "./img/f.png",
      width: 50,
      height: 50
    };
    markerHandler.activate();
  });

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

  clearBtn.on("click", () => {
    if (pointHandler) {
      pointHandler.clear();
    }
    if (lineHandler) {
      lineHandler.clear();
    }
    if (polygonHandler) {
      polygonHandler.clear();
    }
    if (markerHandler) {
      markerHandler.clear();
    }
  });

  const clearAllAssistBtn = pane.addButton({
    title: "清除所有绘制辅助点"
  });

  clearAllAssistBtn.on("click", () => {
    if (lineHandler) {
      lineHandler._clearAssistPrimitive();
    }
    if (polygonHandler) {
      polygonHandler._clearAssistPrimitive();
    }
  });
}

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