通视分析

---

import { Viewer, SightLine } from "joDVF";
import { Pane } from "tweakpane";
import {
  ScreenSpaceEventHandler,
  PointPrimitiveCollection,
  Cesium3DTileset,
  HeadingPitchRange,
  ScreenSpaceEventType,
  Color,
  Cartographic
} from "joCesium";

const { mapContainer, uiContainer } = createContainer();
const viewer = new Viewer(mapContainer);
const scene = viewer.scene;
const sightLines: any[] = [];
// 定义开始和结束点
let startPoint, endPoint;
const drawhander = new ScreenSpaceEventHandler(scene.canvas);
const points = scene.primitives.add(new PointPrimitiveCollection());

const dataBaseURL = "./assets/3dtilesets/dayanta/tileset.json";
try {
  const tileset = await Cesium3DTileset.fromUrl(dataBaseURL);
  scene.primitives.add(tileset);
  const boundingSphere = tileset.boundingSphere;
  const radius = boundingSphere.radius;
  viewer.zoomTo(tileset, new HeadingPitchRange(-1.2, -0.6, radius * 2.0));
} catch (e) {
  console.log(e);
}
addUI();
function addUI() {
  const pane = new Pane({
    container: uiContainer,
    title: "操作"
  });

  const chooseViewBtn = pane.addButton({
    title: "选取观察点"
  });

  chooseViewBtn.on("click", () => {
    drawhander.removeInputAction(ScreenSpaceEventType.LEFT_CLICK);
    // console.log(points);
    points.removeAll();
    sightLines.forEach((sightLine) => sightLine.clear());
    draw(function (point) {
      points.add({
        position: point,
        color: Color.WHITE
      });

      startPoint = point;
      drawhander.removeInputAction(ScreenSpaceEventType.LEFT_CLICK);
    });
  });

  const addPointBtn = pane.addButton({
    title: "添加目标点"
  });

  addPointBtn.on("click", () => {
    draw(function (point) {
      points.add({
        position: point,
        color: Color.DEEPSKYBLUE
      });

      drawhander.removeInputAction(ScreenSpaceEventType.LEFT_CLICK);
      endPoint = point;
      const sightLine = new SightLine(scene, startPoint, endPoint);
      // 设置可见线颜色
      // sightLine.visibleColor = Cesium.Color.AQUA;
      sightLine.build();
      sightLines.push(sightLine);
      // console.log('交点：', sightLine.getIntersection())
      points.add({
        position: sightLine.getIntersection(),
        color: Color.RED
      });
    });
  });

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

  clearBtn.on("click", () => {
    drawhander.removeInputAction(ScreenSpaceEventType.LEFT_CLICK);
    points.removeAll();
    sightLines.forEach((sightLine) => sightLine.clear());
  });
}

// 画点
function draw(cb) {
  drawhander.setInputAction(function (movement) {
    var cartesian = scene.pickPosition(movement.position);
    if (cartesian) {
      var cartographic = Cartographic.fromCartesian(cartesian);
      if (cartographic.height < 0) {
        var ray = viewer.camera.getPickRay(movement.position);
        cartesian = scene.globe.pick(ray, scene);
      }
    } else {
      cartesian = viewer.camera.pickEllipsoid(
        movement.position,
        scene.globe.ellipsoid
      );
    }
    if (typeof cb === "function") cb(cartesian);
  }, ScreenSpaceEventType.LEFT_CLICK);
}

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