From 63016e8726ccb40f8cee5abf62f9c0dfedc4c8d2 Mon Sep 17 00:00:00 2001
From: SunTao <328867980@qq.com>
Date: Fri, 3 Jan 2025 10:00:44 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E7=97=85?=
 =?UTF-8?q?=E5=AE=B3=E7=AE=A1=E7=90=86=E8=AF=86=E5=88=AB=E5=9C=B0=E5=9B=BE?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/surface-map.vue                | 49 ++++++++++++++++---
 1 file changed, 42 insertions(+), 7 deletions(-)

diff --git a/src/views/xj/inspection/surface-management/components/surface-map.vue b/src/views/xj/inspection/surface-management/components/surface-map.vue
index 2f751dc..478c335 100644
--- a/src/views/xj/inspection/surface-management/components/surface-map.vue
+++ b/src/views/xj/inspection/surface-management/components/surface-map.vue
@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-14 14:49:21
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-24 16:09:46
+ * @LastEditTime: 2025-01-03 09:38:10
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\surface-management\components\surface-map.vue
  * @Description: 路面病害管理-地图组件
 -->
@@ -29,7 +29,6 @@
 <script>
 import FssmScroll from "@/components/scroll/fssm-scroll";
 import FssmMap from "@/components/map/fssm-map";
-import logo from "@/assets/xc.png";
 import { Point } from "ol/geom";
 import { Style, Icon } from "ol/style";
 import { Vector as VectorSource } from "ol/source";
@@ -79,11 +78,10 @@ export default {
     drawMapPoints() {
       this.$refs.contentMap.clearMapFeature();
       const features = [];
+      console.log(this.mapObject.data, "dsdfd");
+
       this.mapObject.data.forEach((element) => {
-        const point = new Point([
-          element.geometry[0],
-          element.geometry[1],
-        ]); // 修改坐标格式
+        const point = new Point([element.geometry[0], element.geometry[1]]); // 修改坐标格式
         const feature = new Feature({
           geometry: point,
           custom: {
@@ -98,7 +96,7 @@ export default {
             image: new Icon({
               crossOrigin: "anonymous",
               src: require(`@/assets/screen/index/${
-                this.mapLogeList[element.iconType]||"龟裂"
+                this.mapLogeList[element.iconType] || "龟裂"
               }.png`),
               // size: [40, 40],
               scale: 0.5, // 图标缩放比例
@@ -108,6 +106,14 @@ export default {
         ]);
         features.push(feature);
       });
+      // 修改地图中心点位
+      const pointArray = this.mapObject.data.map((item) => {
+        if (item.geometry) {
+          return [item.geometry[0], item.geometry[1]];
+        }
+        return [];
+      });
+      this.fitMapToPoints(pointArray);
       //设置地图的数据源
       const pointSource = new VectorSource({
         features,
@@ -124,6 +130,35 @@ export default {
         this.initEchart();
       });
     },
+
+    /**
+     * @description: 根据点位计算地图中心点
+     * @return {void}
+     */
+    fitMapToPoints(points) {
+      if (points.length > 0) {
+        // 创建一个空的 extent
+        let extent = [Infinity, Infinity, -Infinity, -Infinity];
+        // 计算所有点的边界框（extent）
+        points.forEach((point) => {
+          extent = [
+            Math.min(extent[0], point[0]),
+            Math.min(extent[1], point[1]),
+            Math.max(extent[2], point[0]),
+            Math.max(extent[3], point[1]),
+          ];
+        });
+
+        // 获取地图实例
+        const map = this.$refs.contentMap.instance.get("map");
+
+        // 使用 fit 方法根据边界框计算最佳缩放级别
+        map.getView().fit(extent, {
+          duration: 500, // 动画持续时间
+          padding: [10, 10, 10, 10], // 边缘填充
+        });
+      }
+    },
     /* 清除地图图层 */
     cleanLayer() {
       this.$emit("clearMap");