HC_YFZX
/
CaiYuanYiTiHua
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

shp图斑分割

dianlixunjian
徐景良 2024-09-10 16:41:53 +08:00
parent 0fc79b9538
commit 3fb427e337
4 changed files with 139 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -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" />

BIN
public/turf.min.js.lnk Normal file
View File

Binary file not shown.

87
src/components/MapboxMaps/MapComponent.vue
View File

@ -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,30 +817,66 @@ import shp from 'shpjs'
// 根据面分割
const splitFeatureByFill = (fill) => {
let drawPolygon = {
type: 'Feature',
properties: {
id:null,
},
geometry: {
coordinates: [fill],
type: 'Polygon',
},
};
// 去除重复点坐标
let turfPolygon = turf.polygon([fill]);
let drawPolygon = turf.cleanCoords(turfPolygon);
console.log("drawPolygon",drawPolygon);
// let drawPolygon = {
// type: 'Feature',
// properties: {
// id:null,
// },
// geometry: {
// coordinates: [fill],
// type: 'Polygon',
// },
// };
let splitPolygon = currentGeoJson.value;
let features = splitPolygonByFill(drawPolygon, splitPolygon);
let tempFeatures = JSON.parse(JSON.stringify(features))
let splitAfterFeatures = {
type: 'FeatureCollection',
features: [],
};
splitAfterFeatures.features = tempFeatures;
emit('handlerSplitPolygon', tempFeatures);
handlerUnDraw();
try{
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: [],
};
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');

89
src/components/MapboxMaps/lib/splitpolygon.ts
View File

@ -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);
console.log("outerPolygon",outerPolygon)
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);
return new Promise((resolve,reject)=>{
try{
console.log("第1步：传入的绘制面数据",drawPolygon);
console.log("第2步：传入的被切割面数据",outerPolygon)
var polygon1 = turf.polygon(drawPolygon.geometry.coordinates);
var polygon2 = turf.polygon(outerPolygon.geometry.coordinates);
// var intersection = turf.intersect(polygon1, polygon2);
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);
intersection.properties.id = generateUUID();
difference.properties.id = generateUUID();
let splitAfterFeatures = [intersection,difference];
setTimeout(function(){
console.log("splitAfterFeatures9876",splitAfterFeatures);
},3000)
resolve(splitAfterFeatures)
}catch(e){
console.log(e);
reject(null);
}
})
let splitAfterFeatures = [intersection,difference];
}
// splitAfterFeatures?.forEach((item,index)=>{
// splitAfterFeatures[index].properties?.id = generateUUID();
// })
// 多面数据分割裁剪
export async function splitPolygonByMultiFill(drawPolygons,outerPolygon){
return splitAfterFeatures;
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){