Compare commits

...

2 Commits

3 changed files with 252 additions and 89 deletions

View File

@ -297,7 +297,7 @@
// POLYGON
import { polygonCut } from './lib/segmentation';
import { splitPolygonByLine, splitPolygonByFill,splitPolygonByMultiFill} from './lib/splitpolygon';
import { splitPolygonByLine, splitPolygonByFill,splitPolygonByMultiFill,handlerToMultiPolygonGeoJson} from './lib/splitpolygon';
// 线
import {chunkUtil} from './lib/chunkutil.ts';
@ -432,10 +432,10 @@
splitLandTypeForm.value.geomData = GeojsonToWkt(JSON.parse(JSON.stringify(geojson.geometry)));
landTypeVisible.value = false;
console.log("splitLandTypeForm",splitLandTypeForm.value)
//console.log("splitLandTypeForm",splitLandTypeForm.value)
let paramStr = "?"
for(let key in splitLandTypeForm.value){
console.log("key",key);
//console.log("key",key);
paramStr+=key+"="+splitLandTypeForm.value[key]+"&";
}
@ -629,7 +629,7 @@
map.on('click', (e) => {
// handlerPreviewFeatureInfo(e);
clickPoisition = e.lngLat;
console.log("clickPoisition",clickPoisition);
//console.log("clickPoisition",clickPoisition);
});
map.on('draw.selectionchange', (e) => {
@ -754,7 +754,7 @@
map.moveLayer('detailsLayerLine', allLayers[allLayers.length - 1].id);
allLayers.forEach(function (layer) {});
// allLayers.forEach(function(layer){
// console.log("layersssss",layer.id);
// //console.log("layersssss",layer.id);
// // map.moveLayer('detailsLayer', layer.id);
// });
}
@ -763,8 +763,8 @@
if (switchLayerControler) {
// var allLayers = map.getStyle().layers;
// allLayers.forEach(function(layer){
// console.log("layerEEEEEE",layer);
// console.log(layer.id);
// //console.log("layerEEEEEE",layer);
// //console.log(layer.id);
// // map.removeLayer(layer.id);
// });
// var allSources = Object.keys(map.style.sourceCaches);
@ -805,7 +805,7 @@
};
});
props.mapConfig.baseLayers?.forEach((item, index) => {
console.log('baselayers', item);
//console.log('baselayers', item);
let layer = JSON.parse(item.style);
let image = item.image.replace('\\', '/');
let layers = {
@ -821,7 +821,7 @@
handlerLayerChange();
},
};
console.log('layersssss', layers);
//console.log('layersssss', layers);
baseLayers.push(layers);
});
configlayers['地图底图'] = {
@ -959,18 +959,16 @@
let splitLineString = turf.cleanCoords(turfSplitLine);
let splitPolygon = currentGeoJson.value;
try {
// let features = polygonCut(splitPolygon,splitLineString,0.1,"meters");
splitPolygon?.geometry.coordinates[0].forEach((item,index)=>{
splitPolygon.geometry.coordinates[0][index] = [item[0],item[1]];
})
let editData = editGeoJson.value;
let features = splitPolygonByLine(splitLineString, splitPolygon);
// let features = splitPolygonByLine(splitLineString, editData.features[0]);
//console.log("editGeoJson",editGeoJson.value);
let features = splitPolygonByLine(splitLineString, JSON.parse(JSON.stringify(editGeoJson.value)));
if(features){
let tempFeatures = JSON.parse(JSON.stringify(features))
@ -1005,7 +1003,7 @@
//
let turfPolygon = turf.polygon([fill]);
let drawPolygon = turf.cleanCoords(turfPolygon);
console.log("drawPolygon",drawPolygon);
//console.log("drawPolygon",drawPolygon);
// let drawPolygon = {
// type: 'Feature',
@ -1019,11 +1017,8 @@
// };
let splitPolygon = currentGeoJson.value;
let editData = editGeoJson.value;
console.log("splitPolygon",splitPolygon);
console.log("splitPolygonEdut",editData.features[0]);
try{
splitPolygonByFill(drawPolygon, JSON.parse(JSON.stringify(editData.features[0]))).then(features=>{
splitPolygonByFill(drawPolygon, JSON.parse(JSON.stringify(editGeoJson.value))).then(features=>{
if(features){
features?.forEach((item,index)=>{
features[index].properties.id = generateUUID();
@ -1039,7 +1034,7 @@
}
})
}catch(e){
console.log(e);
//console.log(e);
createMessage.warning('分割失败,请重新绘制数据!');
handlerUnDraw();
}
@ -1048,11 +1043,7 @@
// shapefile
const splitFeatureByMultiFill = (geojson)=>{
let splitPolygon = currentGeoJson.value;
let editData = editGeoJson.value;
console.log("splitPolygon",splitPolygon);
console.log("EditGeoJsonMultiFill",JSON.stringify(editData.features[0]));
splitPolygonByMultiFill(geojson.features,JSON.parse(JSON.stringify(editData.features[0]))).then(features=>{
splitPolygonByMultiFill(geojson.features,JSON.parse(JSON.stringify(editGeoJson.value))).then(features=>{
if(features){
features?.forEach((item,index)=>{
features[index].properties.id = generateUUID();
@ -1239,13 +1230,13 @@
};
const handlerCheckboxChange = (item) => {
console.log('itemitemitem', item);
//console.log('itemitemitem', item);
handlerPreviewLayer(item);
};
//
const handlerPreviewLayer = (layer) => {
console.log('layersss', layer);
//console.log('layersss', layer);
handlerLayerControler(layer);
};
@ -1377,7 +1368,7 @@
};
arr.push(obj);
});
console.log('aaaa', arr);
//console.log('aaaa', arr);
emit('handlerDrawComplete', arr);
};
@ -1416,8 +1407,6 @@
for (let i = 0; i < features.length; i++) {
try {
let featureTemp = WktToGeojson(features[i]?.mapgeom);
console.log("💩💩💩传入wkt转为geojson",featureTemp);
let feature = {
id: generateUUID(),
@ -1425,7 +1414,6 @@
properties: {},
geometry: featureTemp,
};
geo.features.push(feature);
//
if (i == 0) {
@ -1450,7 +1438,12 @@
handlerInitDrawTool(geo, bool);
break;
case 'Details':
handlerDetails(geo);
handlerDetails(geo,'detailsSource',
'detailsLayer',
{
lineStyle: { 'line-color': '#fcf003', 'line-width': 3 },
fillStyle: { 'fill-color': '#fcf003', 'fill-opacity': 0.1 },
},true);
break;
default:
createMessage.error('请传入操作类型!');
@ -1458,9 +1451,7 @@
};
const currentGeoJson = ref({});
const editGeoJson = ref({});
const editGeoJson = ref({})
const handlerDetails = (
geojson,
source = 'detailsSource',
@ -1469,20 +1460,23 @@
lineStyle: { 'line-color': '#fcf003', 'line-width': 3 },
fillStyle: { 'fill-color': '#fcf003', 'fill-opacity': 0.1 },
},
isFirstLoad=false,
) => {
console.log("💩💩💩WKT处理为GeoJson后的数据",geojson);
let fillLayerName = layer + 'Fill';
let lineLayerName = layer + 'Line';
if (source == 'detailsSource' || source == "splitPolygonSource") {
//
let coordinates = null;
if(isFirstLoad){
geojson = handlerToMultiPolygonGeoJson(geojson);
}else{
}
let coordinates = null;
editGeoJson.value = geojson.features[0];
if (geojson.features.length>0 && geojson.features[0].geometry.type == 'MultiPolygon') { //
//
coordinates = geojson.features[0].geometry.coordinates[0];
@ -1515,12 +1509,7 @@
// geojson使
currentGeoJson.value = singleFeature;
editGeoJson.value = JSON.parse(JSON.stringify(geojson));
console.log("EditGeoJsonIn",editGeoJson.value);
}
if (map.getSource(source)) {
map.getSource(source).setData(geojson);
@ -1544,10 +1533,7 @@
paint: style.lineStyle,
});
map.on('click', fillLayerName, function (e) {
// handlerPreviewFeatureInfo(e);
if (e.features.length > 0) {
var feature = e.features[0];
emit('onFeatureClick', feature);
@ -1621,7 +1607,7 @@
const reader = new FileReader();
reader.readAsText(e);
reader.onload = function(text){
console.log(text.target?.result?.split("\r\n"))
//console.log(text.target?.result?.split("\r\n"))
handlerImportCoor(text.target?.result?.split("\r\n"));
}
}
@ -1663,7 +1649,7 @@
locationDrawArrays.value = [];
locationArrays.value?.forEach((location)=>{
let obj={...location}
console.log(obj);
//console.log(obj);
locationDrawArrays.value?.push(obj)
})
@ -1746,13 +1732,13 @@
locationGeoJson.polygon.features[0] = feature;
}
handlerLocationLoadLayer();
console.log('locationGeoJson', locationGeoJson);
//console.log('locationGeoJson', locationGeoJson);
};
// 线
const handlerLocationLoadLayer = () => {
console.log("locationGeoJson123",locationGeoJson);
//console.log("locationGeoJson123",locationGeoJson);
//
if (map.getSource('LocationPointSource')) {
map.getSource('LocationPointSource').setData(locationGeoJson.point);

View File

@ -9,28 +9,69 @@ import { generateUUID } from '../src/tool';
*/
export function splitPolygonByLine(line, outerPolygon) {
console.log("outerPolygon",outerPolygon)
let splitAfterFeatures = [];
// 判断outerpolygon类型
if(outerPolygon.geometry.type == "MultiPolygon"){
// 如果是MultiPolygon图斑 遍历数据 转换为Polygon分割 后合成数组
outerPolygon.geometry.coordinates.forEach((item,index)=>{
let tempPolygon = {
"type": "Feature",
"properties": {
"id": generateUUID(),
},
"geometry": {
"type": "Polygon",
"coordinates":null
}
};
tempPolygon.properties.id = generateUUID();
tempPolygon.geometry.type = "Polygon"
tempPolygon.geometry.coordinates = item;
let splitRes = splitByLine(line,tempPolygon);
// 如果有数据就拼接数据
if(splitRes){
splitAfterFeatures = splitAfterFeatures.concat(splitRes);
}else{
// 如果没有分割结果直接把这个元素添加到结果中
splitAfterFeatures = splitAfterFeatures.concat(tempPolygon);
}
})
}else if(outerPolygon.geometry.type == "Polygon"){
// 如果是Polygon的单图斑 直接获取分割结果
let splitRes = splitByLine(line,outerPolygon);
// 如果有数据就拼接数据
if(splitRes){
splitAfterFeatures = splitAfterFeatures.concat(splitRes);
}else{
// 如果没有分割结果直接把这个元素添加到结果中
splitAfterFeatures = splitAfterFeatures.concat(outerPolygon);
}
}
//console.log("splitAfterFeatures",splitAfterFeatures)
return splitAfterFeatures;
let dealOptions = {
precision: 8, // 小数点后保留位数
coordinates: 3, // 小数点前保留位数
}
console.log("************** 分割开始 start **************")
//console.log("************** 分割开始 start **************")
console.log("第1步传入的分割线数据",line);
console.log("第2步传入的分割面数据",outerPolygon)
//console.log("第1步传入的分割线数据",line);
//console.log("第2步传入的分割面数据",outerPolygon)
// 处理被分割的面数据坐标小数点保留多少位
// let truncatedSplitter = turf.truncate(turf.lineString(outerPolygon.geometry.coordinates[0]), dealOptions);
let truncatedSplitter = turf.truncate(turf.multiLineString(outerPolygon.geometry.coordinates[0]), dealOptions);
console.log("第3步分割面转换为线数据",truncatedSplitter);
let truncatedSplitter = turf.truncate(turf.lineString(outerPolygon.geometry.coordinates[0]), dealOptions);
//console.log("第3步分割面转换为线数据",truncatedSplitter);
//求交点
let intersectCollection = turf.lineIntersect(line, truncatedSplitter);
console.log("第4步与分割面的交点",intersectCollection);
//console.log("第4步与分割面的交点",intersectCollection);
// printLngLat(intersectCollection.geometry.coordinates);
// 交点小于2个 返回null
if (intersectCollection.features.length < 2) {
@ -39,26 +80,26 @@ export function splitPolygonByLine(line, outerPolygon) {
//将点合并成MultiPoint
let intersectCombined = turf.combine(intersectCollection).features[0];
console.log("第5步分割后所有点数据",intersectCombined)
//console.log("第5步分割后所有点数据",intersectCombined)
//分别获取切割线
let outerPieceCollection = turf.lineSplit(line, intersectCombined);
let splitterPieceCollection = turf.lineSplit(truncatedSplitter, intersectCombined);
console.log("第6步切割线被分割后所有线段",outerPieceCollection);
//console.log("第6步切割线被分割后所有线段",outerPieceCollection);
console.log("第7步切割面被分割后所有线段",splitterPieceCollection);
//console.log("第7步切割面被分割后所有线段",splitterPieceCollection);
//将所有的线段放到一起
let pieceCollection = turf.featureCollection(
outerPieceCollection.features.concat(splitterPieceCollection.features),
);
console.log("第8步所有分割线段",pieceCollection);
//console.log("第8步所有分割线段",pieceCollection);
//使用turf将闭合线组成多边形
let polygonCollection = turf.polygonize(pieceCollection);
console.log("第9步分割线合并面数据",polygonCollection)
//console.log("第9步分割线合并面数据",polygonCollection)
//对多边形进行判断,切割外的多边形丢弃
let innerPolygons = polygonCollection.features.filter((polygon) => {
@ -70,12 +111,12 @@ export function splitPolygonByLine(line, outerPolygon) {
let newcenter = turf.pointOnFeature(polygon);
// 图斑中心点
let centerPoint = turf.point(randomCenterPoint.geometry.coordinates);
console.log('第10步封闭图形中心点数据',randomCenterPoint,centerPoint)
//console.log('第10步封闭图形中心点数据',randomCenterPoint,centerPoint)
return turf.booleanWithin(centerPoint, outerPolygon);
});
console.log("第11步返回最终处理后的数据",innerPolygons)
//console.log("第11步返回最终处理后的数据",innerPolygons)
// let innerPolygons = polygonCollection.features;
//处理镂空数据多处镂空数据会导致计算错误因为polygonize方法无法正常的返回数据
@ -102,14 +143,109 @@ export function splitPolygonByLine(line, outerPolygon) {
innerPolygons[index] = turf.truncate(turf.polygon(innerPolygons[index].geometry.coordinates),dealOptions)
innerPolygons[index].properties.id = generateUUID();
console.log("item",item);
//console.log("item",item);
});
console.log("************** 分割结束 end **************")
//console.log("************** 分割结束 end **************")
return innerPolygons;
}
function splitByLine(line,outerPolygon){
let dealOptions = {
precision: 8, // 小数点后保留位数
coordinates: 3, // 小数点前保留位数
}
//console.log("************** 分割开始 start **************")
//console.log("第1步传入的分割线数据",line);
//console.log("第2步传入的分割面数据",outerPolygon)
// 处理被分割的面数据坐标小数点保留多少位
let truncatedSplitter = turf.truncate(turf.lineString(outerPolygon.geometry.coordinates[0]), dealOptions);
//console.log("第3步分割面转换为线数据",truncatedSplitter);
//求交点
let intersectCollection = turf.lineIntersect(line, truncatedSplitter);
//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("第5步分割后所有点数据",intersectCombined)
//分别获取切割线
let outerPieceCollection = turf.lineSplit(line, intersectCombined);
let splitterPieceCollection = turf.lineSplit(truncatedSplitter, intersectCombined);
//console.log("第6步切割线被分割后所有线段",outerPieceCollection);
//console.log("第7步切割面被分割后所有线段",splitterPieceCollection);
//将所有的线段放到一起
let pieceCollection = turf.featureCollection(
outerPieceCollection.features.concat(splitterPieceCollection.features),
);
//console.log("第8步所有分割线段",pieceCollection);
//使用turf将闭合线组成多边形
let polygonCollection = turf.polygonize(pieceCollection);
//console.log("第9步分割线合并面数据",polygonCollection)
//对多边形进行判断,切割外的多边形丢弃
let innerPolygons = polygonCollection.features.filter((polygon) => {
// 获取多边形质心 多边形不规则时有问题
// let newcenter = turf.centroid(polygon);
let randomCenterPoint = getRandomPointInPolygon(polygon);
// 获取多边形表面一点
let newcenter = turf.pointOnFeature(polygon);
// 图斑中心点
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方法无法正常的返回数据
if (outerPolygon.geometry.coordinates?.length > 1) {
//获取镂空的面数据
let holeCollection = turf.featureCollection(
outerPolygon.geometry.coordinates.slice(1).map((item) => turf.polygon([item])),
);
//剔除掉镂空的部分数据
innerPolygons = innerPolygons.map((polygon) => {
let diff = polygon;
turf.featureEach(holeCollection, (hole) => {
// diff = turf.difference(diff, hole);
diff = turf.difference(turf.featureCollection([diff, hole]))
});
return diff;
});
}
// 每个图斑配置UUID 处理每个数据保留8位数
innerPolygons.forEach((item, index) => {
innerPolygons[index] = turf.truncate(turf.polygon(innerPolygons[index].geometry.coordinates),dealOptions)
innerPolygons[index].properties.id = generateUUID();
//console.log("item",item);
});
//console.log("************** 分割结束 end **************")
return innerPolygons;
}
// 获取多边形内随机点
function getRandomPointInPolygon(polygon) {
const bbox = turf.bbox(polygon); // 获取多边形的边界框
@ -127,8 +263,8 @@ function getRandomPointInPolygon(polygon) {
export async function splitPolygonByFill(drawPolygon, outerPolygon) {
return new Promise((resolve,reject)=>{
try{
console.log("第1步传入的绘制面数据",drawPolygon);
console.log("第2步传入的被切割面数据",outerPolygon)
//console.log("第1步传入的绘制面数据",drawPolygon);
//console.log("第2步传入的被切割面数据",outerPolygon)
var polygon1 = turf.polygon(drawPolygon.geometry.coordinates);
@ -143,16 +279,16 @@ export async function splitPolygonByFill(drawPolygon, outerPolygon) {
let intersection = turf.intersect(turf.featureCollection([polygon1, polygon2]));
console.log("第4步获取绘制图斑和分割图斑的交集",JSON.stringify(polygon2),JSON.stringify(polygon1),intersection);
//console.log("第4步获取绘制图斑和分割图斑的交集",JSON.stringify(polygon2),JSON.stringify(polygon1),intersection);
var difference = turf.difference(turf.featureCollection([polygon2, polygon1]));
console.log("第3步获取绘制图斑和分割图斑的差集",difference);
//console.log("第3步获取绘制图斑和分割图斑的差集",difference);
let splitAfterFeatures = [intersection,difference];
resolve(splitAfterFeatures)
}catch(e){
console.log(e);
//console.log(e);
reject(null);
}
})
@ -168,8 +304,8 @@ export async function splitPolygonByMultiFill(drawPolygons,outerPolygon){
precision: 8, // 小数点后保留位数
coordinates: 3, // 小数点前保留位数
}
console.log("💩第1步传入的绘制面数据",drawPolygons);
console.log("💩第2步传入的被切割面数据",outerPolygon);
//console.log("💩第1步传入的绘制面数据",drawPolygons);
//console.log("💩第2步传入的被切割面数据",outerPolygon);
// 所有结果集合
let resultArray = [];
@ -189,7 +325,7 @@ export async function splitPolygonByMultiFill(drawPolygons,outerPolygon){
}
featuresArray.push(turf.truncate(turfOuterPolygon,dealOptions));
console.log("💩第3步处理精度后的被分割图斑",featuresArray);
//console.log("💩第3步处理精度后的被分割图斑",featuresArray);
// 绘制图斑数组
let splitFeaturesArray = [];
@ -207,7 +343,7 @@ export async function splitPolygonByMultiFill(drawPolygons,outerPolygon){
}
// 处理精度后绘制图斑
let turfPolygon = turf.truncate(splitPolygonItem,dealOptions);
console.log("💩第4步处理精度后绘制图斑",turfPolygon);
//console.log("💩第4步处理精度后绘制图斑",turfPolygon);
// 取交集
let intersection = turf.intersect(turf.featureCollection([featuresArray[0],turfPolygon]),dealOptions);
@ -215,27 +351,27 @@ export async function splitPolygonByMultiFill(drawPolygons,outerPolygon){
if(intersection){
resultArray.push(intersection);
}
console.log("💩第5步交集"+index+"",intersection)
//console.log("💩第5步交集"+index+"",intersection)
splitFeaturesArray.push(turfPolygon);
}catch(e){
console.log(e);
//console.log(e);
}
})
// 取差集
var difference = turf.difference(turf.featureCollection(featuresArray.concat(splitFeaturesArray)));
console.log("💩第6步差集",difference);
//console.log("💩第6步差集",difference);
if(difference){
resultArray.push(difference);
}
// 全部图斑
console.log("💩第7步分割后所有图斑",resultArray);
//console.log("💩第7步分割后所有图斑",resultArray);
resolve(resultArray)
}catch(e){
console.log(e);
//console.log(e);
reject("分割失败!");
}
})
@ -266,6 +402,46 @@ export function handlerMultiPolygonToPolygon(sourcePolygons){
export function printLngLat(arr){
arr.forEach((item,index)=>{
console.log(item[1]+","+item[0]+"\n");
//console.log(item[1]+","+item[0]+"\n");
})
}
// 将绑定的多个features的geojson数据处理为multiPolygon数据
export function handlerToMultiPolygonGeoJson(geojson){
let handlerAfterGeoJson = null;
if(geojson?.features?.length>1){
let multiFeature = {
"id":generateUUID(),
"type": "Feature",
"properties": {
"id": generateUUID(),
},
"geometry": {
"type": "MultiPolygon",
"coordinates":[]
}
}
geojson.features?.forEach((item,index)=>{
if(item.geometry.type == "MultiPolygon"){
multiFeature.geometry.coordinates = multiFeature.geometry.coordinates.concat(item.geometry.coordinates);
}else if(item.geometry.type == "Polygon"){
console.log("item.geometry.coordinates",item.geometry.coordinates)
multiFeature.geometry.coordinates = multiFeature.geometry.coordinates.concat([item.geometry.coordinates])
}
})
handlerAfterGeoJson = {
"type": "FeatureCollection",
"features": [
multiFeature
]
};
}else if(geojson.features?.length == 1){
handlerAfterGeoJson = {...geojson};
}
return handlerAfterGeoJson;
}

View File

@ -1011,6 +1011,7 @@ const areKeyDownChange =
const onFeatureClick = (feature) => {
splitPolygonForm.value?.forEach((item, index) => {
if (item['geom']['properties']['id'] == feature.properties.id) {
changeCurrentPolygon(index, item);
}
});
@ -1108,7 +1109,7 @@ const areKeyDownChange =
splitPolygonForm.value?.forEach((item,index)=>{
if(item.checked){
let turfPolygon = null;
console.log("splitAfterPolygon",splitAfterPolygon.value[index].geometry)
if(splitAfterPolygon.value[index].geometry.type == 'Polygon'){
turfPolygon = turf.polygon(splitAfterPolygon.value[index].geometry.coordinates);
}else if(splitAfterPolygon.value[index].geometry.type == 'MultiPolygon'){