4pc/src/view/map/install.ts

import { TileType, createMap, Manage } from "./openlayer";
import { computed, ref, watch, watchEffect } from "vue";
import ScaleLine from "ol/control/ScaleLine";
import { createBoard } from "drawing-board";
import { Scene, ScenePoint, boardData, relicsId, scenes } from "@/store/scene";
import { router } from "@/router";
import { addOrUpdateDrawingFetch } from "@/request/drawing";

// ---------map---------

export const tileOptions: TileType[] = ["影像底图", "矢量底图"];
export const tileType = ref<TileType>(tileOptions[0]);
export const defaultCenter = [116.412611, 39.908866];

const addScale = (mapManage: Manage) => {
  const scaleLine = new ScaleLine({
    className: "scale-view",
    maxWidth: 150,
    minWidth: 100,
    units: "metric",
  });
  // 加载比例尺
  mapManage.map.addControl(scaleLine);

  watch(
    tileType,
    (type) => {
      const el = (scaleLine as any).element as HTMLDivElement;
      el.classList.add(type === "影像底图" ? "light" : "dark");
      el.classList.remove(type === "影像底图" ? "dark" : "light");
    },
    { flush: "post", immediate: true }
  );
};

export const mapManage = createMap();
mapManage.setCenter(defaultCenter);
watchEffect(() => mapManage.setTileType(tileType.value));
addScale(mapManage);

const noValidPoint = (pos: ScenePoint) => !pos.pos || pos.pos.length === 0;
const validScene = (scene: Scene) => !scene.scenePos.every(noValidPoint);

export const flyScene = (scene: Scene) => {
  console.log("flyScene", scene);
  const totalPos = [0, 0];
  let numCalc = 0;
  for (let i = 0; i < scene.scenePos.length; i++) {
    const coord = scene.scenePos[i].pos as number[];
    if (coord && coord.length > 0) {
      totalPos[0] += coord[0];
      totalPos[1] += coord[1];
      numCalc++;
    }
  }

  totalPos[0] /= numCalc;
  totalPos[1] /= numCalc;
  mapManage.map.getView().setCenter(totalPos);
};

export const gotoPointPage = (point: ScenePoint) => {
  router.push({
    name: queryMode.value ? "query-pano" : "pano",
    params: { pid: point.id },
  });
};

export const autoInitPos = () => {
  const scene = scenes.value.find(validScene);
  if (scene) {
    flyScene(scene);
    return true;
  } else {
    return false;
  }
};

watch(
  () => scenes.value.find(validScene)?.sceneCode,
  (code) => {
    code && autoInitPos();
  },
  { immediate: true }
);

// -------board------
export const board = createBoard({ map: mapManage.map });
watch(boardData, (data) => data && board.setData(data), {
  immediate: true,
  flush: "pre",
});

export const boardDataChange = (dataChange?: () => void) => {
  dataChange && dataChange();
  return addOrUpdateDrawingFetch({
    relicsId: relicsId.value.toString(),
    data: boardData.value,
  });
};

// -----------status----------

export const queryMode = computed(() =>
  router.currentRoute.value.name.toString().includes("query")
);