diff --git a/src/components/map/mapbox/draw/LaancDrawControl.js b/src/components/map/mapbox/draw/LaancDrawControl.js index 056f7071..0232dde9 100644 --- a/src/components/map/mapbox/draw/LaancDrawControl.js +++ b/src/components/map/mapbox/draw/LaancDrawControl.js @@ -154,6 +154,19 @@ export const LaancDrawControl = props => { // dbl클릭이 click 두번으로 인식돼서, 마지막 값을 없애버리기로 함 if (mode === 'LINE') { obj.coordinates.splice(-1); + // 여기서 버퍼 빈양식 만들어주자! + const buffer = drawObj.get(bufferId); + if (buffer) drawObj.delete(bufferId); + + const newBuffer = { + type: 'LineString', + coordinates: [] + }; + const newBufferId = drawObj.add(newBuffer); + drawObj.setFeatureProperty(newBufferId[0], 'id', 'BUFFER'); + drawObj.setFeatureProperty(newBufferId[0], 'lineId', obj.id); + setBufferId(newBufferId[0]); + if (length < 1) { setAlertModal({ isOpen: true, @@ -256,6 +269,7 @@ export const LaancDrawControl = props => { } } } + if (isBreak) { props.setModal(true); handlerRemoveError(data.id); @@ -271,9 +285,23 @@ export const LaancDrawControl = props => { dispatch(drawTypeChangeAction('DONE')); // props.handlerAddChange('isAddable', false); props.handlerAddChange('overAdd', false); - drawObj.delete(id); handlerRemoveGroupMarker(id); props.handlerSaveCheck(false); + + drawObj.delete(id); + + // 라인일 경우 버퍼도 삭제 + const buffer = drawObj + .getAll() + .features.find(obj => obj.properties?.lineId === id); + if (buffer) drawObj.delete(buffer.id); + + const viewCoordObj = drawObj + .getAll() + .features.filter( + o => o.geometry.coordinates.length > 0 && o.properties.id !== 'BUFFER' + ); + props.setViewCoordObj(viewCoordObj); }; // areaInfo 셋팅 @@ -338,11 +366,27 @@ export const LaancDrawControl = props => { } }; + const handlerArraysAreEqual = (arr1, arr2) => { + if (arr1 === arr2) return true; + if (arr1.length !== arr2.length) return false; + + for (let i = 0; i < arr1.length; i++) { + if (Array.isArray(arr1[i]) && Array.isArray(arr2[i])) { + if (!handlerArraysAreEqual(arr1[i], arr2[i])) { + return false; + } + } else if (arr1[i] !== arr2[i]) { + return false; + } + } + return true; + }; + const handlerPastDraw = () => { if (props.areaCoordList) { - const obj = drawObj?.getAll().features; + const objs = drawObj?.getAll().features; const areas = props.areaCoordList; - if (areas.length > 0 && obj.length > 0) { + if (areas.length > 0 && objs.length > 0) { // areas -> 지도에 그려진 모든 구역 정보여야함 areas.forEach((area, idx) => { const paths = []; @@ -360,13 +404,35 @@ export const LaancDrawControl = props => { bufferPaths.push([bfCoord.lon, bfCoord.lat]) ); - handlerCreateDrawObj( - bufferId, - setBufferId, - 'LineString', - { path: bufferPaths }, - 'BUFFER' + let lineId = ''; + const lines = objs.filter(o => o.properties.id === 'LINE'); + + // area.coordList와 일치하는 line의 id값을 찾음 + for (let i = 0; i < lines.length; i++) { + const result = handlerArraysAreEqual( + lines[i].geometry.coordinates, + paths + ); + if (result) { + lineId = lines[i].id; + break; + } + } + + // features중에 위에서 찾은 lineId값을 properties로 갖고 있는 버퍼를 찾아서 지워줌 + const oldBuffer = objs.find( + obj => obj.properties?.lineId === lineId ); + drawObj.delete(oldBuffer.id); + + // 새 버퍼 생성 + const newBuffer = { + type: 'LineString', + coordinates: bufferPaths + }; + const newBufferId = drawObj.add(newBuffer); + drawObj.setFeatureProperty(newBufferId[0], 'id', 'BUFFER'); + drawObj.setFeatureProperty(newBufferId[0], 'lineId', lineId); } } else if (area.areaType === 'POLYGON') { paths.push(paths[0]); @@ -466,6 +532,8 @@ export const LaancDrawControl = props => { setDrawObjId(); props.handlerInitCoordinates(); + + props.setViewCoordObj([]); } props.setCoordArr([]); diff --git a/src/views/laanc/LaancAreaMap.js b/src/views/laanc/LaancAreaMap.js index 076ea9fa..6b39a4ae 100644 --- a/src/views/laanc/LaancAreaMap.js +++ b/src/views/laanc/LaancAreaMap.js @@ -328,6 +328,8 @@ export default function LaancAreaMap({ : obj.geometry.coordinates[0]; if (obj.properties.id === 'POLYGON') { coord = coord.slice(0, coord.length - 1); + } else if (obj.properties.id === 'CIRCLE') { + coord = [obj.properties.center]; } return ( @@ -504,6 +506,7 @@ export default function LaancAreaMap({ handlerCoordinates={handlerCoordinates} handlerInitCoordinates={handlerInitCoordinates} setCoordArr={setCoordArr} + viewCoordObj={viewCoordObj} setViewCoordObj={setViewCoordObj} />