From 2679fd7316f5e146fa82e570c9de3315d716a9e0 Mon Sep 17 00:00:00 2001 From: helloxujingliang <3225043@qq.com> Date: Thu, 3 Apr 2025 15:38:27 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MapboxMaps/MapComponent.vue | 8 +- .../MapList/SplitPolygonModal/index.vue | 5 + .../MapList/SplitPolygonModal/index.vue | 5 + .../MapList/SplitPolygonModal/index.vue | 5 + .../MapList/SplitPolygonModal/index.vue | 5 + .../MapList/SplitPolygonModal/index.vue | 5 + .../MapList/SplitPolygonModal/index.vue | 5 + .../MapList/SplitPolygonModal/index.vue | 5 + .../MapList/SplitPolygonModal/index.vue | 189 +++++++++--------- 9 files changed, 130 insertions(+), 102 deletions(-) diff --git a/src/components/MapboxMaps/MapComponent.vue b/src/components/MapboxMaps/MapComponent.vue index f24c1e07..895b1bba 100644 --- a/src/components/MapboxMaps/MapComponent.vue +++ b/src/components/MapboxMaps/MapComponent.vue @@ -109,9 +109,8 @@ - - - +
diff --git a/src/views/demo/degraining/curbspotcity/MapList/SplitPolygonModal/index.vue b/src/views/demo/degraining/curbspotcity/MapList/SplitPolygonModal/index.vue index 48f78b51..eb15ebc0 100644 --- a/src/views/demo/degraining/curbspotcity/MapList/SplitPolygonModal/index.vue +++ b/src/views/demo/degraining/curbspotcity/MapList/SplitPolygonModal/index.vue @@ -610,6 +610,7 @@
- +
@@ -68,6 +68,7 @@ width="100px" height="100px" :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`" + :keyboard="false" > @@ -535,6 +536,7 @@ { + let splitPolygonPromiseArray = []; + const handlerSplitPolygon = (e) => { + isLandTypeSpliting.value = true; // 删除被分割的图斑 if(currentPolygon.value){ splitPolygonForm.value?.splice(currentPolygon.value,1); splitAfterPolygon.value?.splice(currentPolygon.value,1); } + // 清空全部Promise + splitPolygonPromiseArray = []; - isLandTypeSpliting.value = false; + try{ + e?.forEach((item, index) => { - // 面积计算 - let sumArea = 0.0; + let afterItem = removeZM(item['geometry']) - - e?.forEach((item, index) => { - - // 去除GeoJSON Z坐标 - let afterItem = removeZM(item['geometry']) - - let calAreaParams:CalTubanAreaModel = { - "wktgeom": GeojsonToWkt(item['geometry']), - } - - calTubanArea(calAreaParams).then(resultItem=>{ - if(resultItem){ - let form = { - fid: null, - unitname: '', - createdate: createtime, - caseno: case_no + ' 分割图斑', - countyname: countyname, - streetname: streetname, - isbuildname: '', - nongyongdi_area: resultItem.nongyongdi > 0 ? resultItem.nongyongdi : 0.00, - gengdi_area: resultItem.gengdi > 0 ? resultItem.gengdi : 0.00, - yongjiujibennongtian_area: resultItem.jibennongtian > 0 ? resultItem.jibennongtian : 0.00, - shengtaibaohuhongxian_area: resultItem.shengtaihongxian > 0 ? resultItem.shengtaihongxian : 0.00, - guotukongjianguihua_area: null, - area: resultItem.totalmianji > 0 ? resultItem.totalmianji : 0.00, - geom: item, - checked:false, - }; - - splitPolygonForm.value?.push(form); - splitAfterPolygon.value?.push(form.geom) - - - // 分割完成后重新渲染面数据 - let splitAfterFeatures = { - type: 'FeatureCollection', - features: [], - }; - splitPolygonForm.value?.forEach((item,idnex)=>{ - splitAfterFeatures.features.push(item.geom); - }) - - const areKeyDownChange = MapboxComponent.value.handlerDetails(splitAfterFeatures); - + let calAreaParams:CalTubanAreaModel = { + "wktgeom": GeojsonToWkt(item['geometry']), } - }) + + let splitPromise = calTubanArea(calAreaParams).then(resultItem=>{ + if(resultItem){ + let form = { + fid: null, + unitname: '', + createdate: createtime, + caseno: case_no + ' 分割图斑', + countyname: countyname, + streetname: streetname, + isbuildname: '', + nongyongdi_area: resultItem.nongyongdi > 0 ? resultItem.nongyongdi : 0.00, + gengdi_area: resultItem.gengdi > 0 ? resultItem.gengdi : 0.00, + yongjiujibennongtian_area: resultItem.jibennongtian > 0 ? resultItem.jibennongtian : 0.00, + shengtaibaohuhongxian_area: resultItem.shengtaihongxian > 0 ? resultItem.shengtaihongxian : 0.00, + guotukongjianguihua_area: null, + area: resultItem.totalmianji > 0 ? resultItem.totalmianji : 0.00, + geom: item, + checked:false, + }; + + splitPolygonForm.value?.push(form); + splitAfterPolygon.value?.push(form.geom) - // setTimeout(function(){ - // handlerFeatureArea(); - // },10000) + // 分割完成后重新渲染面数据 + let splitAfterFeatures = { + type: 'FeatureCollection', + features: [], + }; + splitPolygonForm.value?.forEach((item,idnex)=>{ + splitAfterFeatures.features.push(item.geom); + }) + + const areKeyDownChange = MapboxComponent.value.handlerDetails(splitAfterFeatures); - }); + } + }) + + // 添加到排队 + splitPolygonPromiseArray.push(splitPromise); + }); + // 等待全部查询执行完毕后执行 + Promise.all(splitPolygonPromiseArray).then(res=>{ + // 处理面积 + handlerFeatureArea(); + // 清空选中图斑 + let geoms = { + type: 'FeatureCollection', + features: [], + }; - // 清空选中图斑 - let geoms = { - type: 'FeatureCollection', - features: [], - }; - - MapboxComponent.value.handlerDetails(geoms, 'splitPolygonSource', 'splitPolygonLayer', { - lineStyle: { 'line-color': '#408eff', 'line-width': 3 }, - fillStyle: { 'fill-color': '#408eff', 'fill-opacity': 0.1 }, - }); - - currentPolygon.value = null; + // 绘制新图斑 + MapboxComponent.value.handlerDetails(geoms, 'splitPolygonSource', 'splitPolygonLayer', { + lineStyle: { 'line-color': '#408eff', 'line-width': 3 }, + fillStyle: { 'fill-color': '#408eff', 'fill-opacity': 0.1 }, + }); + + // 清空当前图斑 + currentPolygon.value = null; + // 停止加载 + isLandTypeSpliting.value = false; + }) + }catch(e){ + isLandTypeSpliting.value = false; + } }; // 处理面积 @@ -1036,14 +1048,15 @@ import { itemProps } from '@/components/Menu/src/props'; // splitPolygonForm.value[index].gengdi_area = 0; // } - splitPolygonForm.value[index].area = area - addArea.area; - splitPolygonForm.value[index].gengdi_area = gengdi_area - addArea.gengdi_area; - splitPolygonForm.value[index].nongyongdi_area = nongyongdi_area - addArea.nongyongdi_area; - splitPolygonForm.value[index].yongjiujibennongtian_area = yongjiujibennongtian_area - addArea.yongjiujibennongtian_area; - splitPolygonForm.value[index].shengtaibaohuhongxian_area = shengtaibaohuhongxian_area - addArea.shengtaibaohuhongxian_area; + splitPolygonForm.value[index].area = (area - addArea.area).toFixed(2); + splitPolygonForm.value[index].gengdi_area = (gengdi_area - addArea.gengdi_area).toFixed(2); + splitPolygonForm.value[index].nongyongdi_area = (nongyongdi_area - addArea.nongyongdi_area).toFixed(2); + splitPolygonForm.value[index].yongjiujibennongtian_area = (yongjiujibennongtian_area - addArea.yongjiujibennongtian_area).toFixed(2); + splitPolygonForm.value[index].shengtaibaohuhongxian_area = (shengtaibaohuhongxian_area - addArea.shengtaibaohuhongxian_area).toFixed(2); } + // 累计面积 addArea.area = addArea.area + item.area; addArea.gengdi_area = addArea.gengdi_area + item.gengdi_area; addArea.nongyongdi_area = addArea.nongyongdi_area + item.nongyongdi_area; @@ -1194,6 +1207,9 @@ import { itemProps } from '@/components/Menu/src/props'; // 合并图斑 const mergeSplitResult = ()=>{ + + isLandTypeSpliting.value = true; + try{ let mergeArr = [] let deleteIndexs = []; @@ -1229,10 +1245,6 @@ import { itemProps } from '@/components/Menu/src/props'; let union = turf.union(turf.featureCollection([mergeArr[0], mergeArr[1]])) // 计算合并后的图斑面积 - - - - let calAreaParams:CalTubanAreaModel = { "wktgeom": GeojsonToWkt(union['geometry']), } @@ -1281,30 +1293,13 @@ import { itemProps } from '@/components/Menu/src/props'; }); handlerFeatureArea(); + + isLandTypeSpliting.value = false; + } }) - - // let polygon = { - // fid: null, - // unitname: '', - // createdate: createtime, - // caseno: case_no + ' 分割图斑', - // countyname: countyname, - // streetname: streetname, - // isbuildname: '', - // nongyongdi_area: null, - // gengdi_area: null, - // yongjiujibennongtian_area: null, - // shengtaibaohuhongxian_area: null, - // guotukongjianguihua_area: null, - // area: null, - // geom: union, - // checked:false, - // } - - - }catch(e){ + isLandTypeSpliting.value = false; createMessage.error("合并失败!"); }