刘妍 2024-09-10 17:08:29 +08:00
commit b808278c1c
9 changed files with 308 additions and 63 deletions

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

Binary file not shown.

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');

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){

View File

@ -191,7 +191,8 @@
const handlerDelete = (index) => {
fileList.value.splice(index, 1);
let value = getValue();
emit('change', value);
emit('change', value)
emit('update:value', value);
};

View File

@ -31,7 +31,6 @@
let sum = 0;
if (props.data) {
props.data?.forEach((item) => {
// item.area = item.area.toFixed(16);
sum += item.area;
});
return sum;

View File

@ -86,13 +86,17 @@
@cancel="showInfoOpen = false"
>
<div class="modal-content">
<div class="handoff">
<a-button type="primary" style="margin-right: 25px" @click="prevData"></a-button>
<a-button type="primary" @click="nextData"></a-button>
</div>
<ShowInfoModal :showInfoData="showInfoData" />
</div>
</a-modal>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { ref, reactive, onMounted, watch } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { PermissionBtn } from '@/components/PermissionBtn/index';
import { columns, searchFormSchema } from './patchsummary.data';
@ -105,10 +109,14 @@
import { PageWrapper } from '@/components/Page';
import dayjs from 'dayjs';
import { nowStatusOptions } from '@/utils/global';
import { message } from 'ant-design-vue'
const { VITE_GLOB_API_URL } = getAppEnvConfig();
defineOptions({ name: 'RoleManagement' });
const nextShowDataId = ref();
const prevShowDataId = ref();
const showInfoId = ref();
const searchInfo = reactive<Recordable>({
countyid: null,
@ -218,7 +226,11 @@
}
}
function viewAccount(record) {
getCaseInfoById({ id: record.Id }).then((res) => {
showInfoId.value = record.Id;
getDetailData();
}
function getDetailData() {
getCaseInfoById({ id: showInfoId.value }).then((res) => {
showInfoData.value = res;
showInfoOpen.value = true;
});
@ -243,13 +255,13 @@
const querys = Object.assign(searchParams.value, areaParams.value);
getTableData(querys);
}
function getTableData(querys) {
async function getTableData(querys) {
if (querys.startTime && querys.endTime) {
querys.startTime = dayjs(querys.startTime).format('YYYY-MM-DD');
querys.endTime = dayjs(querys.endTime).endOf('day').format('YYYY-MM-DD HH:mm:ss');
}
setLoading(true);
loadCaseInfoTuBanList(querys).then((res) => {
await loadCaseInfoTuBanList(querys).then((res) => {
tableData.value = res.items;
tablePaginationRight.value.total = res.total;
setTableData(tableData.value);
@ -276,6 +288,60 @@
onMounted(() => {
getTableData(searchParams.value);
});
watch(
() => showInfoId.value,
() => {
let index = tableData.value.findIndex((item) => item.Id == showInfoId.value);
getDetailData();
if (index < tableData.value.length - 1) {
nextShowDataId.value = tableData.value[index + 1].Id;
} else {
nextShowDataId.value = 0;
}
if (index > 0) {
prevShowDataId.value = tableData.value[index - 1].Id;
} else {
prevShowDataId.value = 0;
}
},
);
async function prevData() {
if (prevShowDataId.value === 0) {
if (searchParams.value.page === 1) {
message.warning('已经是第一条数据了');
return;
}
searchParams.value.page--;
tablePaginationRight.value.current--;
await getTableData(searchParams.value);
setTimeout(() => {
showInfoId.value = tableData.value[tableData.value.length - 1].Id;
}, 10);
return;
} else {
showInfoId.value = prevShowDataId.value;
}
}
async function nextData() {
if (nextShowDataId.value === 0) {
if (
Math.ceil(tablePaginationRight.value.total / searchParams.value.limit) <=
searchParams.value.page
) {
message.warning('已经是最后一条数据了');
return;
}
searchParams.value.page++;
tablePaginationRight.value.current++;
await getTableData(searchParams.value);
console.log(tableData.value);
setTimeout(() => {
showInfoId.value = tableData.value[0].Id;
}, 10);
} else {
showInfoId.value = nextShowDataId.value;
}
}
</script>
<style lang="less" scoped>
.data-preview-container {
@ -347,4 +413,10 @@
::v-deep .ant-select-selection-overflow-item:first-child .ant-select-selection-item {
width: 80px;
}
.handoff {
width: 100%;
display: flex;
justify-content: flex-end;
padding-right: 25px;
}
</style>

View File

@ -86,13 +86,17 @@
@cancel="showInfoOpen = false"
>
<div class="modal-content">
<div class="handoff">
<a-button type="primary" style="margin-right: 25px" @click="prevData"></a-button>
<a-button type="primary" @click="nextData"></a-button>
</div>
<ShowInfoModal :showInfoData="showInfoData" />
</div>
</a-modal>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { ref, reactive, onMounted, watch } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { PermissionBtn } from '@/components/PermissionBtn/index';
import { columns, searchFormSchema } from './patchsummary.data';
@ -105,10 +109,14 @@
import { PageWrapper } from '@/components/Page';
import dayjs from 'dayjs';
import { nowStatusOptions } from '@/utils/global';
import { message } from 'ant-design-vue';
const { VITE_GLOB_API_URL } = getAppEnvConfig();
defineOptions({ name: 'RoleManagement' });
const nextShowDataId = ref();
const prevShowDataId = ref();
const showInfoId = ref();
const searchInfo = reactive<Recordable>({
countyid: null,
@ -218,7 +226,11 @@
}
}
function viewAccount(record) {
getCaseInfoById({ id: record.Id }).then((res) => {
showInfoId.value = record.Id;
getDetailData();
}
function getDetailData() {
getCaseInfoById({ id: showInfoId.value }).then((res) => {
showInfoData.value = res;
showInfoOpen.value = true;
});
@ -243,13 +255,13 @@
const querys = Object.assign(searchParams.value, areaParams.value);
getTableData(querys);
}
function getTableData(querys) {
async function getTableData(querys) {
if (querys.startTime && querys.endTime) {
querys.startTime = dayjs(querys.startTime).format('YYYY-MM-DD');
querys.endTime = dayjs(querys.endTime).endOf('day').format('YYYY-MM-DD HH:mm:ss');
}
setLoading(true);
loadCaseInfoTuBanList(querys).then((res) => {
await loadCaseInfoTuBanList(querys).then((res) => {
tableData.value = res.items;
tablePaginationRight.value.total = res.total;
setTableData(tableData.value);
@ -276,6 +288,60 @@
onMounted(() => {
getTableData(searchParams.value);
});
watch(
() => showInfoId.value,
() => {
let index = tableData.value.findIndex((item) => item.Id == showInfoId.value);
getDetailData();
if (index < tableData.value.length - 1) {
nextShowDataId.value = tableData.value[index + 1].Id;
} else {
nextShowDataId.value = 0;
}
if (index > 0) {
prevShowDataId.value = tableData.value[index - 1].Id;
} else {
prevShowDataId.value = 0;
}
},
);
async function prevData() {
if (prevShowDataId.value === 0) {
if (searchParams.value.page === 1) {
message.warning('已经是第一条数据了');
return;
}
searchParams.value.page--;
tablePaginationRight.value.current--;
await getTableData(searchParams.value);
setTimeout(() => {
showInfoId.value = tableData.value[tableData.value.length - 1].Id;
}, 10);
return;
} else {
showInfoId.value = prevShowDataId.value;
}
}
async function nextData() {
if (nextShowDataId.value === 0) {
if (
Math.ceil(tablePaginationRight.value.total / searchParams.value.limit) <=
searchParams.value.page
) {
message.warning('已经是最后一条数据了');
return;
}
searchParams.value.page++;
tablePaginationRight.value.current++;
await getTableData(searchParams.value);
console.log(tableData.value);
setTimeout(() => {
showInfoId.value = tableData.value[0].Id;
}, 10);
} else {
showInfoId.value = nextShowDataId.value;
}
}
</script>
<style lang="less" scoped>
.data-preview-container {
@ -347,4 +413,10 @@
::v-deep .ant-select-selection-overflow-item:first-child .ant-select-selection-item {
width: 80px;
}
.handoff {
width: 100%;
display: flex;
justify-content: flex-end;
padding-right: 25px;
}
</style>

View File

@ -193,17 +193,17 @@
let tiles: any = [];
chooseRows.forEach((chooseRow) => {
let format =
chooseRow.dataType == '点'
chooseRow.dataType == '点' || chooseRow.dataType == '面'
? '&format=application/openlayers'
: '&format=image/png&TRANSPARENT=TRUE';
// let tile =
// 'http://192.168.10.131:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:' +
// chooseRow.dataTable +
// '&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=' +
// chooseRow.spatialRef +
// format;
let tile =
'http://221.2.83.254:9007/geoserver/ksp/wms?service=WMS&version=1.1.0&request=GetMap&layers=ksp:linqubianyaqi&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE&cql_filter=is_del%20=0';
'http://192.168.10.131:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:' +
chooseRow.dataTable +
'&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=' +
chooseRow.spatialRef +
format;
// let tile =
// 'http://221.2.83.254:9007/geoserver/ksp/wms?service=WMS&version=1.1.0&request=GetMap&layers=ksp:linqubianyaqi&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE&cql_filter=is_del%20=0';
tiles.push(tile);
});
@ -235,10 +235,13 @@
let tiles: any = [];
chooseRows.forEach((chooseRow) => {
tiles.push(
'http://221.2.83.254:9007/geoserver/ksp/wms?service=WMS&version=1.1.0&request=GetMap&layers=ksp:linqubianyaqi&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE&cql_filter=is_del%20=0',
);
// tiles.push(chooseRow.accessUrl);
// tiles.push(
// chooseRow.accessUrl.replace(
// '&format=application/openlayers',
// '&format=image/png&TRANSPARENT=TRUE',
// ),
// );
tiles.push(chooseRow.accessUrl);
});
map.addSource('GeoTiffManagerRaster' + 'wmsSource', {