From a1d2cff59b7fd52385bb83e9d3c215bc46bd1de4 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: Wed, 29 Nov 2023 19:08:22 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B5=AC=EC=97=AD=20draw?= =?UTF-8?q?=EB=AA=A8=EB=93=9C=20=EA=BC=AC=EC=9D=B4=EB=8A=94=20=ED=98=84?= =?UTF-8?q?=EC=83=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/laanc/map/LaancDrawControl.js | 148 +++++++++---------- 1 file changed, 68 insertions(+), 80 deletions(-) diff --git a/src/components/laanc/map/LaancDrawControl.js b/src/components/laanc/map/LaancDrawControl.js index cccdd47b..b53e0a6a 100644 --- a/src/components/laanc/map/LaancDrawControl.js +++ b/src/components/laanc/map/LaancDrawControl.js @@ -43,12 +43,14 @@ export const LaancDrawControl = props => { desc: '' }); - useEffect(() => { - const areaType = props.areaCoordList[0].areaType; - const drawType = mapControl.drawType; + const [number, setNumber] = useState(0); - drawInit(); - // if (areaType !== drawType) drawInit(); + useEffect(() => { + if (mapControl.drawType === 'DONE') { + drawObj.changeMode('simple_select'); + } else { + drawInit(); + } }, [mapControl.drawType]); const originClickRef = useRef(null); @@ -67,24 +69,27 @@ export const LaancDrawControl = props => { }); }; - mapObject.on('draw.update', handlerUpdateSetting); - - modeArr.forEach(m => { - m.onStop = state => handlerFinishDraw(state); + if (number === 0) { + mapObject.on('draw.update', handlerUpdateSetting); + modeArr.forEach(m => { + m.onStop = state => handlerFinishDraw(state); - // onClick 이벤트 오버라이드 - const mOriginClick = m.onClick; - m.onClick = function (state, e) { - mOriginClick.call(this, state, e); - handlerCustomOnClick(state, e); - }; + // onClick 이벤트 오버라이드 + const mOriginClick = m.onClick; + m.onClick = function (state, e) { + mOriginClick.call(this, state, e); + handlerCustomOnClick(state, e); + }; - if (originClickRef.current === null) { - originClickRef.current = mOriginClick; - } - }); + if (originClickRef.current === null) { + originClickRef.current = mOriginClick; + } + }); + setNumber(number + 1); + } return () => { + dispatch(drawTypeChangeAction('DONE')); mapObject.off('draw.update', handlerUpdateSetting); cleanUp(); }; @@ -121,6 +126,7 @@ export const LaancDrawControl = props => { if (mode && obj) { const feature = drawObj.get(obj.id); if (!feature) { + console.log('2222222222'); drawObj.changeMode('simple_select'); return; } @@ -153,17 +159,16 @@ export const LaancDrawControl = props => { } } + // 좌표 7개 찍으면 자동 마무리 if (state.currentVertexPosition > 6) { - if (obj) { - drawObj.changeMode('direct_select', { - featureId: obj.id - }); - } + drawObj.changeMode('simple_select'); } }; // 도형 그리기 완료 시 const handlerFinishDraw = state => { + if (drawObj.getAll().features.length === 0) return; + const mode = handlerReturnMode(drawObj.getMode()); const pointLength = state.currentVertexPosition; if (pointLength > 0) { @@ -209,24 +214,6 @@ export const LaancDrawControl = props => { coords.splice(-1); const data = { coords: coords, mode: mode, id: obj.id }; - // 에러 체크 - // const isExist = drawObj.getAll().features.some(o => o.id === obj.id); - // if (!isExist) { - // console.log('1111111?'); - // props.setModal({ - // title: '비행 구역 설정', - // desc: ( - // <> - // 비행구역 설정이 완료되지 않았습니다. - //
- // 비행구역 설정을 다시 해주시기 부탁드립니다. - // - // ), - // isOpen: true - // }); - // dispatch(drawTypeChangeAction('DONE')); - // return; - // } handlerAbnormalityCheck(data).then(areaInfo => { if (areaInfo) { @@ -251,14 +238,15 @@ export const LaancDrawControl = props => { }); } } else { + console.log('333333333'); // 좌표가 찍히기도 전에 틀만 생성된 도형들 삭제 - if (mode === 'CIRCLE') { - const obj = state.polygon; - drawObj.delete(obj.id); - } else { - const obj = state[mode.toLowerCase()]; - drawObj.delete(obj.id); - } + // if (mode === 'CIRCLE') { + // const obj = state.polygon; + // drawObj.delete(obj.id); + // } else { + // const obj = state[mode.toLowerCase()]; + // drawObj.delete(obj.id); + // } } }; @@ -293,7 +281,6 @@ export const LaancDrawControl = props => { } } } - if (elev1.data[0] === 0 || elev2.length > 0) isBreak = true; } catch (error) { { @@ -400,10 +387,8 @@ export const LaancDrawControl = props => { } else { // 폴리곤은 중첩좌표 제거해서 서버에 넘겨야함 if (mode === 'POLYGON') coords.splice(-1); - const data = { coords: coords, mode: mode, id: id }; - // handlerRemoveGroupMarker(obj.id); - // handlerCreateGroupMarker(data, mode); + const data = { coords: coords, mode: mode, id: id }; handlerAbnormalityCheck(data).then(areaInfo => { if (areaInfo) handlerSaveData(areaInfo); }); @@ -413,24 +398,20 @@ export const LaancDrawControl = props => { // 비정상 감지 시 해당 도형, 마커 삭제 const handlerRemoveError = id => { - dispatch(drawTypeChangeAction('DONE')); - // props.handlerAddChange('isAddable', false); - props.handlerAddChange('overAdd', false); - handlerRemoveGroupMarker(id); - - const remainObj = drawObj + // 삭제대상인 obj를 제외하고 남은 obj가 있는지 확인 + const isRemain = drawObj .getAll() - .features.filter(o => o.properties.id !== 'BUFFER' && o.id !== id); + .features.some(o => o.properties.id !== 'BUFFER' && o.id !== id); - if (remainObj.length === 0) { - props.handlerSaveCheck(false); + if (!isRemain) { dispatch(drawTypeChangeAction('RESET')); } else { - props.handlerSaveCheck(true); + dispatch(drawTypeChangeAction('DONE')); } + // 해당 obj 삭제 drawObj.delete(id); - drawObj.changeMode('simple_select'); + handlerRemoveGroupMarker(id); // 라인일 경우 버퍼도 삭제 const buffer = drawObj @@ -438,12 +419,16 @@ export const LaancDrawControl = props => { .features.find(obj => obj.properties?.lineId === id); if (buffer) drawObj.delete(buffer.id); + // viewCoord에 적용 const viewCoordObj = drawObj .getAll() .features.filter( o => o.geometry.coordinates.length > 0 && o.properties.id !== 'BUFFER' ); props.setViewCoordObj(viewCoordObj); + + // 계속 20개 미만이라 overAdd false처리(임시) + props.handlerAddChange('overAdd', false); }; // 정상 좌표 처리 @@ -454,7 +439,6 @@ export const LaancDrawControl = props => { const viewCoordObj = drawObj .getAll() .features.filter(o => o.properties.id !== 'BUFFER' && o.properties.id); - props.setViewCoordObj(viewCoordObj); if (viewCoordObj.length > 19) { @@ -608,9 +592,8 @@ export const LaancDrawControl = props => { handlerRemoveGroupMarker(data.id); handlerCreateGroupMarker(mapObject, data, area.areaType); } + // 구역설정이 종료되고 타입도 바로 변경 dispatch(drawTypeChangeAction('DONE')); - // console.log('333'); - // drawObj.changeMode('simple_select'); } }); } else if (areas.length > 0 && areas[0].areaType) { @@ -719,6 +702,11 @@ export const LaancDrawControl = props => { const drawInit = () => { const mode = mapControl.drawType; if (mode !== 'DONE') { + if (!mode || mode === 'RESET') { + handlerResetMode(); + return; + } + if (!props.addData.isAddable) { // 추가 상태가 아닐 때 drawObj.deleteAll(); @@ -730,23 +718,23 @@ export const LaancDrawControl = props => { props.handlerInitCoordinates(); } - if (!mode || mode === 'RESET') { - props.handlerAddChange('isAddable', false); - props.handlerAddChange('isViewAdd', false); - props.handlerAddChange('overAdd', false); - props.setViewCoordObj([]); - drawObj.deleteAll(); - handlerRemoveAllMarker(); - drawObj.changeMode('simple_select'); - return; - } - handlerStartMode(mode); - } else { - drawObj.changeMode('simple_select'); } }; + // 초기화 + const handlerResetMode = () => { + props.handlerAddChange('isAddable', false); + props.handlerAddChange('isViewAdd', false); + props.handlerAddChange('overAdd', false); + + drawObj.deleteAll(); + handlerRemoveAllMarker(); + props.setViewCoordObj([]); + + drawObj.changeMode('simple_select'); + }; + const handlerStartMode = mode => { if (mode === 'LINE') { drawObj.changeMode('draw_line_string');