integrated_traffic_vue/src/views/BI/js/map.js

import { h, render, ref } from "vue";
import userDialog from "../components/dialog/user_dialog.vue";
import hotworkDialog from "../components/dialog/hotwork_dialog.vue";
import confinedspaceDialog from "../components/dialog/confinedspace_dialog.vue";
import highworkDialog from "../components/dialog/highwork_dialog.vue";
import cameraDialog from "../components/dialog/camera_dialog.vue";
import { Loadglb } from "./loadglb.js";

import { getUserByCardNo } from "@/request/map";
import {
  getConfinedSpaceView,
  getHighWorkView,
  getHotWorkView,
} from "@/request/eight_work.js";
import { getVideoManagerView } from "@/request/video_manager.js";
// const mapUrl =
//   "https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}";
const loadMap = 2;
let $entityTransparent = [];
const clickModel = new Map();
export const initMap = (corp) => {
  window.$scene = new window.CustomCesium.Scene(
    "map",
    corp.CORP_NAME,
    Number(loadMap)
  );
  window.$icy = window.$scene.getIcy();
  window.$carmer = new window.CustomCesium.Carmer(window.$icy);
  window.$icy.viewer.targetFrameRate = "30";
  window.$icy.viewer.scene.light = new window.Cesium.DirectionalLight({
    // 去除时间原因影响模型颜色
    direction: new window.Cesium.Cartesian3(
      0.35492591601301104,
      -0.8909182691839401,
      -0.2833588392420772
    ),
  });
  flyTo(corp.lng, corp.lat);
  // 亮度设置
  const stages = window.$icy.viewer.scene.postProcessStages;
  window.$icy.viewer.scene.brightness =
    window.$icy.viewer.scene.brightness ||
    stages.add(window.Cesium.PostProcessStageLibrary.createBrightnessStage());
  window.$icy.viewer.scene.brightness.enabled = true;
  window.$icy.viewer.scene.brightness.uniforms.brightness = Number(1.05); // 此处亮度值为倍数
  createGlb(); // 加载glb
  handleMouseClick(); // 加载鼠标拾取
};

// eslint-disable-next-line no-unused-vars
const flyTo = (lng, lat) => {
  window.$carmer.flyTo({
    // 视角飞入
    maxHeight: 1500,
    time: 1,
    position: [lng, lat, 200],
    angle: [0, -60, 0],
  });
};

const createGlb = () => {
  // 加载glb（建筑模型）
  const loadGlb = new Loadglb(window.$icy);
  loadGlb.model(window.CustomCesium.Model);
};

const handleMouseClick = () => {
  // 加载鼠标拾取
  const $mouse = new window.CustomCesium.Mouse(window.$icy);
  // 隐藏逻辑
  $mouse.mouseLeft((model) => {
    if (model._name === "建筑") {
      clickBuilding(model);
    }
    if (model._name.indexOf("人物") > -1) {
      clickPerson(model);
    }
    if (model._name.indexOf("动火作业") > -1) {
      clickHotwork(model);
    }
    if (model._name.indexOf("受限空间作业") > -1) {
      clickConfinedspaceWork(model);
    }
    if (model._name.indexOf("高处作业") > -1) {
      clickHighwork(model);
    }
    if (model._name.indexOf("摄像头") > -1) {
      clickCamera(model);
    }
  });
};

const clickBuilding = (model) => {
  if (
    Loadglb.modelMap[
      `${model._id.split("-")[3].slice(0, model._id.split("-")[3].length - 2)}`
    ]
  ) {
    if (
      clickModel.get(
        `${model._id
          .split("-")[3]
          .slice(0, model._id.split("-")[3].length - 2)}`
      ) === undefined
    ) {
      // 如果这个模型是第一次点击
      const m =
        Loadglb.modelMap[
          `${model._id
            .split("-")[3]
            .slice(0, model._id.split("-")[3].length - 2)}`
        ]; // 整栋楼的id集合
      // console.log(m, '整栋楼id');
      if (m.length > 1) {
        // 当前点击这建筑是否有多层
        m.forEach((id) => {
          const entity = window.$icy.viewer.entities.getById(id);
          if (model.id !== id) {
            // 排除当前点击楼层
            if (entity._icy.height > model._icy.height) {
              if (
                $entityTransparent.map((a) => a._id).indexOf(entity._id) === -1
              ) {
                $entityTransparent.push(entity);
              }
              // console.log(this.$entityTransparent, '被隐藏的模型楼层集合');
              entity.model.show = false;
            }
          } else {
            clickModel.set(
              `${model._id
                .split("-")[3]
                .slice(0, model._id.split("-")[3].length - 2)}`,
              model._icy.height
            ); // 存储这个模型数据
          }
        });
      }
    } else {
      // 如果点击过这个模型
      const m =
        Loadglb.modelMap[
          `${model._id
            .split("-")[3]
            .slice(0, model._id.split("-")[3].length - 2)}`
        ]; // 整栋楼的id集合
      // console.log(m, '整栋楼id');
      if (m.length > 1) {
        // 当前点击这建筑是否有多层
        if (
          model._icy.height ===
          clickModel.get(
            `${model._id
              .split("-")[3]
              .slice(0, model._id.split("-")[3].length - 2)}`
          )
        ) {
          m.forEach((id) => {
            const entity = window.$icy.viewer.entities.getById(id);
            entity.model.show = true;
            clickModel.delete(
              `${model._id
                .split("-")[3]
                .slice(0, model._id.split("-")[3].length - 2)}`
            );
          });
        } else {
          m.forEach((id) => {
            const entity = window.$icy.viewer.entities.getById(id);
            if (model.id !== id) {
              // 排除当前点击楼层
              if (entity._icy.height > model._icy.height) {
                if (
                  $entityTransparent.map((a) => a._id).indexOf(entity._id) ===
                  -1
                ) {
                  $entityTransparent.push(entity);
                }
                // console.log(this.$entityTransparent, '被隐藏的模型楼层集合');
                entity.model.show = false;
              }
            } else {
              clickModel.set(
                `${model._id
                  .split("-")[3]
                  .slice(0, model._id.split("-")[3].length - 2)}`,
                model._icy.height
              ); // 存储这个模型数据
            }
          });
        }
      }
    }
    // model.model.color = new Cesium.Color(1, 1, 1, 0.6);
  }
};

