shp图斑分割

index.html

@@ -15,7 +15,9 @@
     <link href="/mapboxgl/mapbox-gl.css" rel="stylesheet">
     <script src="/mapboxgl/mapbox-gl.js"></script>
 
-    <script src="/turf.min.js"></script>
+    <!-- <script src="/turf.min.js"></script> -->
+
+    <script src="https://cdn.jsdelivr.net/npm/@turf/turf@7.0.0/turf.min.js"></script>
 
     <!-- 腾讯云视频直播 -->
     <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.min.css" rel="stylesheet" />

src/components/MapboxMaps/MapComponent.vue

@@ -235,7 +235,7 @@
 
   // POLYGON分割函数
   import { polygonCut } from './lib/segmentation';
-  import { splitPolygonByLine, splitPolygonByFill } from './lib/splitpolygon';
+  import { splitPolygonByLine, splitPolygonByFill,splitPolygonByMultiFill} from './lib/splitpolygon';
 
   //  线分割
   import {chunkUtil} from './lib/chunkutil.ts';
@@ -286,6 +286,7 @@ import shp from 'shpjs'
 
       let geojson = JSON.parse(JSON.stringify(res))
 
+
       // 绘制导入的shapgefile图斑
       handlerDetails(
         res,
@@ -311,7 +312,8 @@ import shp from 'shpjs'
           )
         },
         async onOk() {
-          splitFeatureByFill(geojson.features[0].geometry.coordinates[0]);
+          // splitFeatureByFill(geojson.features[0].geometry.coordinates[0]);
+          splitFeatureByMultiFill(geojson);
           handlerDetails( 
             {type:"FeatureCollection",features:[]},
             'shapefileSource',
@@ -806,6 +808,7 @@ import shp from 'shpjs'
       // handlerDetails(splitAfterFeatures);
       handlerUnDraw();
     } catch (e) {
+      console.error(e);
       createMessage.warning('分割线起点、终点需要在图斑外，多个图斑时需要点击选择需要分割的图斑！');
       handlerUnDraw();
     }
@@ -814,22 +817,30 @@ import shp from 'shpjs'
   // 根据面分割
   const splitFeatureByFill = (fill) => {
 
-    let drawPolygon = {
+    // 去除重复点坐标
-      type: 'Feature',
+    let turfPolygon = turf.polygon([fill]);
-      properties: {
+    let drawPolygon = turf.cleanCoords(turfPolygon);
-        id:null,
+    console.log("drawPolygon",drawPolygon);
-      },
+
-      geometry: {
+    // let drawPolygon = {
-        coordinates: [fill],
+    //   type: 'Feature',
-        type: 'Polygon',
+    //   properties: {
-      },
+    //     id:null,
-    };
+    //   },
+    //   geometry: {
+    //     coordinates: [fill],
+    //     type: 'Polygon',
+    //   },
+    // };
+
     let splitPolygon = currentGeoJson.value;
-
+    try{
-    let features = splitPolygonByFill(drawPolygon, splitPolygon);
+      splitPolygonByFill(drawPolygon, JSON.parse(JSON.stringify(splitPolygon))).then(features=>{
-
+        if(features){
+          features?.forEach((item,index)=>{
+            features[index].properties.id = generateUUID();
+          })
           let tempFeatures = JSON.parse(JSON.stringify(features))
-
           let splitAfterFeatures = {
             type: 'FeatureCollection',
             features: [],
@@ -837,7 +848,35 @@ import shp from 'shpjs'
           splitAfterFeatures.features = tempFeatures;
           emit('handlerSplitPolygon', tempFeatures);
           handlerUnDraw();
+        }
+      })
+    }catch(e){
+      console.log(e);
+      createMessage.warning('分割失败，请重新绘制数据！');
+      handlerUnDraw();
+    }
+    
   };
+  // shapefile多面分割数据
+  const splitFeatureByMultiFill = (geojson)=>{
+    let splitPolygon = currentGeoJson.value;
+    splitPolygonByMultiFill(geojson.features,JSON.parse(JSON.stringify(splitPolygon))).then(features=>{
+        if(features){
+            features?.forEach((item,index)=>{
+              features[index].properties.id = generateUUID();
+            })
+            let tempFeatures = JSON.parse(JSON.stringify(features))
+            let splitAfterFeatures = {
+              type: 'FeatureCollection',
+              features: [],
+            };
+            splitAfterFeatures.features = tempFeatures;
+            emit('handlerSplitPolygon', tempFeatures);
+            handlerUnDraw();
+        }
+    })
+  }
+
   //绘制点
   const handlerDrawPoint = () => {
     mp.draw('Point');

src/components/MapboxMaps/lib/splitpolygon.ts

@@ -1,3 +1,4 @@
+import { reject } from 'lodash-es';
 import { generateUUID } from '../src/tool';
 
 /**
@@ -77,7 +78,8 @@ export function splitPolygonByLine(line, outerPolygon) {
     innerPolygons = innerPolygons.map((polygon) => {
       let diff = polygon;
       turf.featureEach(holeCollection, (hole) => {
-        diff = turf.difference(diff, hole);
+        // diff = turf.difference(diff, hole);
+        diff = turf.difference(turf.featureCollection([diff, hole]))
       });
       return diff;
     });
@@ -91,6 +93,7 @@ export function splitPolygonByLine(line, outerPolygon) {
   return innerPolygons;
 }
 
+// 获取多边形内随机点
 function getRandomPointInPolygon(polygon) {
   const bbox = turf.bbox(polygon); // 获取多边形的边界框
   let point;
@@ -103,27 +106,81 @@ function getRandomPointInPolygon(polygon) {
 }
 
 // 单个面数据分割
-export function splitPolygonByFill(drawPolygon, outerPolygon) {
+export async function splitPolygonByFill(drawPolygon, outerPolygon) {
 
-  console.log("drawPolygon",drawPolygon);
+  return new Promise((resolve,reject)=>{
-  console.log("outerPolygon",outerPolygon)
+    try{
+      console.log("第1步：传入的绘制面数据",drawPolygon);
+      console.log("第2步：传入的被切割面数据",outerPolygon)
       
-  var polygon1 = turf.polygon(drawPolygon.geometry.coordinates)
+      var polygon1 = turf.polygon(drawPolygon.geometry.coordinates);
       var polygon2 = turf.polygon(outerPolygon.geometry.coordinates);
-  var difference = turf.difference(polygon2,polygon1);
-  var intersection = turf.intersect(polygon2, polygon1);
     
-  intersection.properties.id = generateUUID();
+      // var intersection = turf.intersect(polygon1, polygon2);
-  difference.properties.id = generateUUID();
+      let intersection = turf.intersect(turf.featureCollection([polygon1, polygon2]));
+      console.log("第4步：获取绘制图斑和分割图斑的交集",JSON.stringify(polygon2),JSON.stringify(polygon1),intersection);
+      
+      var difference = turf.difference(turf.featureCollection([polygon2, polygon1]));
+      console.log("第3步：获取绘制图斑和分割图斑的差集",difference);
 
       let splitAfterFeatures = [intersection,difference];
+      setTimeout(function(){
+        console.log("splitAfterFeatures9876",splitAfterFeatures);
+      },3000)
+      resolve(splitAfterFeatures)
+    }catch(e){
+        console.log(e);
+        reject(null);
+    }
+  })
 
-  // splitAfterFeatures?.forEach((item,index)=>{
+}
-  //   splitAfterFeatures[index].properties?.id = generateUUID();
-  // })
 
-  return splitAfterFeatures;
+// 多面数据分割裁剪
+export async function splitPolygonByMultiFill(drawPolygons,outerPolygon){
 
+  return new Promise((resolve,reject)=>{
+      try{
+        console.log("drawPolygons",drawPolygons,outerPolygon);
+        // 所有结果集合
+        let resultArray = [];
+
+        // 绘制图斑和分割图斑集合数组
+        let featuresArray = [];
+        featuresArray.push(turf.polygon(outerPolygon.geometry.coordinates));
+
+        // 绘制图斑数组
+        let splitFeaturesArray = [];
+
+        // 求交集图斑
+        drawPolygons.forEach((item,index)=>{
+          let turfPolygon = turf.polygon(item.geometry.coordinates);
+          
+          // 取交集
+          let intersection = turf.intersect(turf.featureCollection([featuresArray[0],turfPolygon]));
+          if(intersection){
+            resultArray.push(intersection);
+          }
+
+          console.log("交集"+index+"：",intersection)
+          splitFeaturesArray.push(turfPolygon);
+        })
+
+        // 取差集
+        var difference = turf.difference(turf.featureCollection(featuresArray.concat(splitFeaturesArray)));
+        if(difference){
+          resultArray.push(difference);
+        }
+
+        // 全部图斑
+        console.log("resultArray",resultArray);
+
+        resolve(resultArray)
+        
+      }catch(e){
+        reject("分割失败！");
+      }
+  })
 }
 
 export function printLngLat(arr){