drawing-board/src/app/4dmap/index.ts

import { Polygons } from "./polygons";
import {
  register,
  BoundQueryPlugin,
  setGenerateStartId,
  inRevise,
  Poi,
  PoiAttrib,
  round,
} from "../../board";
import { PolygonsAttrib } from "./type";
import { Map } from "ol";
import { boundingExtent } from "ol/extent";
import "./icon";
import { Scale, ScaleAttrib } from "../../board/packages/scale/scale";

const boundJoinMap = (
  boundQuery: BoundQueryPlugin,
  mountDOM?: HTMLDivElement,
  map?: Map
) => {
  let mapView = map?.getView();
  const getMapBound = () => {
    return mapView.calculateExtent(map.getSize());
  };

  const setMapBound = (bound: number[]) => {
    const extent = boundingExtent([
      [bound[0], bound[1]],
      [bound[2], bound[3]],
    ]);
    mapView.fit(extent, {
      size: map.getSize(),
      padding: [0, 0, 0, 0], // 根据需要调整边距
    });

    // console.log(`每个像素代表的米数: ${metersPerPixel}`);
  };

  const setBoardBound = () => {
    if (mountDOM && map) {
      const bound = getMapBound();
      if (!boundQuery.bound || inRevise(boundQuery.bound, bound)) {
        boundQuery.setSize(mountDOM.offsetWidth, mountDOM.offsetHeight);
        boundQuery.setBound([bound[0], bound[3], bound[2], bound[1]]);
      }
    }
  };

  const setMap = (bindMap: Map) => {
    if (map) {
      mapView.removeEventListener("change:center", setBoardBound);
      mapView.removeEventListener("change:resolution", setBoardBound);
      map.removeEventListener("moveend", setBoardBound);
    }
    mapView = bindMap.getView();
    mapView.addEventListener("change:center", setBoardBound);
    mapView.addEventListener("change:resolution", setBoardBound);

    map.addEventListener("moveend", setBoardBound);
    map = bindMap;
    setBoardBound();
  };

  boundQuery.enableMove((newBound) => {
    map && setMapBound(newBound);
    return true;
  });
  boundQuery.enableWheel((newBound) => {
    map && setMapBound(newBound);
    return true;
  });

  return {
    setMap,
    setBoardBound,
    setMountDom(dom: HTMLDivElement) {
      mountDOM = dom;
      setBoardBound();
    },
    destory() {
      mapView.removeEventListener("change:center", setBoardBound);
      mapView.removeEventListener("change:resolution", setBoardBound);
      map.removeEventListener("moveend", setBoardBound);
    },
  };
};

function captureMap(canvas: HTMLCanvasElement, map: Map, pixelRatio) {
  // 创建一个临时canvas用于绘制截图
  const size = map.getSize();
  canvas.width = size[0] * pixelRatio;
  canvas.height = size[1] * pixelRatio;
  canvas.style.width = size[0] + "px";
  canvas.style.height = size[1] + "px";

  const mapContext = canvas.getContext("2d");
  const mapCanvas = map.getViewport().querySelector("canvas")!;
  mapContext.drawImage(mapCanvas, 0, 0, canvas.width, canvas.height);
  return canvas.toDataURL();
}

const initBoard = register(
  { polygons: Polygons, compass: Poi, scale: Scale },
  { bound: new BoundQueryPlugin() }
);
setGenerateStartId(5000000);
export const createBoard = (
  props: {
    dom?: HTMLDivElement;
    store?: PolygonsAttrib & { id: string };
    map?: Map;
  } = {}
) => {
  const compass: PoiAttrib = {
    id: "0",
    x: 0,
    y: 0,
    type: "compass",
  };
  const scale: ScaleAttrib = {
    id: "0",
    left: 20,
    bottom: 20,
    minWidth: 100,
    maxWidth: 150,
  };

  const data = props.store || [
    { id: "0", points: [], polygons: [], lines: [] },
  ];
  const board = initBoard(props.dom, { polygons: data, compass, scale }, false);
  const mapJoin = boundJoinMap(board.bound, props.dom, props.map);

  const setProps = (props: { dom?: HTMLDivElement; map?: Map } = {}) => {
    if (props.dom) {
      board.mount(props.dom);
      mapJoin.setMountDom(props.dom);
    }
    if (props.map) {
      mapJoin.setMap(props.map);
    }
  };
  setProps(props);
  let captureCanvas: HTMLCanvasElement;

  const scaleEntity = board.tree.entrys.scale[0] as Scale;
  scaleEntity.allowable = 0.01;
  scaleEntity.getScaleUnit = (data: number[]) => {
    if (!props.map) return;
    const mapView = props.map.getView();
    const projection = mapView.getProjection();
    const mpu = projection.getMetersPerUnit();
    return data[0] * mpu;
  };
  scaleEntity.getScaleText = (val: number) => {
    if (val > 1000) {
      let km = round(val / 1000, 1);
      let mkm = km % 1;
      km = Math.floor(km) + (mkm > 0.5 ? 1 : mkm < 0.5 ? 0 : 0.5);
      return km + " km";
    } else {
      return Math.floor(val) + " m";
    }
  };

  return {
    raw: board,
    scale: scaleEntity,
    setProps,
    getData() {
      return board.getData().polygons[0];
    },
    setData(polygon: PolygonsAttrib & { id: string }) {
      board.setData({ polygons: [polygon], compass, scale });
    },
    destory() {
      mapJoin.destory();
      board.destory();
    },
    get polygon() {
      return board.tree.children[0] as Polygons;
    },
    getPixelFromCoordinate(point: number[]) {
      return board.tree.getPixelFromStage(point);
    },
    async toDataURL(pixelRatio = 1) {
      const boardDataURL = board.tree.stage.toDataURL({
        pixelRatio,
        mimeType: '"image/jpeg"',
      });
      if (!props.map) {
        return boardDataURL;
      }

      const size = [board.tree.stage.width(), board.tree.stage.height()];
      if (!captureCanvas) {
        captureCanvas = document.createElement("canvas");
      }

      captureCanvas.width = size[0] * pixelRatio;
      captureCanvas.height = size[1] * pixelRatio;
      captureCanvas.style.width = size[0] + "px";
      captureCanvas.style.height = size[1] + "px";

      const captureCtx = captureCanvas.getContext("2d");
      captureCtx.clearRect(0, 0, captureCanvas.width, captureCanvas.height);

      captureCtx.save();
      captureMap(captureCanvas, props.map, pixelRatio);
      captureCtx.restore();
      return new Promise<string>((resolve, reject) => {
        const image = new Image();
        image.src = boardDataURL;
        image.onload = () => {
          captureCtx.drawImage(
            image,
            0,
            0,
            captureCanvas.width,
            captureCanvas.height
          );
          const dataURL = captureCanvas.toDataURL("image/jpeg");
          resolve(dataURL);
        };
        image.onerror = reject;
      });
    },
  };
};

export * from "../../board";
export * from "./polygons";
export * from "./type";
export * from "./path";
export * from "./point";