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

merge:

main
徐景良 2025-03-21 09:41:18 +08:00
parent 7d817107b0
commit 51d783eac7
14 changed files with 926 additions and 311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/api/sys/layerManagement.ts
View File

@ -1,5 +1,13 @@
import { defHttp } from '@/utils/http/axios';
import { AddLayerParams,GetLayerListParams,AddGeomParams,GetGeomParams,LoginResultModel, GetUserInfoModel } from './model/layerModel';
import {
AddLayerParams,
GetLayerListParams,
AddGeomParams,
GetGeomParams,
LoginResultModel,
GetUserInfoModel,
CalTubanAreaModel
} from './model/layerModel';
import { ErrorMessageMode } from '#/axios';
@ -14,6 +22,8 @@ enum Api {
GetLayerList = "/api/ShpLayerSource/LoadPage",
AddGeom = "/api/ShpLayerSource/SaveShapeData",
GetGeom = "/api/ShpLayerSource/GetShapeData",
CalTubanArea = "/api/DroneCaseInfoSingle/CalTubanArea",
SplitAndCalTubanArea = "/api/DroneCaseInfoSingle/SplitAndCalTubanArea",
GetPermCode = '/getPermCode',
TestRetry = '/testRetry',
Login = '/api/Check/Login',
@ -106,6 +116,26 @@ export function getGeom(params:GetGeomParams) {
)
}
export function calTubanArea(params:CalTubanAreaModel){
return defHttp.post(
{
url: Api.CalTubanArea,
params,
}
)
}
export function splitAndCalTubanArea(params:CalTubanAreaModel){
return defHttp.post(
{
url: Api.SplitAndCalTubanArea,
params,
}
)
}
export function getConfig(params) {
return defHttp.get(

13
src/api/sys/model/layerModel.ts
View File

@ -33,6 +33,19 @@ export interface GetGeomParams {
limit:number,
key:string | null,
}
export interface CalTubanAreaModel{
wktgeom: string | null;
gengdi: number | null,
nongyongdi: number | null,
jibennongtian: number | null,
shengtaihongxian: number | null,
gengdituban:string,
nongyongdituban:string | null,
jibennongtiantuban:string | null,
shengtaihongxiantuban:string | null,
remaintuban:string | null
}
export interface RoleInfo {
roleName: string;

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

@ -107,7 +107,7 @@
<p class="split-panel-item">导入图层分割</p>
</a-upload>
<!-- <p class="split-panel-item" @click="handlerSelectLandType()">地类图斑分割</p> -->
<p class="split-panel-item" @click="handlerSelectLandType()">地类图斑分割</p>
</div>
</template>
@ -323,6 +323,10 @@
import { message, Modal } from 'ant-design-vue';
import { useCloudQueryStore } from '@/store/modules/cloudquery';
// 地类分割
import { splitAndCalTubanArea } from '@/api/sys/layerManagement';
import { CalTubanAreaModel } from '@/api/sys/model/layerModel';
import { AddDroneTask, LoadLandType, AddDroneLandTask, LoadCloudQueryByCaseNo } from '@/api/demo/cloudQuery';
import { signal } from '@/utils/signalR';
// 坐标系转换
@ -401,13 +405,200 @@
caseid:null,
})
// 选择地类类型
// 地类分割图斑
const handlerSelectLandType = ()=>{
splitPanelVisible.value = false;
LoadLandType().then(res=>{
landTypeList.value = res;
})
landTypeVisible.value = true;
emit('handlerStartSpliting',true);
try{
let geom = GeojsonToWkt(JSON.parse(JSON.stringify(currentGeoJson.value.geometry)));
let calAreaParams = {
"wktgeom":geom,
"type":"gengdi"
}
splitAndCalTubanArea(calAreaParams).then(res=>{
if(res){
let splitAfterFeatures = {
type: 'FeatureCollection',
features: [],
};
// 耕地
if(res.gengdituban && !res.gengdituban.match("EMPTY")){
let geometry = WktToGeojson(res.gengdituban)
// let geometry = WktToGeojson("POLYGON((118.20453045 34.61493194,118.2043834 34.61496477,118.20439868 34.61503472,118.20453843 34.61501303,118.20453045 34.61493194))");
let feature = {
"type": "Feature",
"properties": {
"id": generateUUID()
},
"geometry": geometry
}
splitAfterFeatures.features.push(feature)
}
// 农用地
if(res.nongyongdituban && !res.nongyongdituban.match("EMPTY")){
let geometry = WktToGeojson(res.nongyongdituban)
// let geometry = WktToGeojson("POLYGON((118.20453902 34.61501903,118.20453045 34.61493194,118.20453843 34.61501303,118.20439868 34.61503472,118.2043834 34.61496477,118.20441053 34.61508898,118.20387087 34.61518892,118.20387087 34.61526887,118.20442195 34.61517464,118.20442195 34.61515465,118.2048474 34.61509184,118.20482741 34.61498048,118.20453902 34.61501903))")
let feature = {
"type": "Feature",
"properties": {
"id": generateUUID()
},
"geometry": geometry
}
splitAfterFeatures.features.push(feature)
}
// 基本农田
if(res.jibennongtiantuban && !res.jibennongtiantuban.match("EMPTY")){
let geometry = WktToGeojson(res.jibennongtiantuban)
let feature = {
"type": "Feature",
"properties": {
"id": generateUUID()
},
"geometry": geometry
}
splitAfterFeatures.features.push(feature)
}
//
if(res.remaintuban && !res.remaintuban.match("EMPTY")){
let geometry = WktToGeojson(res.remaintuban)
let feature = {
"type": "Feature",
"properties": {
"id": generateUUID()
},
"geometry": geometry
}
splitAfterFeatures.features.push(feature)
}
// 生态保护红线
if(res.shengtaihongxiantuban && !res.shengtaihongxiantuban.match("EMPTY")){
let geometry = WktToGeojson(res.shengtaihongxiantuban)
let feature = {
"type": "Feature",
"properties": {
"id": generateUUID()
},
"geometry": geometry
}
splitAfterFeatures.features.push(feature)
}
console.log("splitAfterFeatures",splitAfterFeatures);
// 分割数据返回父组件中
emit('handlerSplitPolygon', splitAfterFeatures.features);
handlerUnDraw();
}
}).catch((e)=>{
emit('handlerStartSpliting',false);
})
}catch(e){
emit('handlerStartSpliting',false);
}
// let res = {
// "wktgeom": null,
// "gengdi": 0.17,
// "nongyongdi": 1.64,
// "jibennongtian": 0,
// "shengtaihongxian": 0,
// "gengdituban": "POLYGON((118.204530452946 34.6149319373947,118.204383402255 34.6149647739564,118.20439867709747 34.6150347166548,118.2045384290743 34.61501302803828,118.204530452946 34.6149319373947))",
// "nongyongdituban": "POLYGON((118.204827409679 34.6149804783991,118.204539019005 34.6150190256674,118.204530452946 34.6149319373947,118.204383402255 34.6149647739564,118.204410528111 34.615088981821,118.203870866355 34.6151889191832,118.203870866355 34.6152688690729,118.204421949524 34.6151746424171,118.204421949524 34.6151546549447,118.204847397152 34.6150918371741,118.204827409679 34.6149804783991))",
// "jibennongtiantuban": "",
// "shengtaihongxiantuban": "",
// "remaintuban": "POLYGON EMPTY"
// }
// if(res){
// let splitAfterFeatures = {
// type: 'FeatureCollection',
// features: [],
// };
// // 耕地
// if(res.gengdituban && !res.gengdituban.match("EMPTY")){
// let geometry = WktToGeojson(res.gengdituban)
// let feature = {
// "type": "Feature",
// "properties": {
// "id": generateUUID()
// },
// "geometry": geometry
// }
// splitAfterFeatures.features.push(feature)
// }
// // 农用地
// if(res.nongyongdituban && !res.nongyongdituban.match("EMPTY")){
// let geometry = WktToGeojson(res.nongyongdituban)
// let feature = {
// "type": "Feature",
// "properties": {
// "id": generateUUID()
// },
// "geometry": geometry
// }
// splitAfterFeatures.features.push(feature)
// }
// // 基本农田
// if(res.jibennongtiantuban && !res.jibennongtiantuban.match("EMPTY")){
// let geometry = WktToGeojson(res.jibennongtiantuban)
// let feature = {
// "type": "Feature",
// "properties": {
// "id": generateUUID()
// },
// "geometry": geometry
// }
// splitAfterFeatures.features.push(feature)
// }
// //
// if(res.remaintuban && !res.remaintuban.match("EMPTY")){
// let geometry = WktToGeojson(res.remaintuban)
// let feature = {
// "type": "Feature",
// "properties": {
// "id": generateUUID()
// },
// "geometry": geometry
// }
// splitAfterFeatures.features.push(feature)
// }
// // 生态保护红线
// if(res.shengtaihongxiantuban && !res.shengtaihongxiantuban.match("EMPTY")){
// let geometry = WktToGeojson(res.shengtaihongxiantuban)
// let feature = {
// "type": "Feature",
// "properties": {
// "id": generateUUID()
// },
// "geometry": geometry
// }
// splitAfterFeatures.features.push(feature)
// }
// // 分割数据返回父组件中
// emit('handlerSplitPolygon', splitAfterFeatures.features);
// handlerUnDraw();
// }
// splitAndCalTubanArea(calAreaParams).then(res=>{
// })
// splitPanelVisible.value = false;
// LoadLandType().then(res=>{
// landTypeList.value = res;
// })
// landTypeVisible.value = true;
}
// 使用地类分割
@ -589,6 +780,7 @@
'handlerDrawComplete',
'handlerGetFormDetail',
'handlerSplitPolygon',
'handlerStartSpliting',
'onFeatureClick',
]);
@ -967,7 +1159,7 @@
splitPolygon.geometry.coordinates[0][index] = [item[0],item[1]];
})
//console.log("editGeoJson",editGeoJson.value);
console.log("splitLineString",splitLineString);
let features = splitPolygonByLine(splitLineString, JSON.parse(JSON.stringify(editGeoJson.value)));
if(features){
@ -979,6 +1171,7 @@
splitAfterFeatures.features = tempFeatures;
console.log("tempFeatures",tempFeatures);
// 分割数据返回父组件中
emit('handlerSplitPolygon', tempFeatures);
@ -1370,6 +1563,7 @@
};
const handlerCancleDraw = () => {
if (drawTool) {
map.removeControl(drawTool);
drawTool = null;

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

@ -41,6 +41,7 @@ export function splitPolygonByLine(line, outerPolygon) {
}else if(outerPolygon.geometry.type == "Polygon"){
// 如果是Polygon的单图斑 直接获取分割结果
let splitRes = splitByLine(line,outerPolygon);
// 如果有数据就拼接数据
if(splitRes){
splitAfterFeatures = splitAfterFeatures.concat(splitRes);
@ -49,7 +50,6 @@ export function splitPolygonByLine(line, outerPolygon) {
splitAfterFeatures = splitAfterFeatures.concat(outerPolygon);
}
}
//console.log("splitAfterFeatures",splitAfterFeatures)
return splitAfterFeatures;
@ -163,7 +163,7 @@ function splitByLine(line,outerPolygon){
//console.log("第1步：传入的分割线数据",line);
//console.log("第2步：传入的分割面数据",outerPolygon)
// console.log("第2步：传入的分割面数据",outerPolygon)
// 处理被分割的面数据坐标小数点保留多少位
@ -180,7 +180,7 @@ function splitByLine(line,outerPolygon){
//将点合并成MultiPoint
let intersectCombined = turf.combine(intersectCollection).features[0];
//console.log("第5步：分割后所有点数据",intersectCombined)
console.log("第5步：分割后所有点数据",intersectCombined)
//分别获取切割线
@ -195,11 +195,11 @@ function splitByLine(line,outerPolygon){
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) => {

31
src/components/MapboxMaps/src/WktGeojsonTransform.ts
View File

@ -15,4 +15,33 @@ const GeojsonToWkt = (geojsonData)=> {
}
export {WktToGeojson,GeojsonToWkt}
const removeZM = (geoJSON) => {
function removeZMFromCoords(coords) {
return coords.map((coord) => [coord[0], coord[1]]); // 只保留 X 和 Y
}
switch (geoJSON.type) {
case 'Point':
geoJSON.coordinates = removeZMFromCoords([geoJSON.coordinates]).flat();
break;
case 'LineString':
case 'MultiPoint':
geoJSON.coordinates = removeZMFromCoords(geoJSON.coordinates);
break;
case 'Polygon':
case 'MultiLineString':
geoJSON.coordinates = geoJSON.coordinates.map((ring) => removeZMFromCoords(ring));
break;
case 'MultiPolygon':
geoJSON.coordinates = geoJSON.coordinates.map((polygon) =>
polygon.map((ring) => removeZMFromCoords(ring))
);
break;
default:
throw new Error(`Unsupported geometry type: ${geoJSON.type}`);
}
return geoJSON;
}
export {WktToGeojson,GeojsonToWkt,removeZM}

149
src/views/demo/degraining/curbspotcity/MapList/SplitPolygonModal/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div class="detail-container">
<!-- 加载框 -->
<div class="load-mask" v-if="isLandTypeSpliting">
<a-spin class="loader-block" size="large" tip="正在分割中......" />
</div>
<div class="left-container">
<a-divider orientation="left">图斑信息</a-divider>
<div class="map-container">
@ -7,6 +12,7 @@
:geomsList="geomsList"
:mapConfig="mapConfig"
@handlerSplitPolygon="handlerSplitPolygon"
@handlerStartSpliting="handlerStartSpliting"
@mapOnLoad="onMapboxLoad"
:caseid="id"
:caseno="props.showInfoData.case_no"
@ -691,14 +697,14 @@
import axios from 'axios';
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
import { getConfig } from '@/api/sys/layerManagement';
import { getGeom } from '@/api/sys/layerManagement';
import { getGeom,calTubanArea } from '@/api/sys/layerManagement';
import { CaseSplit } from '@/api/degraining/index';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage();
import Icon from '@/components/Icon/Icon.vue';
import { getAppEnvConfig } from '@/utils/env';
const { VITE_GLOB_API_URL, VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
import { GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import { GeojsonToWkt,removeZM } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import {
mapTypeOptions,
illegalTypeOptions,
@ -952,6 +958,7 @@
///////// File Preview && Download ////////
import FilePreview from '@/components/Upload/src/components/FilePreview.vue';
import { CalTubanAreaModel } from '@/api/sys/model/layerModel';
const previewFileModalVisible = ref(false);
const previewFileUrl = ref("");
@ -974,74 +981,100 @@
return document.getElementById('info-container');
};
const isLandTypeSpliting = ref<Boolean>(false);
// 开始分割
const handlerStartSpliting = (e)=> {
isLandTypeSpliting.value = e;
}
const splitPolygonForm = ref([]);
const splitAfterPolygon = ref([]);
const handlerSplitPolygon = (e) => {
// splitPolygonForm.value = [];
// 删除被分割的图斑
if(currentPolygon.value){
splitPolygonForm.value?.splice(currentPolygon.value,1);
splitAfterPolygon.value?.splice(currentPolygon.value,1);
}
let sumArea = 0.0;
e?.forEach((item, index) => {
var polygon = null;
if(item.geometry.type == 'Polygon'){
polygon = turf.polygon(item.geometry.coordinates)
}else if(item.geometry.type == 'MultiPolygon'){
polygon = turf.multiPolygon(item.geometry.coordinates)
}
let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
if(index == e.length-1){
are = (parseFloat(area) - sumArea).toFixed(2);
isLandTypeSpliting.value = false;
// 面积计算
let sumArea = 0.0;
e?.forEach((item, index) => {
// 去除GeoJSON Z坐标
let afterItem = removeZM(item['geometry'])
let calAreaParams:CalTubanAreaModel = {
"wktgeom": GeojsonToWkt(item['geometry']),
}
sumArea = sumArea + are;
let form = {
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: are > 0 ? are : 0.00,
geom: item,
checked:false,
};
splitPolygonForm.value?.push(form);
splitAfterPolygon.value?.push(form.geom)
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);
}
})
// var polygon = null;
// if(item.geometry.type == 'Polygon'){
// polygon = turf.polygon(item.geometry.coordinates)
// }else if(item.geometry.type == 'MultiPolygon'){
// polygon = turf.multiPolygon(item.geometry.coordinates)
// }
// let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
// if(index == e.length-1){
// are = (parseFloat(area) - sumArea).toFixed(2);
// }
// sumArea = sumArea + are;
});
// 分割完成后重新渲染面数据
let splitAfterFeatures = {
type: 'FeatureCollection',
features: [],
};
splitPolygonForm.value?.forEach((item,idnex)=>{
splitAfterFeatures.features.push(item.geom);
})
// splitAfterFeatures.features = e;
const areKeyDownChange =
MapboxComponent.value.handlerDetails(splitAfterFeatures);
// 清空选中图斑
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 },
@ -1051,6 +1084,7 @@ const areKeyDownChange =
};
const handlerEditPolygonInfo = (e) => {
console.log(e);
};
@ -1377,6 +1411,21 @@ const areKeyDownChange =
width: calc(100vw - 15px);
height: calc(100vh - 120px);
display: flex;
.load-mask{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
background:rgba(0,0,0,0.5);
z-index:9999;
.loader-block{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
}
.left-container {
flex: 1;
height: 100%;

144
src/views/demo/inspectionaudit/curbspotcity/MapList/SplitPolygonModal/index.vue
View File

@ -1,5 +1,11 @@
<template>
<div class="detail-container">
<!-- 加载框 -->
<div class="load-mask" v-if="isLandTypeSpliting">
<a-spin class="loader-block" size="large" tip="正在分割中......" />
</div>
<!-- 左侧地图 -->
<div class="left-container">
<a-divider orientation="left">图斑信息</a-divider>
<div class="map-container">
@ -7,6 +13,7 @@
:geomsList="geomsList"
:mapConfig="mapConfig"
@handlerSplitPolygon="handlerSplitPolygon"
@handlerStartSpliting="handlerStartSpliting"
@mapOnLoad="onMapboxLoad"
:caseid="id"
:caseno="case_no"
@ -376,7 +383,7 @@
</a-tabs>
</div>
</div>
<!-- 右侧列表 -->
<div class="right-container">
<a-divider orientation="left">图斑分割结果 </a-divider>
<div class="data-list">
@ -619,14 +626,15 @@
import axios from 'axios';
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
import { getConfig } from '@/api/sys/layerManagement';
import { getGeom } from '@/api/sys/layerManagement';
import { getGeom,calTubanArea } from '@/api/sys/layerManagement';
import { CalTubanAreaModel } from '@/api/sys/model/layerModel';
import { splitCase } from '@/api/inspectionaudit';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage();
import Icon from '@/components/Icon/Icon.vue';
import { getAppEnvConfig } from '@/utils/env';
const { VITE_GLOB_API_URL, VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
import { GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import { GeojsonToWkt,removeZM } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import {
mapTypeOptions,
illegalTypeOptions,
@ -903,76 +911,99 @@ import { itemProps } from '@/components/Menu/src/props';
return document.getElementById('info-container');
};
const isLandTypeSpliting = ref<Boolean>(false);
// 开始分割
const handlerStartSpliting = (e)=> {
isLandTypeSpliting.value = e;
}
const splitPolygonForm = ref([]);
const splitAfterPolygon = ref([]);
const handlerSplitPolygon = (e) => {
// splitPolygonForm.value = [];
// 删除被分割的图斑
if(currentPolygon.value){
splitPolygonForm.value?.splice(currentPolygon.value,1);
splitAfterPolygon.value?.splice(currentPolygon.value,1);
}
isLandTypeSpliting.value = false;
// 面积计算
let sumArea = 0.0;
e?.forEach((item, index) => {
// 去除GeoJSON Z坐标
let afterItem = removeZM(item['geometry'])
var polygon = null;
if(item.geometry.type == 'Polygon'){
polygon = turf.polygon(item.geometry.coordinates)
}else if(item.geometry.type == 'MultiPolygon'){
polygon = turf.multiPolygon(item.geometry.coordinates)
let calAreaParams:CalTubanAreaModel = {
"wktgeom": GeojsonToWkt(item['geometry']),
}
let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
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,
};
if(index == e.length-1){
are = (parseFloat(area) - sumArea).toFixed(2);
}
sumArea = sumArea + are;
splitPolygonForm.value?.push(form);
splitAfterPolygon.value?.push(form.geom)
let form = {
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: are > 0 ? are : 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);
}
})
// var polygon = null;
// if(item.geometry.type == 'Polygon'){
// polygon = turf.polygon(item.geometry.coordinates)
// }else if(item.geometry.type == 'MultiPolygon'){
// polygon = turf.multiPolygon(item.geometry.coordinates)
// }
// let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
// if(index == e.length-1){
// are = (parseFloat(area) - sumArea).toFixed(2);
// }
// sumArea = sumArea + are;
});
// 分割完成后重新渲染面数据
let splitAfterFeatures = {
type: 'FeatureCollection',
features: [],
};
splitPolygonForm.value?.forEach((item,idnex)=>{
splitAfterFeatures.features.push(item.geom);
})
// splitAfterFeatures.features = e;
const areKeyDownChange =
MapboxComponent.value.handlerDetails(splitAfterFeatures);
// 清空选中图斑
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 },
@ -1296,6 +1327,21 @@ const areKeyDownChange =
width: calc(100vw - 15px);
height: calc(100vh - 120px);
display: flex;
.load-mask{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
background:rgba(0,0,0,0.5);
z-index:9999;
.loader-block{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
}
.left-container {
flex: 1;
height: 100%;

142
src/views/demo/keyproblem/keyissuesI/curbspotcity/MapList/SplitPolygonModal/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div class="detail-container">
<!-- 加载框 -->
<div class="load-mask" v-if="isLandTypeSpliting">
<a-spin class="loader-block" size="large" tip="正在分割中......" />
</div>
<div class="left-container">
<a-divider orientation="left">图斑信息</a-divider>
<div class="map-container">
@ -9,6 +14,7 @@
:geomsList="geomsList"
:mapConfig="mapConfig"
@handlerSplitPolygon="handlerSplitPolygon"
@handlerStartSpliting="handlerStartSpliting"
@mapOnLoad="onMapboxLoad"
:splitPlugin="true"
@onFeatureClick="onFeatureClick"
@ -506,14 +512,14 @@
import axios from 'axios';
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
import { getConfig } from '@/api/sys/layerManagement';
import { getGeom } from '@/api/sys/layerManagement';
import { getGeom,calTubanArea } from '@/api/sys/layerManagement';
import { splitCase } from '@/api/keyproblem/keyissuesI';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage();
import Icon from '@/components/Icon/Icon.vue';
import { getAppEnvConfig } from '@/utils/env';
const { VITE_GLOB_API_URL, VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
import { GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import { GeojsonToWkt,removeZM } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import {
mapTypeOptions,
illegalTypeOptions,
@ -782,74 +788,101 @@ import { itemProps } from '@/components/Menu/src/props';
return document.getElementById('info-container');
};
const isLandTypeSpliting = ref<Boolean>(false);
// 开始分割
const handlerStartSpliting = (e)=> {
isLandTypeSpliting.value = e;
}
const splitPolygonForm = ref([]);
const splitAfterPolygon = ref([]);
const handlerSplitPolygon = (e) => {
// splitPolygonForm.value = [];
// 删除被分割的图斑
if(currentPolygon.value){
splitPolygonForm.value?.splice(currentPolygon.value,1);
splitAfterPolygon.value?.splice(currentPolygon.value,1);
}
isLandTypeSpliting.value = false;
// 面积计算
let sumArea = 0.0;
e?.forEach((item, index) => {
var polygon = null;
if(item.geometry.type == 'Polygon'){
polygon = turf.polygon(item.geometry.coordinates)
}else if(item.geometry.type == 'MultiPolygon'){
polygon = turf.multiPolygon(item.geometry.coordinates)
}
let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
// 去除GeoJSON Z坐标
let afterItem = removeZM(item['geometry'])
if(index == e.length-1){
are = (parseFloat(area) - sumArea).toFixed(2);
let calAreaParams:CalTubanAreaModel = {
"wktgeom": GeojsonToWkt(item['geometry']),
}
sumArea = sumArea + are;
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,
};
let form = {
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: are > 0 ? are : 0.00,
geom: item,
checked:false,
};
splitPolygonForm.value?.push(form);
splitAfterPolygon.value?.push(form.geom)
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);
}
})
// var polygon = null;
// if(item.geometry.type == 'Polygon'){
// polygon = turf.polygon(item.geometry.coordinates)
// }else if(item.geometry.type == 'MultiPolygon'){
// polygon = turf.multiPolygon(item.geometry.coordinates)
// }
// let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
// if(index == e.length-1){
// are = (parseFloat(area) - sumArea).toFixed(2);
// }
// sumArea = sumArea + are;
});
// 分割完成后重新渲染面数据
let splitAfterFeatures = {
type: 'FeatureCollection',
features: [],
};
splitPolygonForm.value?.forEach((item,idnex)=>{
splitAfterFeatures.features.push(item.geom);
})
// splitAfterFeatures.features = e;
MapboxComponent.value.handlerDetails(splitAfterFeatures);
// 清空选中图斑
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 },
@ -1173,6 +1206,21 @@ import { itemProps } from '@/components/Menu/src/props';
width: calc(100vw - 15px);
height: calc(100vh - 120px);
display: flex;
.load-mask{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
background:rgba(0,0,0,0.5);
z-index:9999;
.loader-block{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
}
.left-container {
flex: 1;
height: 100%;

141
src/views/demo/keyproblem/keyissuesII/curbspotcity/MapList/SplitPolygonModal/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div class="detail-container">
<!-- 加载框 -->
<div class="load-mask" v-if="isLandTypeSpliting">
<a-spin class="loader-block" size="large" tip="正在分割中......" />
</div>
<div class="left-container">
<a-divider orientation="left">图斑信息</a-divider>
<div class="map-container">
@ -9,6 +14,7 @@
:geomsList="geomsList"
:mapConfig="mapConfig"
@handlerSplitPolygon="handlerSplitPolygon"
@handlerStartSpliting="handlerStartSpliting"
@mapOnLoad="onMapboxLoad"
:splitPlugin="true"
@onFeatureClick="onFeatureClick"
@ -506,14 +512,14 @@
import axios from 'axios';
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
import { getConfig } from '@/api/sys/layerManagement';
import { getGeom } from '@/api/sys/layerManagement';
import { getGeom,calTubanArea } from '@/api/sys/layerManagement';
import { splitCase } from '@/api/keyproblem/keyissuesII';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage();
import Icon from '@/components/Icon/Icon.vue';
import { getAppEnvConfig } from '@/utils/env';
const { VITE_GLOB_API_URL, VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
import { GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import { GeojsonToWkt,removeZM } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import {
mapTypeOptions,
illegalTypeOptions,
@ -780,74 +786,100 @@ const handleCancelPreviewFile = ()=>{
return document.getElementById('info-container');
};
const isLandTypeSpliting = ref<Boolean>(false);
// 开始分割
const handlerStartSpliting = (e)=> {
isLandTypeSpliting.value = e;
}
const splitPolygonForm = ref([]);
const splitAfterPolygon = ref([]);
const handlerSplitPolygon = (e) => {
// splitPolygonForm.value = [];
// 删除被分割的图斑
if(currentPolygon.value){
splitPolygonForm.value?.splice(currentPolygon.value,1);
splitAfterPolygon.value?.splice(currentPolygon.value,1);
}
isLandTypeSpliting.value = false;
// 面积计算
let sumArea = 0.0;
e?.forEach((item, index) => {
var polygon = null;
if(item.geometry.type == 'Polygon'){
polygon = turf.polygon(item.geometry.coordinates)
}else if(item.geometry.type == 'MultiPolygon'){
polygon = turf.multiPolygon(item.geometry.coordinates)
}
let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
// 去除GeoJSON Z坐标
let afterItem = removeZM(item['geometry'])
if(index == e.length-1){
are = (parseFloat(area) - sumArea).toFixed(2);
let calAreaParams:CalTubanAreaModel = {
"wktgeom": GeojsonToWkt(item['geometry']),
}
sumArea = sumArea + are;
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,
};
let form = {
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: are > 0 ? are : 0.00,
geom: item,
checked:false,
};
splitPolygonForm.value?.push(form);
splitAfterPolygon.value?.push(form.geom)
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);
}
})
// var polygon = null;
// if(item.geometry.type == 'Polygon'){
// polygon = turf.polygon(item.geometry.coordinates)
// }else if(item.geometry.type == 'MultiPolygon'){
// polygon = turf.multiPolygon(item.geometry.coordinates)
// }
// let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
// if(index == e.length-1){
// are = (parseFloat(area) - sumArea).toFixed(2);
// }
// sumArea = sumArea + are;
});
// 分割完成后重新渲染面数据
let splitAfterFeatures = {
type: 'FeatureCollection',
features: [],
};
splitPolygonForm.value?.forEach((item,idnex)=>{
splitAfterFeatures.features.push(item.geom);
})
// splitAfterFeatures.features = e;
MapboxComponent.value.handlerDetails(splitAfterFeatures);
// 清空选中图斑
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 },
@ -1171,6 +1203,21 @@ const handleCancelPreviewFile = ()=>{
width: calc(100vw - 15px);
height: calc(100vh - 120px);
display: flex;
.load-mask{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
background:rgba(0,0,0,0.5);
z-index:9999;
.loader-block{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
}
.left-container {
flex: 1;
height: 100%;

56
src/views/demo/onlineform/formCall/index.vue
View File

@ -159,6 +159,7 @@
const btnArr: any = ref([
{ label: '新增', prop: 'Add', class: 'primary' },
{ label: '编辑', prop: 'Edit', class: 'success' },
{ label: '审核', prop: 'Examine', class: 'success' },
{ label: '删除', prop: 'Delete', class: 'error' },
{ label: '详情', prop: 'Details', class: 'default' },
]);
@ -562,6 +563,59 @@
isUpdate.value = true;
}
break;
case 'Examine':
if (rows.length == 0) {
return createMessage.warn('请选择一条数据进行审核');
}
// console.log('rowsrows',formConfig,rows);
btnList.value.forEach((element) => {
if (element.prop === 'Examine' && element.isWFlow) {
flowCode.value = element.wFlowCode;
}
});
if (flowCode.value == '') {
let toProps = {
isDetail: false,
isUpdate: true,
tab: config.schemas,
record: rows[0],
recordChildren: formData.value,
query: query.value,
btnList: btnList.value,
beforeSetData: config.beforeSetData,
afterValidateForm: config.afterValidateForm,
afterSaveEvent: config.afterSaveEvent,
changeDataEvent: config.changeDataEvent,
infoUseMainTableData: infoUseMainTableData.value,
infoUseSubTableData: infoUseSubTableData.value,
};
if (haveMap.value) {
// showFormModalData.value = toProps;
// openShowFormModal.value = true;
// openMapFormModal(true,toProps);
// mapFormShow.value = true;
// mapFormData.value = toProps;
// MapboxComponent.value.handlerDraw(
// status,
// mapgemoList.value,
// mapSetData.value?.isAllowEditPolygon,
// );
// openModal(true, toProps);
// previewOpen.value = true;
// flowFormData.value = rows[0];
// isUpdate.value = true;
openModal(true, toProps);
} else {
openModal(true, toProps);
}
} else {
previewOpen.value = true;
flowFormData.value = rows[0];
isUpdate.value = true;
}
break;
case 'Delete':
if (rows.length == 0) {
return createMessage.warn('请选择一条数据进行删除');
@ -584,7 +638,7 @@
});
},
});
break;
break;
case 'Details':
if (rows.length == 0) {
return createMessage.warn('请选择一条数据查看详情');

4
src/views/demo/onlineform/formModule/config/btns.vue
View File

@ -21,12 +21,12 @@
/>
</template>
<template v-if="column.key === 'isWFlow'">
<div v-if="record.prop == 'Add' || record.prop == 'Edit'">
<div v-if="record.prop == 'Add' || record.prop == 'Edit' || record.prop == 'Examine' ">
<a-switch v-model:checked="record.isWFlow" />
</div>
</template>
<template v-if="column.key === 'wFlowCode'">
<div v-if="record.prop == 'Add' || record.prop == 'Edit'">
<div v-if="record.prop == 'Add' || record.prop == 'Edit' || record.prop == 'Examine' ">
<a-select
placeholder="请选择"
size="small"

9
src/views/demo/onlineform/formModule/modalDesign.vue
View File

@ -177,6 +177,15 @@
class: 'success',
sort: 3,
},
{
label: '审核',
id: 'Examine',
prop: 'Examine',
icon: 'ant-design:edit-outlined',
isRowBtn: true,
class: 'success',
sort: 3,
},
{
label: '删除',
id: 'Delete',

146
src/views/demo/redlinesupervision/curbspotcity/MapList/SplitPolygonModal/index.vue
View File

@ -1,5 +1,11 @@
<template>
<div class="detail-container">
<!-- 加载框 -->
<div class="load-mask" v-if="isLandTypeSpliting">
<a-spin class="loader-block" size="large" tip="正在分割中......" />
</div>
<div class="left-container">
<a-divider orientation="left">图斑信息</a-divider>
<div class="map-container">
@ -9,6 +15,7 @@
:geomsList="geomsList"
:mapConfig="mapConfig"
@handlerSplitPolygon="handlerSplitPolygon"
@handlerStartSpliting="handlerStartSpliting"
@mapOnLoad="onMapboxLoad"
:splitPlugin="true"
@onFeatureClick="onFeatureClick"
@ -537,14 +544,15 @@
import axios from 'axios';
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
import { getConfig } from '@/api/sys/layerManagement';
import { getGeom } from '@/api/sys/layerManagement';
import { getGeom,calTubanArea } from '@/api/sys/layerManagement';
import { CalTubanAreaModel } from '@/api/sys/model/layerModel';
import { splitCase } from '@/api/redlinesupervision/index';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage();
import Icon from '@/components/Icon/Icon.vue';
import { getAppEnvConfig } from '@/utils/env';
const { VITE_GLOB_API_URL, VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
import { GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import { GeojsonToWkt,removeZM } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import {
mapTypeOptions,
illegalTypeOptions,
@ -812,79 +820,106 @@
return document.getElementById('info-container');
};
const isLandTypeSpliting = ref<Boolean>(false);
// 开始分割
const handlerStartSpliting = (e)=> {
isLandTypeSpliting.value = e;
}
const splitPolygonForm = ref([]);
const splitAfterPolygon = ref([]);
const handlerSplitPolygon = (e) => {
// splitPolygonForm.value = [];
// 删除被分割的图斑
if (currentPolygon.value) {
splitPolygonForm.value?.splice(currentPolygon.value, 1);
splitAfterPolygon.value?.splice(currentPolygon.value, 1);
if(currentPolygon.value){
splitPolygonForm.value?.splice(currentPolygon.value,1);
splitAfterPolygon.value?.splice(currentPolygon.value,1);
}
isLandTypeSpliting.value = false;
// 面积计算
let sumArea = 0.0;
e?.forEach((item, index) => {
// 去除GeoJSON Z坐标
let afterItem = removeZM(item['geometry'])
var polygon = null;
if(item.geometry.type == 'Polygon'){
polygon = turf.polygon(item.geometry.coordinates)
}else if(item.geometry.type == 'MultiPolygon'){
polygon = turf.multiPolygon(item.geometry.coordinates)
let calAreaParams:CalTubanAreaModel = {
"wktgeom": GeojsonToWkt(item['geometry']),
}
let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
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,
};
if(index == e.length-1){
are = (parseFloat(area) - sumArea).toFixed(2);
}
sumArea = sumArea + are;
splitPolygonForm.value?.push(form);
splitAfterPolygon.value?.push(form.geom)
let form = {
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: are > 0 ? are : 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);
}
})
// var polygon = null;
// if(item.geometry.type == 'Polygon'){
// polygon = turf.polygon(item.geometry.coordinates)
// }else if(item.geometry.type == 'MultiPolygon'){
// polygon = turf.multiPolygon(item.geometry.coordinates)
// }
// let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
// if(index == e.length-1){
// are = (parseFloat(area) - sumArea).toFixed(2);
// }
// sumArea = sumArea + are;
});
// 分割完成后重新渲染面数据
let splitAfterFeatures = {
type: 'FeatureCollection',
features: [],
};
splitPolygonForm.value?.forEach((item, idnex) => {
splitAfterFeatures.features.push(item.geom);
});
// splitAfterFeatures.features = e;
MapboxComponent.value.handlerDetails(splitAfterFeatures);
// 清空选中图斑
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;
};
const handlerEditPolygonInfo = (e) => {
@ -1192,6 +1227,21 @@
width: calc(100vw - 15px);
height: calc(100vh - 120px);
display: flex;
.load-mask{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
background:rgba(0,0,0,0.5);
z-index:9999;
.loader-block{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
}
.left-container {
flex: 1;
height: 100%;

150
src/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div class="detail-container">
<!-- 加载框 -->
<div class="load-mask" v-if="isLandTypeSpliting">
<a-spin class="loader-block" size="large" tip="正在分割中......" />
</div>
<div class="left-container">
<a-divider orientation="left">图斑信息</a-divider>
<div class="map-container">
@ -7,6 +12,7 @@
:geomsList="geomsList"
:mapConfig="mapConfig"
@handlerSplitPolygon="handlerSplitPolygon"
@handlerStartSpliting="handlerStartSpliting"
@mapOnLoad="onMapboxLoad"
:caseid="id"
:caseno="case_no"
@ -616,14 +622,14 @@
import axios from 'axios';
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
import { getConfig } from '@/api/sys/layerManagement';
import { getGeom } from '@/api/sys/layerManagement';
import { getGeom,calTubanArea } from '@/api/sys/layerManagement';
import { splitCase } from '@/api/tiankongdi';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage();
import Icon from '@/components/Icon/Icon.vue';
import { getAppEnvConfig } from '@/utils/env';
const { VITE_GLOB_API_URL, VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
import { GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import { GeojsonToWkt, removeZM} from '@/components/MapboxMaps/src/WktGeojsonTransform';
import {
mapTypeOptions,
@ -859,6 +865,7 @@ import { itemProps } from '@/components/Menu/src/props';
geomsList.value = geoms;
});
}
// MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
MapboxComponent.value.handlerDraw('Details', geoms, false);
} else {
@ -876,6 +883,7 @@ import { itemProps } from '@/components/Menu/src/props';
///////// File Preview && Download ////////
import FilePreview from '@/components/Upload/src/components/FilePreview.vue';
import { CalTubanAreaModel } from '@/api/sys/model/layerModel';
const previewFileModalVisible = ref(false);
const previewFileUrl = ref("");
@ -898,75 +906,95 @@ import { itemProps } from '@/components/Menu/src/props';
const getContainer = () => {
return document.getElementById('info-container');
};
const isLandTypeSpliting = ref<Boolean>(false);
// 开始分割
const handlerStartSpliting = (e)=> {
isLandTypeSpliting.value = e;
}
const splitPolygonForm = ref([]);
const splitAfterPolygon = ref([]);
const handlerSplitPolygon = (e) => {
// 删除被分割的图斑
if(currentPolygon.value){
splitPolygonForm.value?.splice(currentPolygon.value,1);
splitAfterPolygon.value?.splice(currentPolygon.value,1);
}
isLandTypeSpliting.value = false;
// 面积计算
let sumArea = 0.0;
e?.forEach((item, index) => {
var polygon = null;
if(item.geometry.type == 'Polygon'){
polygon = turf.polygon(item.geometry.coordinates)
}else if(item.geometry.type == 'MultiPolygon'){
polygon = turf.multiPolygon(item.geometry.coordinates)
// 去除GeoJSON Z坐标
let afterItem = removeZM(item['geometry'])
let calAreaParams:CalTubanAreaModel = {
"wktgeom": GeojsonToWkt(item['geometry']),
}
let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
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,
};
if(index == e.length-1){
are = (parseFloat(area) - sumArea).toFixed(2);
}
sumArea = sumArea + are;
splitPolygonForm.value?.push(form);
splitAfterPolygon.value?.push(form.geom)
let form = {
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: are > 0 ? are : 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);
}
})
// var polygon = null;
// if(item.geometry.type == 'Polygon'){
// polygon = turf.polygon(item.geometry.coordinates)
// }else if(item.geometry.type == 'MultiPolygon'){
// polygon = turf.multiPolygon(item.geometry.coordinates)
// }
// let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
// if(index == e.length-1){
// are = (parseFloat(area) - sumArea).toFixed(2);
// }
// sumArea = sumArea + are;
});
// 分割完成后重新渲染面数据
let splitAfterFeatures = {
type: 'FeatureCollection',
features: [],
};
splitPolygonForm.value?.forEach((item,idnex)=>{
console.log("item.geom",item.geom);
splitAfterFeatures.features.push(item.geom);
})
// splitAfterFeatures.features = e;
const areKeyDownChange =
MapboxComponent.value.handlerDetails(splitAfterFeatures);
// 清空选中图斑
let geoms = {
type: 'FeatureCollection',
@ -1238,6 +1266,9 @@ const areKeyDownChange =
};
params.parts.push(polygon);
});
try{
splitCase(params).then((res) => {
if (res) {
@ -1257,7 +1288,7 @@ const areKeyDownChange =
nongyongdi_area: false,
gengdi_area: false,
yongjiujibennongtian_area: false,
shengtaibaohuhongxian_area: false,
shengtaibaohuhongxian_area: false,
guotukongjianguihua_area: false,
zhongdianquyu_area: false,
area: false,
@ -1318,6 +1349,21 @@ const areKeyDownChange =
width: calc(100vw - 15px);
height: calc(100vh - 120px);
display: flex;
.load-mask{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
background:rgba(0,0,0,0.5);
z-index:9999;
.loader-block{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
}
.left-container {
flex: 1;
height: 100%;