diff --git a/src/components/map/mapbox/draw/LaancDrawControl.js b/src/components/map/mapbox/draw/LaancDrawControl.js index 7026d48..75411c7 100644 --- a/src/components/map/mapbox/draw/LaancDrawControl.js +++ b/src/components/map/mapbox/draw/LaancDrawControl.js @@ -3,6 +3,7 @@ import { InfoModal } from '../../../modal/InfoModal'; import { useSelector } from 'react-redux'; import { CalculateDistance, + handlerGetCircleCoord, handlerGetHtmlContent, handlerGetMidPoint } from '../../../../utility/DrawUtil'; @@ -16,6 +17,8 @@ export const LaancDrawControl = props => { const [bufferId, setBufferId] = useState(); const [geojson, setGeoJson] = useState(); + const [isDrawDone, setIsDrawDone] = useState(false); + const [alertModal, setAlertModal] = useState({ isOpen: false, title: '', @@ -23,7 +26,10 @@ export const LaancDrawControl = props => { }); useEffect(() => { - drawInit(); + const areaType = props.areaCoordList[0].areaType; + const drawType = mapControl.drawType; + + if (areaType !== drawType) drawInit(); }, [mapControl.drawType]); useEffect(() => { @@ -39,37 +45,55 @@ export const LaancDrawControl = props => { handlerPastDraw(); }, [props.areaCoordList]); + useEffect(() => { + if (isDrawDone) { + props.handlerConfirm(props.areaCoordList); + setIsDrawDone(false); + } + }, [isDrawDone]); + + // 클릭할 때마다 마커 찍어줌 const handlerOnClick = e => { + console.log('click'); + const featureIds = drawObj.getFeatureIdsAt(e.point); const feature = drawObj.get(featureIds[0]); const type = handlerReturnMode(drawObj.getMode()); if (type) { - if (feature) { - // 뒷 부분 - const coordinates = feature.geometry.coordinates; - const coords = [ - ...new Set( - type === 'LINE' - ? coordinates.map(JSON.stringify) - : coordinates[0].map(JSON.stringify) - ) - ].map(JSON.parse); - - const len = coords.length; - const lngLat = handlerGetMidPoint(coords[len - 2], coords[len - 1]); - const text = CalculateDistance(coords[len - 2], coords[len - 1]); - - handlerCreateOneMarker([0, 0], lngLat, text); - } else { - // Start - handlerCreateOneMarker([0, -10], [e.lngLat.lng, e.lngLat.lat], 'Start'); + if (type !== 'CIRCLE') { + if (feature) { + // 뒷 부분 + const coordinates = feature.geometry.coordinates; + const coords = [ + ...new Set( + type === 'LINE' + ? coordinates.map(JSON.stringify) + : coordinates[0].map(JSON.stringify) + ) + ].map(JSON.parse); + + const len = coords.length; + const lngLat = handlerGetMidPoint(coords[len - 2], coords[len - 1]); + const text = CalculateDistance(coords[len - 2], coords[len - 1]); + + handlerCreateOneMarker([0, 0], lngLat, text); + } else { + // Start + if (type !== 'CIRCLE') + handlerCreateOneMarker( + [0, -10], + [e.lngLat.lng, e.lngLat.lat], + 'Start' + ); + } } } }; // 도형 첫 생성하면 properties.id에 현재 drawType 넣어줌 const handlerSetId = e => { + console.log('create'); const id = e.features[0].id; const mode = handlerReturnMode(drawObj.getMode()); if (mode) { @@ -100,6 +124,7 @@ export const LaancDrawControl = props => { alert('에러 발생. 다시 시도해 주세요.'); return; } + console.log('saveAreaInfo'); const areaInfo = { coordinates: [], @@ -135,6 +160,7 @@ export const LaancDrawControl = props => { areaInfo.bufferZone = feature.properties.radiusInKm * 1000; } props.handlerCoordinates(areaInfo); + setIsDrawDone(true); }; const handlerPastDraw = () => { @@ -147,21 +173,25 @@ export const LaancDrawControl = props => { console.log('pastDraw'); const drawGeoJson = drawObj.getAll(); if (areas.areaType === 'CIRCLE') { - console.log(paths, '>>>'); - // handlerCreateDrawObj( - // drawObjId, - // setDrawObjId, - // 'Polygon', - // [paths], - // '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', - paths, + { path: paths }, 'LINE' ); @@ -177,7 +207,7 @@ export const LaancDrawControl = props => { bufferId, setBufferId, 'LineString', - bufferPaths, + { path: bufferPaths }, 'BUFFER' ); } @@ -186,7 +216,7 @@ export const LaancDrawControl = props => { drawObjId, setDrawObjId, 'Polygon', - [paths], + { path: [paths] }, 'POLYGON' ); } @@ -202,15 +232,21 @@ export const LaancDrawControl = props => { }; // 기존에 그려진 도형 지우고 새 도형 생성 - const handlerCreateDrawObj = (id, setter, type, coord, propertyId) => { + const handlerCreateDrawObj = (id, setter, type, data, propertyId) => { const obj = drawObj.get(id); if (obj) drawObj.delete(id); const newObj = { type: type, - coordinates: coord + coordinates: data.path }; + const newObjId = drawObj.add(newObj); + if (propertyId === 'CIRCLE') { + drawObj.setFeatureProperty(newObjId[0], 'isCircle', true); + drawObj.setFeatureProperty(newObjId[0], 'center', data.center); + drawObj.setFeatureProperty(newObjId[0], 'radiusInKm', data.radius / 1000); + } drawObj.setFeatureProperty(newObjId[0], 'id', propertyId); setter(newObjId[0]); @@ -257,6 +293,7 @@ export const LaancDrawControl = props => { }; const drawInit = () => { + // console.log('drawInit'); drawObj.deleteAll(); handlerRemoveMarker(); setDrawObjId(); diff --git a/src/views/laanc/FlightArea.js b/src/views/laanc/FlightArea.js index 2540876..91cd96b 100644 --- a/src/views/laanc/FlightArea.js +++ b/src/views/laanc/FlightArea.js @@ -85,6 +85,7 @@ export default function FlightArea({ const area = areaCoordList[0]; if (area.areaType && area.areaType !== '') { if (!centeredModal && previewLayer) handlerPreviewDraw(); + // if (!centeredModal && previewLayer) handlerPrivewDrawObj(); } setWheather(areaCoordList); } @@ -164,6 +165,7 @@ export default function FlightArea({ const handlerSave = async () => { if (areaCoordList) { + console.log('save'); const areaDetail = areaCoordList; const resultAreaDetail = areaDetail.map(area => { return { @@ -172,24 +174,8 @@ export default function FlightArea({ }; }); - // const { data } = await axios.post( - // `api/bas/flight/airspace/contains`, - // resultAreaDetail - // ); - - // if (data.result) { - // setAlertModal({ - // isOpen: true, - // title: '우회 여부 확인', - // desc: '경로상에 비행 금지된 구역이 있습니다.\n우회하여 경로 설정해주시기 바랍니다.' - // }); - - // return false; - // } - setCenteredModal(false); dispatch(AREA_DETAIL_LIST_SAVE(resultAreaDetail)); - // handleModal({ type: 'area', isOpne: false }); } else { alert('아무것도 작성 안함'); } @@ -319,6 +305,7 @@ export default function FlightArea({ const language = new MapboxLanguage(); map.addControl(language); + // map.addControl(draw); const tb = (window.tb = new threebox.Threebox( map, @@ -384,6 +371,7 @@ export default function FlightArea({ let fitZoomPaths = []; + // 기존 if (areas.areaType) { if (areas.areaType === 'CIRCLE') { const radius = areas.bufferZone; @@ -569,9 +557,13 @@ export default function FlightArea({ obj => obj.properties.id !== 'BUFFER' ).length; - if (drawObjCnt > 2) { - alert('구역은 2개까지만 설정 가능합니다.'); - } + console.log( + drawObj.getAll().features, + '>>>>현재 그려진 도형들' + ); + // if (drawObjCnt > 2) { + // alert('구역은 2개까지만 설정 가능합니다.'); + // } }} > 추가 diff --git a/src/views/laanc/LaancAreaMap.js b/src/views/laanc/LaancAreaMap.js index eeb70d3..b61226c 100644 --- a/src/views/laanc/LaancAreaMap.js +++ b/src/views/laanc/LaancAreaMap.js @@ -184,7 +184,6 @@ export default function LaancAreaMap({ centeredModal, mapContainer, drawObj }) { }); map.dragRotate.disable(); - // map.doubleClickZoom.disable(); const language = new MapboxLanguage(); map.addControl(language); @@ -335,6 +334,7 @@ export default function LaancAreaMap({ centeredModal, mapContainer, drawObj }) { mapboxgl={mapboxgl} mapObject={mapObject} areaCoordList={mapAreaCoordList} + handlerConfirm={handlerConfirm} handlerCoordinates={handlerCoordinates} handlerInitCoordinates={handlerInitCoordinates} />