大屏界面渲染光伏板

src/views/gisHome/component/carousel.vue

@@ -31,9 +31,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-console.log(window.innerWidth);
-</script>
+<script lang="ts" setup></script>
 
 <style lang="scss" scoped>
 @import '../css/gis.scss';

src/views/gisHome/component/leftMain.vue

@@ -127,7 +127,6 @@ const getOrderData = async () => {
   if (res.code !== 200) return;
   orderOption.value = res.data;
   initOrderChart();
-  console.log(orderDataAxis);
 };
 
 const initMachinerycharts = () => {
@@ -538,6 +537,7 @@ onUnmounted(() => {
   window.removeEventListener('resize', debouncedHandleResize);
   stopMachineryScroll.value();
   stopOrderScroll.value();
+  myMachineryChart.value && myMachineryChart.value.dispose();
 });
 </script>
 

src/views/gisHome/component/map.vue

@@ -1,11 +1,25 @@
 <template>
   <div class="ol-map" id="olMap"></div>
+  <el-button class="btn" type="primary" @click="drawRectangle">绘制矩形</el-button>
 </template>
 
 <script setup>
-// const sdk = ref(null);
+import { workScheduleDel } from '@/api/progress/plan';
+import { renderFacilitiesToCesium } from '@/views/gisHome/js/renderFacilities';
+let sdk = null;
+
+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 });
+};
+
+// 初始化 Cesium 地球
 const createEarth = () => {
-  window.sdk = new YJ.YJEarth('olMap');
+  sdk = new YJ.YJEarth('olMap');
+
   YJ.Global.setDefaultView(sdk, {
     destination: { lng: 100, lat: 30, alt: 22099000 },
     orientation: {
@@ -14,19 +28,42 @@ const createEarth = () => {
       roll: 0.0
     }
   });
-  let layer = new YJ.Obj.ArcgisWXImagery(sdk, {
+
+  new YJ.Obj.ArcgisWXImagery(sdk, {
     show: true,
     layer_index: 1
   });
+
   YJ.Global.CesiumContainer(sdk, {
-    compass: false // 罗盘
+    compass: false
   });
+
   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/';
+
   await YJ.on();
   createEarth();
+  await initFacilities();
   console.log(YJ);
 });
 </script>
@@ -40,4 +77,10 @@ onMounted(async () => {
   width: 100%;
   height: calc(100vh);
 }
+.btn {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  z-index: 10;
+}
 </style>

src/views/gisHome/component/rightMain.vue

@@ -362,6 +362,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   window.removeEventListener('resize', debouncedHandleResize);
+  myMachineryChart.value && myMachineryChart.value.dispose();
 });
 </script>
 

src/views/gisHome/js/renderFacilities.js

@@ -0,0 +1,153 @@
+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]));
+
+  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);
+}
+
+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 面 + 贴图
+      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();
+//   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,
+//       })
+//     );
+//   }
+// }