diff --git a/src/components/MapboxMaps/MapComponent.vue b/src/components/MapboxMaps/MapComponent.vue index 7f68fa76..bbd1803b 100644 --- a/src/components/MapboxMaps/MapComponent.vue +++ b/src/components/MapboxMaps/MapComponent.vue @@ -321,7 +321,6 @@ import shp from 'shpjs' fillStyle: { 'fill-color': '#ff0000', 'fill-opacity': 0.1 }, } ) - }, }); }); @@ -775,14 +774,10 @@ import shp from 'shpjs' // 分割图斑 const splitFeature = (line) => { - let splitLineString = { - type: 'Feature', - properties: {}, - geometry: { - coordinates: line, - type: 'LineString', - }, - }; + let turfSplitLine = turf.lineString(line); + + let splitLineString = turf.cleanCoords(turfSplitLine); + let splitPolygon = currentGeoJson.value; try { // let features = polygonCut(splitPolygon,splitLineString,0.1,"meters"); @@ -804,7 +799,6 @@ import shp from 'shpjs' splitAfterFeatures.features = tempFeatures; - console.log("tempFeatures",tempFeatures) // 分割数据返回父组件中 emit('handlerSplitPolygon', tempFeatures); @@ -812,7 +806,6 @@ import shp from 'shpjs' // handlerDetails(splitAfterFeatures); handlerUnDraw(); } catch (e) { - console.log("error error",e); createMessage.warning('分割线起点、终点需要在图斑外，多个图斑时需要点击选择需要分割的图斑！'); handlerUnDraw(); } @@ -1263,20 +1256,23 @@ import shp from 'shpjs' } } - let singleFeature = { type: 'Feature', properties: {}, geometry: { - coordinates: coordinates, + coordinates:[], type: 'Polygon', }, }; + if(coordinates){ + let turfPolygon = turf.polygon(coordinates); + singleFeature = turf.cleanCoords(turfPolygon); + } + // 处理清除数据重复的点数据 // 需要将传入的geojson处理成单面才能在分割工具中使用 currentGeoJson.value = singleFeature; - } if (map.getSource(source)) { diff --git a/src/components/MapboxMaps/lib/splitpolygon.ts b/src/components/MapboxMaps/lib/splitpolygon.ts index b514794e..2b0503c1 100644 --- a/src/components/MapboxMaps/lib/splitpolygon.ts +++ b/src/components/MapboxMaps/lib/splitpolygon.ts @@ -7,77 +7,63 @@ import { generateUUID } from '../src/tool'; * return 返回切割的面数据 */ export function splitPolygonByLine(line, outerPolygon) { - console.log("绘制的分割线数据",line); + console.log("************** 分割开始 start **************") + console.log("第1步：传入的分割线数据",line); + console.log("第2步：传入的分割面数据",outerPolygon) // 处理被分割的面数据坐标小数点保留多少位 let truncatedSplitter = turf.truncate(turf.lineString(outerPolygon.geometry.coordinates[0]), { precision: 7, }); - console.log("分割面转换为线数据",truncatedSplitter); - + console.log("第3步：分割面转换为线数据",truncatedSplitter); //求交点 let intersectCollection = turf.lineIntersect(line, truncatedSplitter); - console.log("与分割面的交点",intersectCollection); + console.log("第4步：与分割面的交点",intersectCollection); // printLngLat(intersectCollection.geometry.coordinates); - // 交点小于2个 返回null if (intersectCollection.features.length < 2) { return null; } - //将点合并成MultiPoint let intersectCombined = turf.combine(intersectCollection).features[0]; - console.log("分割后所有点数据",intersectCombined) + console.log("第5步：分割后所有点数据",intersectCombined) //分别获取切割线 let outerPieceCollection = turf.lineSplit(line, intersectCombined); let splitterPieceCollection = turf.lineSplit(truncatedSplitter, intersectCombined); - console.log("切割线被分割后所有线段",outerPieceCollection); + console.log("第6步：切割线被分割后所有线段",outerPieceCollection); - console.log("切割面被分割后所有线段",splitterPieceCollection); + console.log("第7步：切割面被分割后所有线段",splitterPieceCollection); //将所有的线段放到一起 let pieceCollection = turf.featureCollection( outerPieceCollection.features.concat(splitterPieceCollection.features), ); - - - console.log("所有分割线段",pieceCollection); - + console.log("第8步：所有分割线段",pieceCollection); //使用turf将闭合线组成多边形 let polygonCollection = turf.polygonize(pieceCollection); - console.log("分割线合并面数据",polygonCollection) + console.log("第9步：分割线合并面数据",polygonCollection) //对多边形进行判断，切割外的多边形丢弃 let innerPolygons = polygonCollection.features.filter((polygon) => { // 获取多边形质心 多边形不规则时有问题 - // let center = turf.centroid(polygon); + // let newcenter = turf.centroid(polygon); + let randomCenterPoint = getRandomPointInPolygon(polygon); // 获取多边形表面一点 let newcenter = turf.pointOnFeature(polygon); - - // 判断点是否在被分割图斑内 // 图斑中心点 - let centerPoint = turf.point(newcenter.geometry.coordinates); - - // 图斑面 - let outPolygon = turf.polygon(outerPolygon.geometry.coordinates) - // return turf.booleanPointInPolygon(centerPoint, outPolygon); - - // let innerPoint = getRandomPointInPolygon(outPolygon); - - // 获取多边形边界 - // let bbox = turf.bbox(outPolygon); // 获取多边形的边界框 - - // return turf.booleanPointInPolygon(randomPoint.features[0], outPolygon); - + let centerPoint = turf.point(randomCenterPoint.geometry.coordinates); + console.log('第10步：封闭图形中心点数据',randomCenterPoint,centerPoint) return turf.booleanWithin(centerPoint, outerPolygon); }); + + console.log("第11步：返回最终处理后的数据",innerPolygons) // let innerPolygons = polygonCollection.features; //处理镂空数据（多处镂空数据会导致计算错误，因为polygonize方法无法正常的返回数据） @@ -97,31 +83,12 @@ export function splitPolygonByLine(line, outerPolygon) { }); } + // 每个图斑配置UUID innerPolygons.forEach((item, index) => { innerPolygons[index].properties.id = generateUUID(); - // console.log("innerPolygons_length",innerPolygons[index].geometry.coordinates[0].length); - // console.log("innerPolygons_array",innerPolygons[index].geometry.coordinates[0]) - // console.log("innerPolygons_length",innerPolygons[index].geometry.coordinates[0].length); - // console.log("innerPolygons_string",JSON.stringify(innerPolygons[index].geometry.coordinates[0])); }); - - // let arr = JSON.parse(JSON.stringify(innerPolygons)) - - // arr.forEach((item, index) => { - // arr[index].properties.id = generateUUID(); - - // if((arr[index].geometry.coordinates[0][0][0] == arr[index].geometry.coordinates[0][arr[index].geometry.coordinates[0].length-1][0]) && arr[index].geometry.coordinates[0][0][1] == arr[index].geometry.coordinates[0][arr[index].geometry.coordinates[0].length-1][1]){ - - // }else{ - // arr[index].geometry.coordinates[0].push(arr[index].geometry.coordinates[0][0]) - // console.log("coordinates789",arr); - - // } - // }); - - + console.log("************** 分割结束 end **************") return innerPolygons; - } function getRandomPointInPolygon(polygon) { @@ -130,12 +97,12 @@ function getRandomPointInPolygon(polygon) { do { point = turf.randomPoint(1, {bbox: bbox}).features[0]; // 从边界框中生成一个随机点 - } while (!turf.booleanPointInPolygon(point, polygon)); // 检查点是否在多边形内部 - + } while (!turf.booleanWithin(point, polygon)); // 检查点是否在多边形内部 + // 直到找到在内部的点再返回数据 return point; } - +// 单个面数据分割 export function splitPolygonByFill(drawPolygon, outerPolygon) { console.log("drawPolygon",drawPolygon); diff --git a/src/components/MapboxMaps/src/MP.ts b/src/components/MapboxMaps/src/MP.ts index dccf2b1e..152e2db0 100644 --- a/src/components/MapboxMaps/src/MP.ts +++ b/src/components/MapboxMaps/src/MP.ts @@ -182,7 +182,6 @@ class BaseMP { featureCollection.features.push(polygonFeature); break; } - return featureCollection; } } @@ -305,6 +304,7 @@ export class MP extends BaseMP { } const startPoint = this.drawLocal[this.drawLocal.length - 1]; const endPoint = this.getDrawEndPoint(); + // 添加动态线 const lastGSL = this._generateGeoJSON([startPoint, endPoint], 'LineString'); this.crossesLine(this.drawLocal, [startPoint, endPoint]); @@ -387,7 +387,9 @@ export class MP extends BaseMP { clearTimeout(this.clickTimeout); // 清除超时变量 this.clickCount = 0; // 计数器清零 // 在这里编写双击事件的操作 - console.log('在这里编写双击事件的操作'); + + // 鼠标双击事件 + if (this.drawModel === this.drawModelChoose.LineString) { _this.drawLocal.push(e.lngLat); _this._currentDrawSource(); @@ -452,7 +454,6 @@ export class MP extends BaseMP { return false; } }; - // 判断是否相交 true 相交 false 不相交 crossesLine = (line1, line2) => { let _this = this; @@ -497,14 +498,13 @@ export class MP extends BaseMP { this.deleteDraw(); //禁用鼠标双击放大事件 this.map.doubleClickZoom.disable(); - this._changeMouseCursor('crosshair'); this.map.on('click', this.clickHandler); this.map.on('contextmenu', this.contextmenuHandler); this.map.on('mousemove', this.mousemoveHandler); }; draw = (shape) => { - if (this.drawModelChoose[shape]) { + if(this.drawModelChoose[shape]) { this.drawModel = this.drawModelChoose[shape]; this.drawStart(); } else {