const clickPerson = async (model) => {
  const cacrdNo = model._id.replace("_name", "");
  const { pd } = await getUserByCardNo({ CARDNO: cacrdNo });
  handleDialog(userDialog, pd);
};
const clickCamera = async (model) => {
  console.log("clickCamera");
  const id = model._id;
  const pd = await getVideoManagerView({ VIDEOMANAGER_ID: id });
  pd.pd.cameraType = model._name;
  handleDialog(cameraDialog, pd);
};

const clickHotwork = async (model) => {
  const id = model._id;
  const pd = await getHotWorkView({ HOTWORK_ID: id });
  handleDialog(hotworkDialog, pd);
};

const clickConfinedspaceWork = async (model) => {
  const id = model._id;
  const pd = await getConfinedSpaceView({ CONFINEDSPACE_ID: id });
  handleDialog(confinedspaceDialog, pd);
};

const clickHighwork = async (model) => {
  const id = model._id;
  const pd = await getHighWorkView({ HIGHWORK_ID: id });
  handleDialog(highworkDialog, pd);
};

const handleDialog = (component, pd) => {
  const visible = ref(false);
  // 创建一个新节点，用来容纳 modal
  const node = document.createElement("div");
  visible.value = true;
  // 使用 `h` 创建虚拟节点，其中ModalsConfirm 是做好的 Vue SFC
  const vnode = h(component, {
    visible,
    "onUpdate:visible": (event) => {
      visible.value = event;
      if (!event) {
        document.body.removeChild(node);
      }
    },
    pd: pd || {},
  });
  // 使用 `render` 将虚拟节点添加到 DOM 树里
  render(vnode, node);
  document.body.appendChild(node);
};
// 还原建筑物
export const reduction = () => {
  // 揭盖一键还原
  if ($entityTransparent.length !== 0) {
    $entityTransparent = $entityTransparent.forEach((item) => {
      item.model.color = new window.Cesium.Color(1, 1, 1, 1);
      item.model.show = true;
    });
    $entityTransparent = [];
  }
};

export const addEntity = (
  collection,
  id,
  name,
  label,
  lon,
  lat,
  height,
  img
) => {
  const labelPixelOffset = new window.Cesium.Cartesian2(0, -55);
  const obj = {};
  obj.entity = window.$icy.viewer.entities.add(
    new window.Cesium.Entity({
      id,
      name,
      position: window.Cesium.Cartesian3.fromDegrees(lon, lat, height),
      billboard: {
        image: img,
        height: 36,
        width: 30,
        verticalOrigin: window.Cesium.VerticalOrigin.BOTTOM,
        horizontalOrigin: window.Cesium.HorizontalOrigin.CENTER,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
      },
      label: {
        text: label,
        font: "13px sans-serif",
        pixelOffset: labelPixelOffset,
        showBackground: true,
        // 地图上扎点的名字背景色
        // eslint-disable-next-line new-cap
        backgroundColor: new window.Cesium.Color.fromCssColorString(
          "rgba(20, 58, 142, 1)"
        ),
        backgroundPadding: new window.Cesium.Cartesian2(7, 5),
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
      },
    })
  );
  obj.show = (e) => {
    obj.entity.show = e;
  };
  obj.destroy = () => {
    window.$icy.viewer.entities.remove(obj.entity);
  };
  collection.add(obj);
};