pnpm install jszip; pnpm install shp.js
parent
b631f44dc9
commit
8dd7788edb
|
|
@ -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)) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue