- 修改了`BdFenceInfoMapper.xml`，在查询中使用`ST_AsText`函数转换几何数据

- 更新了`BdFenceInfoServiceImpl`，在保存围栏信息时计算并设置中心点坐标
- 重构了前端`fence`组件，实现从数据库获取围栏列表并显示在地图上，同时优化了多边形坐标解析逻辑

ruoyi-system/src/main/java/com/ruoyi/bd/service/impl/BdFenceInfoServiceImpl.java

@@ -68,6 +68,9 @@ public class BdFenceInfoServiceImpl implements IBdFenceInfoService {
     @Override
     public int updateBdFenceInfo(BdFenceInfo bdFenceInfo) {
         bdFenceInfo.setUpdateTime(DateUtils.getNowDate());
+        Point polyCenter = GeoUtils.getPolyCenter(bdFenceInfo.getPoly());
+        bdFenceInfo.setCenterLat(polyCenter.getY());
+        bdFenceInfo.setCenterLng(polyCenter.getX());
         return bdFenceInfoMapper.updateBdFenceInfo(bdFenceInfo);
     }
 

ruoyi-system/src/main/resources/mapper/bd/BdFenceInfoMapper.xml

@@ -17,7 +17,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
     </resultMap>
 
     <sql id="selectBdFenceInfoVo">
-        select id, defence_name, poly, center_lng, center_lat, update_time, create_time, create_by, update_by from bd_fence_info
+        select id, defence_name, ST_AsText(poly) poly, center_lng, center_lat, update_time, create_time, create_by, update_by from bd_fence_info
     </sql>
 
     <select id="selectBdFenceInfoList" parameterType="BdFenceInfo" resultMap="BdFenceInfoResult">

ruoyi-ui/src/views/bd/fence/index.vue

@@ -76,7 +76,7 @@
 
 <script>
 
-import { addFenceInfo, updateFenceInfo } from '@/api/bd/fenceInfo';
+import { addFenceInfo, listFenceInfo, updateFenceInfo } from '@/api/bd/fenceInfo';
 import Pannel from '@/views/bd/pannel/index.vue';
 // this.drawtool = new BDLayers.Lib.Tools.CBDrawTool('mytool', this.mapView, 'Rectangle', true); // 绘制矩形，参数1：id，参数2：地图，参数3：绘制类型，参数4：是否可拖拽编辑
 // this.drawtool.enable(); // 开始绘制
@@ -150,51 +150,41 @@ export default {
     this.getFenceList();
   },
   methods: {
-    getFenceList() {
+    async getFenceList() {
       if (!this.layer) {
         this.layer = new BDLayers.Lib.Layer.CBVectorLayer('vl');
         window.map.addCustomLayers(this.layer);
       }
-      const result = [
-        {
-          id: 1,
-          name: '高空施工作业危险区域',
-        }, {
-          id: 2,
-          name: '危化品堆放区域',
-        },
-      ];
-      this.editingDrawGeom = null;
-      const polygon = this.drawPoly({
-        coordinates: [
-          [
-            [118.86318437, 31.52265586],
-            [118.86620514, 31.52541921],
-            [118.86520697, 31.52406319],
-            [118.86318437, 31.52265586],
-          ],
-        ],
-        bizAttr: {
-          name: 'test',
-        },
+      const { rows } = await listFenceInfo({
+        pageNum: 1,
+        pageSize: 10,
       });
-      this.layer.addGeometry(polygon);
-      result[0].polygon = polygon;
-      const polygon1 = this.drawPoly({
-        coordinates: [
-          [
-            [118.86318437, 31.52265586],
-            [118.86620514, 31.52541921],
-            [118.86520697, 31.52406319],
-            [118.86318437, 31.52265586],
-          ],
-        ],
-        bizAttr: {
-          name: 'test',
-        },
+      if (!rows || rows.length < 1) {
+        return;
+      }
+      const result = [];
+      rows.forEach(item => {
+        const {
+          id,
+          defenceName,
+          poly,
+        } = item;
+        console.log(this.polygonToCoordinates(poly));
+        const polygon = this.drawPoly({
+          coordinates: this.polygonToCoordinates(poly),
+          bizAttr: {
+            id,
+            name: defenceName,
+          },
+        });
+        this.layer.addGeometry(polygon);
+        result.push({
+          id,
+          name: defenceName,
+          polygon,
+        });
       });
-      this.layer.addGeometry(polygon1);
-      result[1].polygon = polygon1;
+      this.editingDrawGeom = null;
       this.fenceList = result;
       window.map.flyToPoint([118.86318437, 31.52265586], {
         zoom: 13,
@@ -203,6 +193,19 @@ export default {
         duration: 5000,
       });
     },
+    polygonToCoordinates(polygon) {
+      // 正则表达式匹配坐标点
+      const regex = /(-?\d+(\.\d+)?\s-?\d+(\.\d+)?)/g;
+      const matches = polygon.match(regex);
+      if (matches && matches.length > 0) {
+        return matches
+            .map(point => {
+              const [x, y] = point.trim().split(" ").map(Number);
+              return [x, y];
+            });;
+      }
+      return [];
+    },
     cancelEdit() {
       this.drawtool.clear();
       this.dialogVisible = false;