feat：修改地块显示

src/views/old_mini/work_detail/components/areaMap.js

@@ -12,6 +12,7 @@ import Style from "ol/style/Style";
 import Icon from "ol/style/Icon";
 import { Fill, Text, Stroke } from "ol/style";
 import * as proj from "ol/proj";
+import { buffer as bufferExtent, getWidth, getHeight } from "ol/extent";
 import proj4 from "proj4"
 import { register } from "ol/proj/proj4";
 proj4.defs("EPSG:38572", "+proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +wktext +no_defs +type=crs");
@@ -25,7 +26,7 @@ class AreaMap {
         let that = this;
         let vectorStyle = new KMap.VectorStyle()
         this.gardenPolygonLayer = new KMap.VectorLayer("gardenPolygonLayer", 999, {
-            minZoom: 11,
+            minZoom: 8,
             maxZoom: 22,
             source: new VectorSource({}),
             style: function (f) {
@@ -100,11 +101,46 @@ class AreaMap {
    * 调整地图视图以适应地块范围
    */
     fitView() {
-        let extent = this.gardenPolygonLayer.source.getExtent()
-        if (extent) {
-            // 地图自适应到区域可视范围
-            this.kmap.getView().fit(extent, { duration: 50, padding: [80, 80, 80, 80] });
+        if (!this.kmap?.map) return;
+        const map = this.kmap.map;
+        map.updateSize();
+
+        let extent = this.gardenPolygonLayer.source.getExtent();
+        if (!extent || !Number.isFinite(extent[0])) return;
+
+        const ew = getWidth(extent);
+        const eh = getHeight(extent);
+        if (ew <= 0 || eh <= 0) return;
+
+        // 略外扩，避免描边贴边、视觉上像被裁切
+        extent = bufferExtent(extent, Math.max(ew, eh) * 0.04);
+
+        const size = map.getSize();
+        if (!size || size[0] < 4 || size[1] < 4) return;
+        const [sw, sh] = size;
+
+        // padding 不能过大：小高度容器里固定 80 会导致内框高度为负，地块无法完整显示
+        let padX = Math.max(8, Math.min(48, Math.floor(sw * 0.1)));
+        let padY = Math.max(8, Math.min(48, Math.floor(sh * 0.1)));
+        let padTop = Math.min(sh - padY - 4, padY + 14);
+        let padBottom = padY;
+        let padLeft = padX;
+        let padRight = padX;
+        if (padTop + padBottom >= sh - 2) {
+            const p = Math.max(4, Math.floor(sh / 6));
+            padTop = padBottom = p;
         }
+        if (padLeft + padRight >= sw - 2) {
+            const p = Math.max(4, Math.floor(sw / 6));
+            padLeft = padRight = p;
+        }
+
+        this.kmap.getView().fit(extent, {
+            size,
+            duration: 80,
+            padding: [padTop, padRight, padBottom, padLeft],
+            maxZoom: 22,
+        });
     }
 
     fitByGardenId(gardenId, hasMapAnimate) {

src/views/old_mini/work_detail/index.vue

@@ -238,7 +238,7 @@
 import { ElMessage } from "element-plus";
 import wx from "weixin-js-sdk";
 import customHeader from "@/components/customHeader.vue";
-import { ref, computed, onMounted, onActivated } from "vue";
+import { ref, computed, onMounted, onActivated, nextTick } from "vue";
 import { useRouter } from "vue-router";
 import { formatDate } from "@/common/commonFun";
 import ExecutePopup from "./components/executePopup.vue";
@@ -248,6 +248,7 @@ import { Popup } from "vant";
 import MapInfo from "./components/mapInfo.vue";
 import { useRoute } from "vue-router";
 import AreaMap from "./components/areaMap.js";
+import WKT from "ol/format/WKT.js";
 import { time } from "echarts";
 import imgFq1 from "@/assets/img/common/fq-1.png";
 import imgFq2 from "@/assets/img/common/fq-2.png";
@@ -331,9 +332,27 @@ const ecologicalExecutorOrg = computed(
 );
 const mapData = ref("MULTIPOLYGON(((107.995696309223 24.9716283493399, 107.997730748383 24.9701649808213, 107.997870541717 24.9690287881909, 107.998141205407 24.9672322951316, 107.995761744401 24.9662448188141, 107.994830780282 24.9679461334333, 107.995696309223 24.9716283493399)))")
 
+const wktFmt = new WKT();
+
+/** 从面/多多边形 WKT 取首坐标作为初始中心，initLayer 会 fit 到整块区域 */
+function wktCenterPointFromArea(wkt) {
+    const fallback = "POINT(113.1093017627431 22.57454083668)";
+    if (!wkt || typeof wkt !== "string") return fallback;
+    try {
+        const c = wktFmt.readGeometry(wkt).getFirstCoordinate();
+        return `POINT(${c[0]} ${c[1]})`;
+    } catch {
+        return fallback;
+    }
+}
+
 onActivated(() => {
 
-    areaMap.initMap("POINT(113.1093017627431 22.57454083668)", mapContainer.value);
+    nextTick(() => {
+        if (!mapContainer.value) return;
+        areaMap.initMap(wktCenterPointFromArea(mapData.value), mapContainer.value);
+        areaMap.initLayer(mapData.value);
+    });
 
     headerTitle.value = route.query?.title || '';
     if (headerTitle.value === '返青追肥') {
@@ -944,7 +963,8 @@ const areaMap = new AreaMap();
     }
 
     .map-container {
-        height: 140px;
+        /* 略增高，配合 fit 后更易看清整块地 */
+        height: 200px;
         width: 100%;
         clip-path: inset(0px round 5px);
     }