fix: 东莞市边界

src/views/warningHome/index.vue

@@ -178,7 +178,7 @@ onMounted(async () => {
         }
     });
     // 初始化区域选择器的默认值
-    initAreaDefaultValue();
+    // initAreaDefaultValue();
 
     // 窗口大小改变时更新地图尺寸
     const handleResize = () => {
@@ -194,12 +194,68 @@ onMounted(async () => {
     });
 });
 
+// 加载东莞市行政区边界（使用远程 GeoJSON 数据）
 const getVillageBoundary = async () => {
-    const res = await VE_API.warning.fetchVillageBoundary();
-    if (res.code === 0 && res.data) {
-        const villageBoundary = res.data;
-        console.log(villageBoundary);
-        boundaryLayer.initData(villageBoundary);
+    const url =
+        "https://birdseye-img.sysuimars.com/geojson/mlxy/%E4%B8%9C%E8%8E%9E%E8%A1%8C%E6%94%BF%E5%8C%BA.geojson";
+
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            console.error("获取行政区 GeoJSON 失败：", response.statusText);
+            return;
+        }
+
+        const geojson = await response.json();
+        if (!geojson || !Array.isArray(geojson.features)) {
+            console.error("行政区 GeoJSON 格式不正确：", geojson);
+            return;
+        }
+
+        // 将 GeoJSON MultiPolygon 转成 boundaryLayer 需要的 WKT 格式数据
+        const geoJsonMultiPolygonToWkt = (geometry) => {
+            if (!geometry || geometry.type !== "MultiPolygon" || !Array.isArray(geometry.coordinates)) {
+                return "";
+            }
+
+            const polygons = geometry.coordinates
+                .map((polygon) => {
+                    // polygon: [ [ [x, y], ... ] ]  => 每个 polygon 可能包含多个 ring
+                    const rings = polygon
+                        .map((ring) => {
+                            const coords = ring.map((coord) => `${coord[0]} ${coord[1]}`).join(", ");
+                            return `(${coords})`;
+                        })
+                        .join(", ");
+                    return `(${rings})`;
+                })
+                .join(", ");
+
+            return `MULTIPOLYGON (${polygons})`;
+        };
+
+        const villageBoundary = geojson.features
+            .map((f, index) => {
+                const wkt = geoJsonMultiPolygonToWkt(f.geometry);
+                if (!wkt) return null;
+                const props = f.properties || {};
+
+                return {
+                    id: props.code || props["区划码"] || index,
+                    name: props["地名"] || props.ENG_NAME || "行政区边界",
+                    geom: wkt,
+                };
+            })
+            .filter((item) => item);
+
+        if (!villageBoundary.length) {
+            console.warn("未能从 GeoJSON 中解析出有效的行政区边界");
+            return;
+        }
+
+        boundaryLayer && boundaryLayer.initData(villageBoundary);
+    } catch (error) {
+        console.error("加载行政区 GeoJSON 出错：", error);
     }
 };
 

src/views/warningHome/map/boundaryLayer.js

@@ -26,19 +26,34 @@ class BoundaryLayer {
         this.kmap = map
     }
 
-    initData(arr,opacity='') {
+    initData(arr, opacity = "") {
         if (this.boundaryLayer) {
             this.boundaryLayer.source.clear();
         }
-        if(arr.length>0){
+        if (arr.length > 0) {
             for (let item of arr) {
                 let feature = newAreaFeature(item);
                 this.boundaryLayer.addFeature(feature);
             }
-            // setTimeout(()=>{
-            //     this.kmap.fit(this.boundaryLayer.source.getExtent(), {padding:[100,100,100,100]});
-            // })
+            // 适配地图显示范围到当前边界范围
+            // setTimeout(() => {
+            //     const extent = this.boundaryLayer.source.getExtent();
+            //     if (extent && this.kmap && typeof this.kmap.fit === "function") {
+            //         this.kmap.fit(extent, { padding: [100, 100, 100, 100] });
+            //     }
+            // });
         }
+        this.fitView();
+    }
+
+    fitView() {
+        const source = this.boundaryLayer.source.getSource();
+        if (!source || source.getFeatures().length === 0) {
+            return;
+        }
+        let extent = this.boundaryLayer.source.getExtent();
+        // 地图自适应到区域可视范围
+        this.kmap.getView().fit(extent, { duration: 500, padding: [100, 100, 100, 100] });
     }
 
     toggleLayer(val) {