diff --git a/src/components/map/mapbox/draw/LaancDrawControl.js b/src/components/map/mapbox/draw/LaancDrawControl.js index d0b26d2..7ae40f3 100644 --- a/src/components/map/mapbox/draw/LaancDrawControl.js +++ b/src/components/map/mapbox/draw/LaancDrawControl.js @@ -9,6 +9,12 @@ import { } from '../../../../utility/DrawUtil'; import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions'; import MapboxDraw from '@mapbox/mapbox-gl-draw'; +import { + CircleMode, + DragCircleMode, + DirectMode, + SimpleSelectMode +} from 'mapbox-gl-draw-circle'; export const LaancDrawControl = props => { const dispatch = useDispatch(); @@ -19,7 +25,6 @@ export const LaancDrawControl = props => { const [drawObjId, setDrawObjId] = useState(); const [bufferId, setBufferId] = useState(); - const [geojson, setGeoJson] = useState(); const [isDrawDone, setIsDrawDone] = useState(false); @@ -42,7 +47,9 @@ export const LaancDrawControl = props => { const DrawLineStringMode = MapboxDraw.modes.draw_line_string; const DrawPolygonMode = MapboxDraw.modes.draw_polygon; - const modeArr = [DrawLineStringMode, DrawPolygonMode]; + const DrawCircleMode = CircleMode; + console.log(DrawCircleMode, '>>>>>>'); + const modeArr = [DrawLineStringMode, DrawPolygonMode, DrawCircleMode]; modeArr.forEach(m => { m.onStop = state => handlerDblClickFinish(state); @@ -71,6 +78,15 @@ export const LaancDrawControl = props => { // 클릭할 때마다 마커 찍어줌 const handlerCustomOnClick = (state, e) => { console.log('click'); + + const features = mapObject.queryRenderedFeatures(e.point, { + layers: ['maine'] + }); + if (features.length > 0) { + // console.log(features, '>>>>>관제권?'); + // areaCoordList 컬럼 새로 만든거에 TRUE 머시기... 가 아니라 여기가 아님 일단은!! 노트 참고해!!! + } + const type = handlerReturnMode(drawObj.getMode()); const obj = state[type?.toLowerCase()]; @@ -104,69 +120,116 @@ export const LaancDrawControl = props => { } }; + // 도형 그리기 완료 시 const handlerDblClickFinish = state => { console.log('dblclick'); const mode = handlerReturnMode(drawObj.getMode()); + console.log(state, '>>>>>state'); - const obj = state[mode.toLowerCase()]; - console.log(obj, '>>>>>>obj'); - const length = state.currentVertexPosition; - drawObj.setFeatureProperty(obj.id, 'id', mode); - - // dbl클릭이 click 두번으로 인식돼서, 마지막 값을 없애버리기로 함 - if (mode === 'LINE') { - obj.coordinates.splice(-1); - if (length < 1) { - setAlertModal({ - isOpen: true, - title: '좌표 최소 개수', - desc: '좌표를 두 개 점으로 이어주세요.' - }); - handlerRemoveError(obj.id); + if (mode === 'CIRCLE') { + const data = { + coord: state.polygon.properties.center, + radius: state.polygon.properties.radiusInKm * 1000, + id: state.polygon.id + }; + handlerAbnormalityCheck(data, mode); + } else { + const obj = state[mode.toLowerCase()]; + console.log(obj, '>>>>>>obj'); + const length = state.currentVertexPosition; + drawObj.setFeatureProperty(obj.id, 'id', mode); + + // 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); + } } - } 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 + }; + handlerAbnormalityCheck(data, mode); + } + }; + + // 도형 수정 시 + const handlerUpdateSetting = e => { + console.log('update'); + + if (e.features[0]) { + const obj = e.features[0]; + const mode = obj.properties.id; + const initCoord = obj.geometry.coordinates; + + // 폴리곤은 중첩좌표 제거해서 서버에 넘겨야함 + if (mode === 'POLYGON') { + initCoord[0].splice(-1); } + const data = { + coord: initCoord, + id: obj.id + }; + handlerAbnormalityCheck(data, mode); } - handlerAbnormalityCheck(obj.coordinates, obj.id, mode); }; - // 변수들 이름 겹쳐서 헷갈리니까 정리하기 - const handlerAbnormalityCheck = (coord, id, mode) => { - console.log('check', coord, id, mode); - const isBreak = handlerIsSpecialFlight(coord, id, mode); + // 모든 비정상상황 체크 + const handlerAbnormalityCheck = (data, mode) => { + const isBreak = handlerIsSpecialFlight(data, mode); if (isBreak) return; - const initCoord = coord; - const coords = - mode === 'LINE' ? initCoord : mode === 'POLYGON' ? initCoord[0] : null; - handlerSaveAreaInfo(coords, mode); + const initCoord = + mode === 'LINE' + ? data.coord + : mode === 'POLYGON' + ? data.coord[0] + : mode === 'CIRCLE' + ? data.coord + : null; + console.log(data, '>>>>>'); + console.log(initCoord, mode, '>>>>check'); + handlerSaveAreaInfo(initCoord, mode); }; // 현재 그려진 모든 도형에 대한 비가시권 검사 - const handlerIsSpecialFlight = (coord, id, mode) => { - // console.log(obj, 'specialFlight'); + const handlerIsSpecialFlight = (data, mode) => { console.log('specialFlight'); let isBreak = false; - const coords = mode === 'LINE' ? coord : coord[0]; - - for (let point = 0; point < coords.length - 1; point++) { - const distance = CalculateDistance(coords[point], coords[point + 1]); - if (distance > 1000) { + if (mode === 'CIRCLE') { + if (data.radius > 1000) { isBreak = true; - break; + } + } else { + const coords = mode === 'LINE' ? data.coord : data.coord[0]; + + for (let point = 0; point < coords.length - 1; point++) { + const distance = CalculateDistance(coords[point], coords[point + 1]); + if (distance > 1000) { + isBreak = true; + break; + } } } if (isBreak) { props.setModal(true); - handlerRemoveError(id); + handlerRemoveError(data.id); return true; } else { props.handlerSaveCheck(true); @@ -181,19 +244,6 @@ export const LaancDrawControl = props => { props.handlerSaveCheck(false); }; - // 도형 수정 시 - const handlerUpdateSetting = e => { - console.log('update'); - - if (e.features[0]) { - const obj = e.features[0]; - const mode = obj.properties.id; - const initCoord = obj.geometry.coordinates; - const coords = mode === 'LINE' ? initCoord : initCoord[0]; - handlerAbnormalityCheck(coords, obj.id, mode); - } - }; - // areaInfo 셋팅 const handlerSaveAreaInfo = (coord, mode) => { if (!coord || !mode) { @@ -240,73 +290,53 @@ export const LaancDrawControl = props => { }; // 버퍼 및 기존 도형 재생성 - // 해당되는 도형 및 마커만 다시 그려지게 해야함(버퍼 포함) - // 해당 Id 마커 지우고 path만 받아서 다시 그려지도록... // 근데 areaCoordList[0]이.. 도형을 하나만 받아오는걸로 알고 있어서 그거 확인해야함 + // 그리고 circle관련해서 create랑 update다시 작업해야함.... const handlerPastDraw = () => { if (props.areaCoordList) { - const areas = props.areaCoordList[0]; - const paths = []; - areas.coordList.forEach(coord => paths.push([coord.lon, coord.lat])); - - if (areas.areaType) { - console.log('pastDraw'); - const drawGeoJson = drawObj.getAll(); - if (areas.areaType === 'CIRCLE') { - const coord = handlerGetCircleCoord(paths[0], areas.bufferZone); - handlerCreateDrawObj( - drawObjId, - setDrawObjId, - 'Polygon', - { - path: coord, - center: paths[0], - radius: areas.bufferZone - }, - 'CIRCLE' - ); - } else { - if (areas.areaType === 'LINE') { - // handlerCreateDrawObj( - // drawObjId, - // setDrawObjId, - // 'LineString', - // { path: paths }, - // 'LINE' - // ); - - // 버퍼 생성 - if (areas.bufferCoordList) { - const bufferPaths = []; - - areas.bufferCoordList.forEach(bfCoord => - bufferPaths.push([bfCoord.lon, bfCoord.lat]) - ); - - handlerCreateDrawObj( - bufferId, - setBufferId, - 'LineString', - { path: bufferPaths }, - 'BUFFER' - ); + const obj = drawObj.getAll().features; + const areas = props.areaCoordList; + if (areas.length > 0 && obj.length > 0) { + // console.log(obj, '>>>'); + // console.log(areas, '>>>>areas'); + + // areas -> 지도에 그려진 모든 구역 정보여야함 + areas.forEach((area, idx) => { + const paths = []; + area.coordList.forEach(coord => paths.push([coord.lon, coord.lat])); + if (area.areaType) { + console.log('pastDraw', area); + if (area.areaType === 'LINE') { + // 버퍼 생성 + if (area.bufferCoordList) { + const bufferPaths = []; + + area.bufferCoordList.forEach(bfCoord => + bufferPaths.push([bfCoord.lon, bfCoord.lat]) + ); + + handlerCreateDrawObj( + bufferId, + setBufferId, + 'LineString', + { path: bufferPaths }, + 'BUFFER' + ); + } + } else if (area.areaType === 'POLYGON') { + paths.push(paths[0]); } - } else if (areas.areaType === 'POLYGON') { - // handlerCreateDrawObj( - // drawObjId, - // setDrawObjId, - // 'Polygon', - // { path: [paths] }, - // 'POLYGON' - // ); + const currentObj = obj.filter(o => o.properties.id !== 'BUFFER'); + currentObj.forEach(obj => { + handlerRemoveGroupMarker(obj.id); + + const initCoord = obj.geometry.coordinates; + const coord = + obj.properties.id === 'LINE' ? initCoord : initCoord[0]; + handlerCreateGroupMarker(coord, obj.id); + }); } - } - // 현재 그려진 도형 저장 - setGeoJson(drawGeoJson); - - // 마커 재 생성 - // handlerRemoveMarker(); - // handlerCreateAllMarker(paths); + }); } } }; @@ -338,7 +368,7 @@ export const LaancDrawControl = props => { }; // 지도에 있는 모든 마커 삭제 - const handlerRemoveMarker = () => { + const handlerRemoveAllMarker = () => { const ele = document.getElementsByClassName('mapboxgl-popup'); const eleArr = Array.from(ele); eleArr?.forEach(marker => marker.remove()); @@ -365,28 +395,28 @@ export const LaancDrawControl = props => { .addTo(mapObject); }; - // 모든 마커 생성 - const handlerCreateAllMarker = coords => { + // 해당되는 id의 마커 생성 + const handlerCreateGroupMarker = (coords, id) => { const areas = props.areaCoordList[0]; if (areas.areaType !== 'CIRCLE') { for (let i = 0; i < coords.length; i++) { if (i === 0) { - handlerCreateOneMarker([0, -10], coords[i], 'Start'); + handlerCreateOneMarker([0, -10], coords[i], 'Start', id); } else { const lngLat = handlerGetMidPoint(coords[i - 1], coords[i]); const text = CalculateDistance(coords[i - 1], coords[i]); - handlerCreateOneMarker([0, 0], lngLat, text); + handlerCreateOneMarker([0, 0], lngLat, text, id); } } } else { - handlerCreateOneMarker([0, -10], coords[0], areas.bufferZone); + handlerCreateOneMarker([0, -10], coords[0], areas.bufferZone, id); } }; const drawInit = () => { // drawObj.deleteAll(); - // handlerRemoveMarker(); + // handlerRemoveAllMarker(); props.handlerSaveCheck(false); setDrawObjId(); @@ -395,7 +425,7 @@ export const LaancDrawControl = props => { const mode = mapControl.drawType; if (!mode || mode === 'RESET') { drawObj.deleteAll(); - handlerRemoveMarker(); + handlerRemoveAllMarker(); return; } handlerStartMode(mode);