From 50520ce3f3ef3cd0939717edcb1090bce73eb875 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Thu, 19 Oct 2023 14:45:12 +0900 Subject: [PATCH] =?UTF-8?q?laanc=20=EB=B9=84=ED=96=89=EA=B5=AC=EC=97=AD=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../map/mapbox/draw/LaancDrawControl.js | 101 ++++++++++-------- src/utility/DrawUtil.js | 5 +- src/views/laanc/FlightArea.js | 7 ++ src/views/laanc/LaancAreaMap.js | 61 +++++++++-- 4 files changed, 117 insertions(+), 57 deletions(-) diff --git a/src/components/map/mapbox/draw/LaancDrawControl.js b/src/components/map/mapbox/draw/LaancDrawControl.js index c1b3a6c..c1adf6e 100644 --- a/src/components/map/mapbox/draw/LaancDrawControl.js +++ b/src/components/map/mapbox/draw/LaancDrawControl.js @@ -47,6 +47,10 @@ export const LaancDrawControl = props => { // if (areaType !== drawType) drawInit(); }, [mapControl.drawType]); + // useEffect(() => { + // console.log(props.areaCoordList[0], '-----------'); + // }, [props.areaCoordList]); + useEffect(() => { if (mapObject) { mapObject.on('draw.update', handlerUpdateSetting); @@ -128,55 +132,60 @@ export const LaancDrawControl = props => { }; // 도형 그리기 완료 시 + // drawType을 바꾸면 종료처리가 돼서 이게 실행되는 듯 const handlerDblClickFinish = state => { - console.log('dblclick'); - const mode = handlerReturnMode(drawObj.getMode()); + if (state.currentVertexPosition !== 0) { + console.log('dblclick'); + const mode = handlerReturnMode(drawObj.getMode()); - if (mode === 'CIRCLE') { - const obj = state.polygon; - const data = { - coord: obj.properties.center, - radius: obj.properties.radiusInKm * 1000, - id: obj.id - }; - drawObj.setFeatureProperty(data.id, 'id', mode); - handlerCreateOneMarker([0, -10], data.coord, data.radius, data.id); - handlerAbnormalityCheck(data, mode); - } else { - const obj = state[mode.toLowerCase()]; - const length = state.currentVertexPosition; - drawObj.setFeatureProperty(obj.id, 'id', mode); - drawObj.setFeatureProperty(obj.id, 'inAirArea', inAirArea); - - // dbl클릭이 click 두번으로 인식돼서, 마지막 값을 없애버리기로 함 - if (mode === 'LINE') { - obj.coordinates.splice(-1); - if (length < 1) { - setAlertModal({ - isOpen: true, - title: '좌표 최소 개수', - desc: '좌표를 두 개 점으로 이어주세요.' - }); - handlerRemoveError(obj.id); - } - } else if (mode === 'POLYGON') { - obj.coordinates[0].splice(-1); - - if (length < 2) { - setAlertModal({ - isOpen: true, - title: '좌표 최소 개수', - desc: '좌표를 세 개 점으로 이어주세요.' - }); - handlerRemoveError(obj.id); + if (mode === 'CIRCLE') { + const obj = state.polygon; + const data = { + coord: obj.properties.center, + radius: obj.properties.radiusInKm * 1000, + id: obj.id + }; + drawObj.setFeatureProperty(data.id, 'id', mode); + handlerCreateOneMarker([0, -10], data.coord, data.radius, data.id); + handlerAbnormalityCheck(data, mode); + } else { + const obj = state[mode.toLowerCase()]; + const length = state.currentVertexPosition; + if (obj.coordinates.length > 0) { + drawObj?.setFeatureProperty(obj.id, 'id', mode); + drawObj?.setFeatureProperty(obj.id, 'inAirArea', inAirArea); + + // dbl클릭이 click 두번으로 인식돼서, 마지막 값을 없애버리기로 함 + if (mode === 'LINE') { + obj.coordinates.splice(-1); + if (length < 1) { + setAlertModal({ + isOpen: true, + title: '좌표 최소 개수', + desc: '좌표를 두 개 점으로 이어주세요.' + }); + handlerRemoveError(obj.id); + } + } else if (mode === 'POLYGON') { + obj.coordinates[0].splice(-1); + + if (length < 2) { + setAlertModal({ + isOpen: true, + title: '좌표 최소 개수', + desc: '좌표를 세 개 점으로 이어주세요.' + }); + handlerRemoveError(obj.id); + } + } + const data = { + coord: obj.coordinates, + id: obj.id, + inAirArea: inAirArea + }; + handlerAbnormalityCheck(data, mode); } } - const data = { - coord: obj.coordinates, - id: obj.id, - inAirArea: inAirArea - }; - handlerAbnormalityCheck(data, mode); } }; @@ -448,7 +457,7 @@ export const LaancDrawControl = props => { const drawInit = () => { const mode = mapControl.drawType; if (mode !== 'DONE') { - console.log(props.addData.isAddable, '-----'); + // console.log(props.addData.isAddable, '-----'); if (!props.addData.isAddable) { drawObj.deleteAll(); handlerRemoveAllMarker(); diff --git a/src/utility/DrawUtil.js b/src/utility/DrawUtil.js index 2153457..5daba2e 100644 --- a/src/utility/DrawUtil.js +++ b/src/utility/DrawUtil.js @@ -17,7 +17,10 @@ export const InitFeature = (type, id) => { export const FormattingCoord = coord => { const resultArr = []; - coord.forEach(co => { + // console.log(coord, '>>>>>>>>coord'); + if (!Array.isArray(coord)) return; + + coord?.forEach(co => { const split = String(co).split('.'); const result = split[0] + '.' + split[1].substring(0, 7); diff --git a/src/views/laanc/FlightArea.js b/src/views/laanc/FlightArea.js index 8f88274..337ba21 100644 --- a/src/views/laanc/FlightArea.js +++ b/src/views/laanc/FlightArea.js @@ -507,6 +507,10 @@ export default function FlightArea({ // isOpen: true // })); handlerAddChange('isAddable', true); + const obj = drawObj + .getAll() + .features.filter(obj => obj.properties.id !== 'BUFFER'); + handlerDrawType(obj[0].properties.id); } else { // alert('구역은 최대 2개까지 설정 가능합니다.'); } @@ -637,6 +641,9 @@ export default function FlightArea({ ) : null}
+ + ※ 비행구역설정 완료를 원하시면 더블클릭해주시기 바랍니다. +