forked from integrated_whb/integrated_whb_vue
309 lines
9.2 KiB
JavaScript
309 lines
9.2 KiB
JavaScript
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);
|
||
};
|