forked from integrated_whb/integrated_whb_vue
405 lines
12 KiB
JavaScript
405 lines
12 KiB
JavaScript
import { Loadglb } from "./loadglb.js";
|
||
|
||
const loadMap = 3;
|
||
let $entityTransparent = [];
|
||
const clickModel = new Map();
|
||
|
||
let enclosure = null;
|
||
let entities = null;
|
||
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
|
||
),
|
||
});
|
||
const [wgsLat, wgsLon] = bd09ToWgs84(corp.LATITUDE, corp.LONGITUDE);
|
||
flyTo(wgsLon, wgsLat);
|
||
// 亮度设置
|
||
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
|
||
};
|
||
|
||
const bd09ToWgs84 = (bdLat, bdLon) => {
|
||
const x_pi = (Math.PI * 3000.0) / 180.0;
|
||
const x = bdLon - 0.0065;
|
||
const y = bdLat - 0.006;
|
||
const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
|
||
const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
|
||
const gcjLon = z * Math.cos(theta);
|
||
const gcjLat = z * Math.sin(theta);
|
||
|
||
let dlat = transformlat(gcjLon - 105.0, gcjLat - 35.0);
|
||
let dlng = transformlng(gcjLon - 105.0, gcjLat - 35.0);
|
||
const radlat = (gcjLat / 180.0) * Math.PI;
|
||
let magic = Math.sin(radlat);
|
||
magic = 1 - 0.006693421622965943 * magic * magic;
|
||
const sqrtmagic = Math.sqrt(magic);
|
||
dlat =
|
||
(dlat * 180.0) /
|
||
(((6378245.0 * (1 - 0.006693421622965943)) / (magic * sqrtmagic)) *
|
||
Math.PI);
|
||
dlng =
|
||
(dlng * 180.0) / ((6378245.0 / sqrtmagic) * Math.cos(radlat) * Math.PI);
|
||
const mglat = gcjLat + dlat;
|
||
const mglng = gcjLon + dlng;
|
||
const wgsLon = gcjLon * 2 - mglng;
|
||
const wgsLat = gcjLat * 2 - mglat;
|
||
|
||
return [wgsLat, wgsLon];
|
||
};
|
||
|
||
const transformlat = (lng, lat) => {
|
||
let ret =
|
||
-100.0 +
|
||
2.0 * lng +
|
||
3.0 * lat +
|
||
0.2 * lat * lat +
|
||
0.1 * lng * lat +
|
||
0.2 * Math.sqrt(Math.abs(lng));
|
||
ret +=
|
||
((20.0 * Math.sin(6.0 * lng * Math.PI) +
|
||
20.0 * Math.sin(2.0 * lng * Math.PI)) *
|
||
2.0) /
|
||
3.0;
|
||
ret +=
|
||
((20.0 * Math.sin(lat * Math.PI) + 40.0 * Math.sin((lat / 3.0) * Math.PI)) *
|
||
2.0) /
|
||
3.0;
|
||
ret +=
|
||
((160.0 * Math.sin((lat / 12.0) * Math.PI) +
|
||
320 * Math.sin((lat * Math.PI) / 30.0)) *
|
||
2.0) /
|
||
3.0;
|
||
return ret;
|
||
};
|
||
// 纬度转换
|
||
const transformlng = (lng, lat) => {
|
||
let ret =
|
||
300.0 +
|
||
lng +
|
||
2.0 * lat +
|
||
0.1 * lng * lng +
|
||
0.1 * lng * lat +
|
||
0.1 * Math.sqrt(Math.abs(lng));
|
||
ret +=
|
||
((20.0 * Math.sin(6.0 * lng * Math.PI) +
|
||
20.0 * Math.sin(2.0 * lng * Math.PI)) *
|
||
2.0) /
|
||
3.0;
|
||
ret +=
|
||
((20.0 * Math.sin(lng * Math.PI) + 40.0 * Math.sin((lng / 3.0) * Math.PI)) *
|
||
2.0) /
|
||
3.0;
|
||
ret +=
|
||
((150.0 * Math.sin((lng / 12.0) * Math.PI) +
|
||
300.0 * Math.sin((lng / 30.0) * Math.PI)) *
|
||
2.0) /
|
||
3.0;
|
||
return ret;
|
||
};
|
||
|
||
// 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);
|
||
};
|
||
|
||
// eslint-disable-next-line no-unused-vars
|
||
export const handleMouseClick = (model_id) => {
|
||
// 加载鼠标拾取
|
||
const $mouse = new window.CustomCesium.Mouse(window.$icy);
|
||
// 隐藏逻辑
|
||
$mouse.mouseLeft((model) => {
|
||
if (model._name === "建筑") {
|
||
if (model_id) model_id.value = model._id;
|
||
clickBuilding(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);
|
||
}
|
||
};
|
||
|
||
// 还原建筑物
|
||
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 handleEnclosure = (positions) => {
|
||
const $mouse = new window.CustomCesium.Mouse(window.$icy);
|
||
enclosure = new window.CustomCesium.Enclosure(window.$icy);
|
||
// 编辑围栏使用鼠标控件参照demo.html
|
||
enclosure.start();
|
||
$mouse.mouseRight((e) => {
|
||
enclosure.add(e.lng, e.lat, e.alt);
|
||
positions.push([e.lng, e.lat, e.alt]);
|
||
});
|
||
};
|
||
|
||
export const clearEnclosure = () => {
|
||
if (enclosure) {
|
||
try {
|
||
enclosure.show(false);
|
||
} catch (e) {}
|
||
enclosure.clear();
|
||
enclosure = new window.CustomCesium.Enclosure(window.$icy);
|
||
enclosure.start();
|
||
}
|
||
};
|
||
|
||
export const showEnclosure = (positions) => {
|
||
enclosure.finish();
|
||
enclosure.showDataSource(
|
||
positions, // 数据
|
||
30, // 高度
|
||
"yellow" // 颜色默认黄色
|
||
);
|
||
enclosure.show(true);
|
||
};
|
||
|
||
export const handlePut = (pos) => {
|
||
const $mouse = new window.CustomCesium.Mouse(window.$icy);
|
||
$mouse.mouseRight((e) => {
|
||
if (entities && entities.children) {
|
||
entities.children.forEach((e) => {
|
||
e.destroy();
|
||
});
|
||
entities = null;
|
||
}
|
||
entities = new window.CustomCesium.GroupModel("摆放地图实例");
|
||
addEntity("put_entity_00001", "put_entity_00001", e.lng, e.lat, e.alt);
|
||
pos.value = [e.lng, e.lat, e.alt];
|
||
});
|
||
};
|
||
|
||
const addEntity = (id, name, lon, lat, height) => {
|
||
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: "src/assets/images/map/peoIcon_green.png",
|
||
height: 36,
|
||
width: 30,
|
||
verticalOrigin: window.Cesium.VerticalOrigin.BOTTOM,
|
||
horizontalOrigin: window.Cesium.HorizontalOrigin.CENTER,
|
||
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||
},
|
||
})
|
||
);
|
||
obj.show = (e) => {
|
||
obj.entity.show = e;
|
||
};
|
||
obj.destroy = () => {
|
||
window.$icy.viewer.entities.remove(obj.entity);
|
||
};
|
||
entities.add(obj);
|
||
};
|
||
|
||
export const handleViewAlarm = (alarm, userList) => {
|
||
const canvas = document.createElement("canvas");
|
||
const width = 100;
|
||
const height = 30;
|
||
canvas.width = width;
|
||
canvas.height = height;
|
||
const ctx = canvas.getContext("2d");
|
||
ctx.fillStyle = "#000000";
|
||
ctx.fillRect(0, 0, 100, 50);
|
||
ctx.fillStyle = "#ff0000";
|
||
ctx.font = "normal bold 20px Arial";
|
||
ctx.textAlign = "center";
|
||
ctx.textBaseline = "middle";
|
||
ctx.fillText("聚集告警", width / 2, height / 2);
|
||
|
||
// 聚集圆锥特效
|
||
const Cone = new window.CustomCesium.Cone(window.$icy);
|
||
Cone.add(
|
||
[alarm.lon, alarm.lat, alarm.alt], // 坐标
|
||
alarm.color, // 圆锥颜色
|
||
{ width: 20, height: 40 }, // 圆锥的宽高
|
||
canvas, // 圆锥铭牌
|
||
"100201", // 圆锥实体id
|
||
"10020101" // 铭牌实体id
|
||
);
|
||
const labelPixelOffset = new window.Cesium.Cartesian2(0, -55);
|
||
userList.forEach((user) => {
|
||
const obj = {};
|
||
obj.entity = window.$icy.viewer.entities.add(
|
||
new window.Cesium.Entity({
|
||
id: "user_" + user.card,
|
||
name: user.psnName,
|
||
position: window.Cesium.Cartesian3.fromDegrees(
|
||
user.lon,
|
||
user.lat,
|
||
user.alt
|
||
),
|
||
billboard: {
|
||
image: "src/assets/images/map/peoIcon_blueImg.png",
|
||
height: 36,
|
||
width: 30,
|
||
verticalOrigin: window.Cesium.VerticalOrigin.BOTTOM,
|
||
horizontalOrigin: window.Cesium.HorizontalOrigin.CENTER,
|
||
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||
},
|
||
label: {
|
||
text: user.psnName,
|
||
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);
|
||
};
|
||
});
|
||
};
|