taoge_xiaodi/td_official
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

监控室，摄像头工作列表

Browse Source
This commit is contained in:
Teo
2025-06-19 19:58:33 +08:00
parent f59d725b20
commit ea98580b07
19 changed files with 1141 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/views/gisHome/component/map.vue
View File

@ -1,6 +1,5 @@
<template>
<div class="ol-map" id="olMap"></div>
<el-button class="btn" type="primary" @click="drawRectangle">绘制矩形</el-button>
</template>
<script setup>
@ -12,8 +11,7 @@ const initFacilities = async () => {
const res = await workScheduleDel('1933358821565095951');
console.log(res);
renderFacilitiesToCesium(sdk.viewer, res.data.photovoltaicPanelPositionList, 'Polygon', { flyToFirst: true });
renderFacilitiesToCesium(sdk.viewer, res.data.photovoltaicPanelPointPositionList, 'Point', { flyToFirst: true });
renderFacilitiesToCesium(sdk.viewer, res.data);
};
// 初始化 Cesium 地球
@ -41,22 +39,6 @@ const createEarth = () => {
new YJ.Tools(sdk).flyHome(0);
};
// 点击按钮时绘制一个矩形并飞行过去
const drawRectangle = () => {
const viewer = sdk.viewer;
const rectangleEntity = viewer.entities.add({
name: '测试矩形',
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(100.0, 30.0, 102.0, 32.0), // 西南角到东北角
material: Cesium.Color.YELLOW.withAlpha(0.5),
outline: true,
height: 2.5,
outlineColor: Cesium.Color.BLACK
}
});
viewer.flyTo(viewer.entities);
};
onMounted(async () => {
// 最早执行
window.CESIUM_BASE_URL = '/Cesium/';

288
src/views/gisHome/js/renderFacilities.js
View File

@ -1,153 +1,177 @@
import imgurl from '../img/guanfuban.png';
function getStatusColor(status) {
switch (status) {
case '0':
return Cesium.Color.RED.withAlpha(0.4);
case '1':
return Cesium.Color.GREEN.withAlpha(0.4);
default:
return Cesium.Color.BLUE.withAlpha(0.4);
}
}
//计算经纬度包围框 → 生成矩形边界（空心）
function getBoundingBoxRectangle(positionList) {
const lons = positionList.map((p) => parseFloat(p[0]));
const lats = positionList.map((p) => parseFloat(p[1]));
// function getBoundingBoxRectangle(positionList) {
// const lons = positionList.map((p) => parseFloat(p[0]));
// const lats = positionList.map((p) => parseFloat(p[1]));
const west = Math.min(...lons);
const east = Math.max(...lons);
const south = Math.min(...lats);
const north = Math.max(...lats);
// const west = Math.min(...lons);
// const east = Math.max(...lons);
// const south = Math.min(...lats);
// const north = Math.max(...lats);
return Cesium.Rectangle.fromDegrees(west, south, east, north);
}
// return Cesium.Rectangle.fromDegrees(west, south, east, north);
// }
export function renderFacilitiesToCesium(viewer, facilityList, type, options = {}) {
const dataSource = new Cesium.CustomDataSource('facility-layer');
// export function renderFacilitiesToCesium(viewer, facilityList, type, options = {}) {
// const dataSource = new Cesium.CustomDataSource('facility-layer');
facilityList.forEach((facility) => {
const { positionList, id, name, status, finishDate } = facility;
if (type === 'Polygon' && positionList.length >= 3) {
// 渲染 Polygon 面 + 贴图
// facilityList.forEach((facility) => {
// const { positionList, id, name, status, finishDate } = facility;
// if (type === 'Polygon' && positionList.length >= 3) {
// // 渲染 Polygon 面 + 贴图
// const cartesianPositions = positionList.map(([lon, lat]) => Cesium.Cartesian3.fromDegrees(parseFloat(lon), parseFloat(lat)));
// dataSource.entities.add({
// id,
// name,
// polygon: {
// hierarchy: new Cesium.PolygonHierarchy(cartesianPositions),
// material: new Cesium.ImageMaterialProperty({
// image: imgurl,
// repeat: new Cesium.Cartesian2(1.0, 1.0),
// transparent: true
// }),
// outline: false,
// height: 2.5
// },
// properties: {
// status,
// finishDate
// }
// });
// // 添加外框矩形线
// const rectangle = getBoundingBoxRectangle(positionList);
// dataSource.entities.add({
// name: `${name}_bbox`,
// rectangle: {
// coordinates: rectangle,
// fill: false,
// outline: true,
// outlineColor: Cesium.Color.YELLOW.withAlpha(0.8),
// outlineWidth: 2
// }
// });
// } else if (type === 'Point') {
// const [lonStr, latStr] = positionList;
// const lon = parseFloat(lonStr);
// const lat = parseFloat(latStr);
// dataSource.entities.add({
// id,
// name,
// position: Cesium.Cartesian3.fromDegrees(lon, lat),
// point: {
// pixelSize: 10,
// color:Cesium.Color.GREEN.withAlpha(0.4),
// outlineColor: Cesium.Color.WHITE,
// outlineWidth: 2
// },
// properties: {
// status,
// finishDate
// }
// });
// }
// });
// viewer.dataSources.add(dataSource).then(() => {
// if (options.flyToFirst && facilityList.length > 0) {
// const firstEntity = dataSource.entities.getById(facilityList[0].id);
// if (firstEntity) {
// viewer.flyTo(firstEntity);
// }
// }
// });
// }
export function renderFacilitiesToCesium(viewer, dataList) {
const pointCollection = new Cesium.PointPrimitiveCollection(); // gfbzd
const polygonDataSource = new Cesium.CustomDataSource('polygon-textured'); // gfb
const cylinderInstances = []; // gfblz
let flyTargetPositions = [];
dataList.forEach((data) => {
const { category, positionList, status } = data;
// ✅ gfbzd 点（PointPrimitive 浮空）
if (category === 'gfbzd' && positionList.length === 2) {
const [lon, lat] = positionList.map(parseFloat);
pointCollection.add({
position: Cesium.Cartesian3.fromDegrees(lon, lat, 1), // 高度1米
color: Cesium.Color.GREEN.withAlpha(0.9),
pixelSize: 6,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 1
});
}
// ✅ gfb 面（Entity + Image 贴图）
else if (category === 'gfb' && positionList.length >= 3) {
const cartesianPositions = positionList.map(([lon, lat]) => Cesium.Cartesian3.fromDegrees(parseFloat(lon), parseFloat(lat)));
dataSource.entities.add({
id,
name,
polygonDataSource.entities.add({
id: data.id,
name: data.name,
polygon: {
hierarchy: new Cesium.PolygonHierarchy(cartesianPositions),
material: new Cesium.ImageMaterialProperty({
image: imgurl,
repeat: new Cesium.Cartesian2(1.0, 1.0),
repeat: new Cesium.Cartesian2(1, 1),
transparent: true
}),
outline: false,
height: 2.5
},
properties: {
status,
finishDate
}
});
// 添加外框矩形线
const rectangle = getBoundingBoxRectangle(positionList);
dataSource.entities.add({
name: `${name}_bbox`,
rectangle: {
coordinates: rectangle,
fill: false,
height: 2.5,
outline: true,
outlineColor: Cesium.Color.YELLOW.withAlpha(0.8),
outlineWidth: 2
}
});
} else if (type === 'Point') {
const [lonStr, latStr] = positionList;
const lon = parseFloat(lonStr);
const lat = parseFloat(latStr);
dataSource.entities.add({
id,
name,
position: Cesium.Cartesian3.fromDegrees(lon, lat),
point: {
pixelSize: 10,
color:Cesium.Color.GREEN.withAlpha(0.4),
outlineColor: Cesium.Color.WHITE,
outlineWidth: 2
},
properties: {
status,
finishDate
outlineColor: Cesium.Color.GREEN.withAlpha(0.4)
}
});
}
// ✅ gfblz 数据：Cylinder + Primitive 批量渲染
// else if (category === 'gfblz' && positionList.length === 2) {
// const [lon, lat] = positionList.map(parseFloat);
// const position = Cesium.Cartesian3.fromDegrees(lon, lat, 1.25); // 圆柱中点浮空 1.25 米（高的一半）
// cylinderInstances.push(
// new Cesium.GeometryInstance({
// geometry: new Cesium.CylinderGeometry({
// length: 2.5, // 高度 2.5 米
// topRadius: 0.5,
// bottomRadius: 0.5,
// vertexFormat: Cesium.MaterialAppearance.VERTEX_FORMAT
// }),
// modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(position),
// attributes: {
// color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.GREEN.withAlpha(0.8))
// }
// })
// );
// }
});
viewer.dataSources.add(dataSource).then(() => {
if (options.flyToFirst && facilityList.length > 0) {
const firstEntity = dataSource.entities.getById(facilityList[0].id);
if (firstEntity) {
viewer.flyTo(firstEntity);
}
}
});
// ✅ 添加图层
viewer.scene.primitives.add(pointCollection); // gfbzd
viewer.dataSources.add(polygonDataSource); // gfb
// ✅ 批量添加圆柱 Primitive（gfblz）
if (cylinderInstances.length > 0) {
viewer.scene.primitives.add(
new Cesium.Primitive({
geometryInstances: cylinderInstances,
appearance: new Cesium.MaterialAppearance({
material: Cesium.Material.fromType('Color'),
translucent: true,
closed: false
}),
asynchronous: true
})
);
}
// ✅ fz 数据：仅用于定位，不渲染
if (dataList[0].category === 'fz') {
flyTargetPositions = dataList[0].positionList.map(([lon, lat]) => Cesium.Cartesian3.fromDegrees(parseFloat(lon), parseFloat(lat)));
}
// ✅ 飞到 fz 区域
if (flyTargetPositions.length > 0) {
const sphere = Cesium.BoundingSphere.fromPoints(flyTargetPositions);
viewer.camera.flyToBoundingSphere(sphere, {
duration: 2.0,
offset: new Cesium.HeadingPitchRange(0, -0.5, sphere.radius * 2)
});
}
}
// export function renderFacilitiesToCesium(viewer, dataList) {
// const pointCollection = new Cesium.PointPrimitiveCollection();
// const polygonInstances = [];
// dataList.forEach(data => {
// if (data.type === 'Point') {
// const { position, status } = data;
// const [lon, lat] = position;
// pointCollection.add({
// position: Cesium.Cartesian3.fromDegrees(lon, lat),
// color: getStatusColor(status),
// pixelSize: 6,
// outlineColor: Cesium.Color.WHITE,
// outlineWidth: 1,
// });
// }
// else if (data.type === 'Polygon' && data.positions.length >= 3) {
// const hierarchy = new Cesium.PolygonHierarchy(
// data.positions.map(([lon, lat]) => Cesium.Cartesian3.fromDegrees(lon, lat))
// );
// polygonInstances.push(
// new Cesium.GeometryInstance({
// geometry: new Cesium.PolygonGeometry({
// polygonHierarchy: hierarchy,
// vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
// }),
// attributes: {
// color: Cesium.ColorGeometryInstanceAttribute.fromColor(getStatusColor(data.status).withAlpha(0.6)),
// },
// })
// );
// }
// });
// // 添加点图层
// viewer.scene.primitives.add(pointCollection);
// // 添加面图层（Primitive）
// if (polygonInstances.length > 0) {
// viewer.scene.primitives.add(
// new Cesium.Primitive({
// geometryInstances: polygonInstances,
// appearance: new Cesium.PerInstanceColorAppearance({
// flat: true,
// translucent: true,
// }),
// asynchronous: true,
// })
// );
// }
// }