From 93dc385dc599cc5e03daf711945bdbc5bac29fd0 Mon Sep 17 00:00:00 2001 From: helloxujingliang <3225043@qq.com> Date: Mon, 21 Apr 2025 15:55:02 +0800 Subject: [PATCH] =?UTF-8?q?=E7=9B=91=E6=8E=A7=E5=92=8C=E6=97=A0=E4=BA=BA?= =?UTF-8?q?=E6=9C=BA=E5=BC=B9=E7=AA=97=E9=87=8D=E5=8F=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/sys/layerManagement.ts | 9 ++ src/components/MapboxMaps/MapComponent.vue | 87 +++++++++++++++++-- src/components/MapboxMaps/lib/splitpolygon.ts | 5 +- .../MapboxMaps/src/WktGeojsonTransform.ts | 6 +- src/views/sys/exception/VideoSupervision.vue | 58 +++++++------ .../exception/VideoSupervision/map/map.vue | 8 +- 6 files changed, 132 insertions(+), 41 deletions(-) diff --git a/src/api/sys/layerManagement.ts b/src/api/sys/layerManagement.ts index 6ac114e1..85802072 100644 --- a/src/api/sys/layerManagement.ts +++ b/src/api/sys/layerManagement.ts @@ -24,6 +24,7 @@ enum Api { GetGeom = "/api/ShpLayerSource/GetShapeData", CalTubanArea = "/api/DroneCaseInfoSingle/CalTubanArea", SplitAndCalTubanArea = "/api/DroneCaseInfoSingle/SplitAndCalTubanArea", + SplitTubanBackYuan = "/api/DroneCaseInfoSingle/SplitTubanBackYuan", GetPermCode = '/getPermCode', TestRetry = '/testRetry', Login = '/api/Check/Login', @@ -135,6 +136,14 @@ export function splitAndCalTubanArea(params:CalTubanAreaModel){ } +export function splitTubanBackYuan(params:CalTubanAreaModel){ + return defHttp.post( + { + url: Api.SplitTubanBackYuan, + params, + } + ) +} export function getConfig(params) { diff --git a/src/components/MapboxMaps/MapComponent.vue b/src/components/MapboxMaps/MapComponent.vue index 895b1bba..9a935de4 100644 --- a/src/components/MapboxMaps/MapComponent.vue +++ b/src/components/MapboxMaps/MapComponent.vue @@ -109,7 +109,7 @@ - +
- @@ -338,7 +337,7 @@ import { message, Modal } from 'ant-design-vue'; import { useCloudQueryStore } from '@/store/modules/cloudquery'; // 地类分割 - import { splitAndCalTubanArea } from '@/api/sys/layerManagement'; + import { splitAndCalTubanArea,splitTubanBackYuan } from '@/api/sys/layerManagement'; import { CalTubanAreaModel } from '@/api/sys/model/layerModel'; import { AddDroneTask, LoadLandType, AddDroneLandTask, LoadCloudQueryByCaseNo } from '@/api/demo/cloudQuery'; @@ -366,7 +365,6 @@ let geojson = JSON.parse(JSON.stringify(res)) - // 绘制导入的shapgefile图斑 handlerDetails( res, @@ -418,6 +416,29 @@ geomData:null, caseid:null, }) + + // + + function splitMultiPolygons(str) { + + let hadnlerStr = str.replace(",MULTIPOLYGON","-MULTIPOLYGON"); + let result = hadnlerStr.split("-"); + // 移除开头的 "MULTIPOLYGON" 和多余的括号 + // const cleanedStr = str.replace(/^MULTIPOLYGON\(/, '').replace(/\)+$/, ''); + + + // // 使用正则表达式分割多个多边形 + // const polygonStrings = cleanedStr.split(/\)\),\s*MULTIPOLYGON\(\(/); + + // // 重新构建每个 MULTIPOLYGON + // const result = polygonStrings.map(poly => { + // // 确保每个多边形有正确的括号结构 + // const fixedPoly = poly.startsWith('((') ? poly : `((${poly}`; + // return `MULTIPOLYGON(${fixedPoly}))`; + // }); + + return result; + } // 地类分割图斑 const handlerSelectLandType = (type)=>{ @@ -433,6 +454,59 @@ "type":type } + splitTubanBackYuan(calAreaParams).then(res=>{ + + let geojson = { + type:"FeatureCollection", + features:[] + }; + + + let wktArray = splitMultiPolygons(res.gengdituban); + + + + if(wktArray.length>0){ + + wktArray?.forEach((item,index)=>{ + console.log("item",item); + let feature = { + "type": "Feature", + "properties": { + "id": generateUUID() + }, + "geometry": WktToGeojson(item) + } + geojson.features.push(feature); + }) + }else{ + + // + let feature = { + "type": "Feature", + "properties": { + "id": generateUUID() + }, + "geometry": WktToGeojson(res.gengdituban) + } + } + + console.log("splitTubanBackYuan",geojson) + + splitFeatureByMultiFill(geojson); + + handlerDetails( + {type:"FeatureCollection",features:[]}, + 'shapefileSource', + 'shapefileLayer', + { + lineStyle: { 'line-color': '#ff0000', 'line-width': 3 }, + fillStyle: { 'fill-color': '#ff0000', 'fill-opacity': 0.1 }, + } + ) + }) + + return null; splitAndCalTubanArea(calAreaParams).then(res=>{ if(res){ @@ -1154,6 +1228,7 @@ projection: 'equirectangular', // wgs84参考系 style: MapboxDefaultStyle, // maxZoom: props.mapConfig.maxZoom ? props.mapConfig.maxZoom:18, + maxZoom:50, minZoom: props.mapConfig.minZoom ? props.mapConfig.minZoom : 1, zoom: props.mapConfig.zoom ? props.mapConfig.zoom : 10, pitch: props.mapConfig.angle ? props.mapConfig.angle : 0, @@ -1280,6 +1355,8 @@ }; // shapefile多面分割数据 const splitFeatureByMultiFill = (geojson)=>{ + + let splitPolygon = currentGeoJson.value; splitPolygonByMultiFill(geojson.features,JSON.parse(JSON.stringify(editGeoJson.value))).then(features=>{ if(features){ diff --git a/src/components/MapboxMaps/lib/splitpolygon.ts b/src/components/MapboxMaps/lib/splitpolygon.ts index 5d988997..bf168166 100644 --- a/src/components/MapboxMaps/lib/splitpolygon.ts +++ b/src/components/MapboxMaps/lib/splitpolygon.ts @@ -344,7 +344,7 @@ export async function splitPolygonByMultiFill(drawPolygons,outerPolygon){ // 处理精度后绘制图斑 let turfPolygon = turf.truncate(splitPolygonItem,dealOptions); //console.log("💩第4步：处理精度后绘制图斑",turfPolygon); - + console.log("求交集的处理数据：",turf.featureCollection([featuresArray[0],turfPolygon])); // 取交集 let intersection = turf.intersect(turf.featureCollection([featuresArray[0],turfPolygon]),dealOptions); @@ -354,11 +354,12 @@ export async function splitPolygonByMultiFill(drawPolygons,outerPolygon){ //console.log("💩第5步：交集"+index+"：",intersection) splitFeaturesArray.push(turfPolygon); }catch(e){ - //console.log(e); + console.log(e); } }) // 取差集 + console.log("求差集的处理数据：",turf.featureCollection(featuresArray.concat(splitFeaturesArray))); var difference = turf.difference(turf.featureCollection(featuresArray.concat(splitFeaturesArray))); //console.log("💩第6步：差集",difference); if(difference){ diff --git a/src/components/MapboxMaps/src/WktGeojsonTransform.ts b/src/components/MapboxMaps/src/WktGeojsonTransform.ts index a29a959c..3721c9ba 100644 --- a/src/components/MapboxMaps/src/WktGeojsonTransform.ts +++ b/src/components/MapboxMaps/src/WktGeojsonTransform.ts @@ -3,16 +3,14 @@ import { wktToGeoJSON,geojsonToWKT } from "@terraformer/wkt" const wktCollectionToGeoJson = (wktStr) => { - alert(999); console.log("wktStr",wktStr); let geojson = WKT.parse(wktStr); console.log("geojson",geojson); - alert(123); } const WktToGeojson = (wktData)=> { // return WKT.parse(wktData) - console.log("wktData",wktToGeoJSON(wktData)); + console.log("wktData",wktData); return wktToGeoJSON(wktData); } @@ -51,7 +49,9 @@ const removeZM = (geoJSON) => { default: throw new Error(`Unsupported geometry type: ${geoJSON.type}`); } + return geoJSON; + } export {WktToGeojson,GeojsonToWkt,removeZM,wktCollectionToGeoJson} \ No newline at end of file diff --git a/src/views/sys/exception/VideoSupervision.vue b/src/views/sys/exception/VideoSupervision.vue index 25bad34a..dc9ee5ca 100644 --- a/src/views/sys/exception/VideoSupervision.vue +++ b/src/views/sys/exception/VideoSupervision.vue @@ -27,27 +27,30 @@ -
-
- - +
+ +
+
+ + +
+ + + + + +
- - - - - - -
- - - -
-
- - + + + +
+
+ + +
+
-
@@ -282,14 +285,18 @@ onMounted(() => { background: url('/videosupervision/main-bottom.png'); background-size: 100% 100%; } + .right-container{ + width:418px; + min-height:200px; + position: absolute; + bottom:32px; + right: 24px; + } .data-container { width: 418px; height:300px; - position: absolute; - bottom:-100px; - right: 24px; - transform: translate(0, -50%); z-index:9999999; + position: relative; .open-button{ width:30px; height:30px; @@ -388,9 +395,8 @@ onMounted(() => { } .TC-videoi-container{ - position: absolute; - bottom:48px; - right:38px; + margin-top:16px; + position: relative; width:418px; height:300px; .close-button{ diff --git a/src/views/sys/exception/VideoSupervision/map/map.vue b/src/views/sys/exception/VideoSupervision/map/map.vue index d3592f82..3f0ef693 100644 --- a/src/views/sys/exception/VideoSupervision/map/map.vue +++ b/src/views/sys/exception/VideoSupervision/map/map.vue @@ -13,9 +13,8 @@
- +
-
@@ -1291,13 +1290,12 @@ const handlerInitialize = ()=>{ } .home-button{ - width:100px; - height:100px; + width:40px; + height:40px; background:url(/map/home-btn.png); background-size: 100% 100%; float:right; position:relative; - top:-25px; line-height:100px; text-align:center; }