套索工具(超叼版)

src/components/openLayersMap/index.vue

@@ -77,8 +77,10 @@ import { Vector as VectorSource } from 'ol/source'; // OpenLayers的矢量数据
 import { Circle, Style, Stroke, Fill, Icon, Text } from 'ol/style'; // OpenLayers的样式类，用于定义图层的样式，包括圆形样式、基本样式、边框、填充和图标
 import LineString from 'ol/geom/LineString'; // OpenLayers的线几何类，用于表示线状的地理数据
 import Polygon from 'ol/geom/Polygon'; // OpenLayers的多边形几何类，用于表示面状的地理数据
+import GeoJSON from 'ol/format/GeoJSON';
 import * as turf from '@turf/turf';
-import { FeatureCollection } from 'geojson';
+import { FeatureCollection, Geometry } from 'geojson';
+import { MapViewFitter } from '@/utils/setMapCenter';
 import { TreeInstance } from 'element-plus';
 import { addProjectFacilities, addProjectPilePoint, addProjectSquare, listDXFProject, addInverter, addBoxTransformer } from '@/api/project/project';
 import { BatchUploader } from '@/utils/batchUpload';
@@ -123,15 +125,21 @@ const jsonData = computed(() => {
   });
   return arr; // treeData.value;
 });
-console.log(jsonData);
-const handlePosition = (data: any, node) => {
-  //切换中心点
-  const featureCollection: FeatureCollection = { type: 'FeatureCollection', features: treeData.value[data.index].features } as FeatureCollection;
+const handlePosition = (data: any, node: any) => {
+  const fitter = new MapViewFitter(map); // 传入你的 OpenLayers 地图实例
+  const features = treeData.value[data.index]?.features; //features数组
+  console.log('🚀 ~ handlePosition ~ features:', features);
 
-  centerPosition.value = fromLonLat(turf.center(featureCollection).geometry.coordinates);
+  if (features?.length) {
+    const featureCollection: FeatureCollection<Geometry> = {
+      type: 'FeatureCollection',
+      features
+    };
 
-  map.getView().setCenter(centerPosition.value);
+    fitter.fit(featureCollection);
+  }
 };
+
 const handleCheckChange = (data: any, bool: boolean) => {
   if (isMenuVisible.value) isMenuVisible.value = false;