From 911bec85834fa349d5cb8efd33dc8ac7ab8e89cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Thu, 28 Jul 2022 22:02:04 +0900 Subject: [PATCH] =?UTF-8?q?[=EB=B9=84=ED=96=89=20=EA=B5=AC=EC=97=AD]=20?= =?UTF-8?q?=EA=B8=B0=EC=B4=A4=20=EC=A2=8C=ED=91=9C=20create=20=EC=9E=91?= =?UTF-8?q?=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../flight/plan/FlightPlanAreaDetailForm.js | 4 +- .../basis/flight/plan/FlightPlanAreaMap.js | 45 ++-- .../map/naver/draw/FlightPlanDrawTest.js | 212 ++++++++---------- .../plan/FlightPlanAreaDetailContainer.js | 6 - 4 files changed, 126 insertions(+), 141 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js index 9bbd989..c801f2b 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js +++ b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js @@ -46,7 +46,7 @@ const FlightPlanAreaDetailForm = ({ handleSave, handleClose, handleChange, data const latlon = coord.lat + ' / ' + coord.lon; return ( - + + { const dispatch = useDispatch(); @@ -23,21 +22,22 @@ const FlightPlanAreaMap = (props) => { const airArea = props.airArea; const mapControl = useSelector(state => state.controlMapReducer); + const { areaCoordList } = useSelector(state => state.flightState); const [map, setMap] = useState(); const [isMapLoad, setIsMapLoad] = useState(false); const [mode, setMode] = useState(); - const [areaCoordList, setAreaCoordList] = useState(initFlightBas.initDetail.areaList); + const [mapAreaCoordList, setMapAreaCoordList] = useState(initFlightBas.initDetail.areaList); useEffect(() => { - NaverMapInit(); + NaverMapInit(); }, []); useEffect(() => { setIsMapLoad(true); }, [airArea]); - useEffect(() => { + useEffect(() => { ModeInit(); }, [mapControl.drawType]) @@ -68,21 +68,28 @@ const FlightPlanAreaMap = (props) => { const handlerDrawCheck = val => { dispatch(drawCheckAction(val)); - }; - - const handleCoordinates = (coords, radius) => { + }; + + const handleInitCoordinates = () => { + dispatch(AREA_COORDINATE_LIST_SAVE(null)) + } + + const handleCoordinates = (areaInfo) => { const initAreaList = Object.assign([], initFlightBas.initDetail.areaList); - const coordList = []; + const coordList = []; // radius = 10; - coords.forEach((c, i) => { + areaInfo.coordinates.forEach((c, i) => { const coord = Object.assign({}, initFlightBas['coord']); - coord.lat = c._lat; - coord.lon = c._lng; + coord.lat = c.lat; + coord.lon = c.lon; coordList.push(coord); }); + + initAreaList[0].bufferZone = areaInfo.bufferZone; + initAreaList[0].areaType = areaInfo.areaType; const areaList = initAreaList.map((area, i) => { return { @@ -92,7 +99,7 @@ const FlightPlanAreaMap = (props) => { }) // dispatch(AREA_COORDINATE_LIST_SAVE(areaList)) - setAreaCoordList(areaList); + setMapAreaCoordList(areaList); } return ( @@ -108,17 +115,19 @@ const FlightPlanAreaMap = (props) => {
- + mode={mode} + areaCoordList={areaCoordList} + handleCoordinates={handleCoordinates} + handleInitCoordinates={handleInitCoordinates} + /> : null} props.handleConfirm(areaCoordList)} + onClick = {e => props.handleConfirm(mapAreaCoordList)} > 확인 diff --git a/src/components/map/naver/draw/FlightPlanDrawTest.js b/src/components/map/naver/draw/FlightPlanDrawTest.js index 95e19e0..20ff445 100644 --- a/src/components/map/naver/draw/FlightPlanDrawTest.js +++ b/src/components/map/naver/draw/FlightPlanDrawTest.js @@ -61,13 +61,9 @@ export const FlightPlanDrawTest = props => { drawInit(); }, [mapControl.drawType]) - const handlerDrawType = val => { - dispatch(drawTypeChangeAction(val)); - }; - - // useEffect(() => { - // onClickCheck(); - // }, [mapControl.drawCheck]) + useEffect(() => { + // handleDetailDrwa(); + }, []) const zoomChange = () => { let change; @@ -83,7 +79,7 @@ export const FlightPlanDrawTest = props => { } } - const drawInit = () => { + const drawInit = () => { if(mapControl.drawType==='LINE') { onClickButton('LINE'); } else if(mapControl.drawType==='CIRCLE') { @@ -91,13 +87,12 @@ export const FlightPlanDrawTest = props => { } else if(mapControl.drawType==='POLYGON') { onClickButton('POLYGON'); } else if(mapControl.drawType==='RESET') { - onClickButton('RESET') + // onClickReset('RESET') } } const onClickButton = (newMode) => { - console.log('onClickButton'); - if(newMode === 'RESET') return false; + console.log('onClickButton'); zoomChange(); @@ -116,16 +111,13 @@ export const FlightPlanDrawTest = props => { const clearMode = (mode) => { console.log('clearMode') - if(!mode) return; - + if(!mode) return; + if (mode === 'LINE') { - if(pastPolyline) { + if(pastPolyline) { pastPolyline.setMap(null); - setPolyline(); - pastBuffer.setMap(null); - setBuffer(); pastDragCircle.forEach(prev => prev.setMap(null)); - setDragCircle([]); + setDragCircle([]); } } else if(mode === 'POLYGON') { @@ -133,16 +125,18 @@ export const FlightPlanDrawTest = props => { pastPolygon.setMap(null); setPolygon(); pastDragCircle.forEach(prev => prev.setMap(null)); - setDragCircle([]); + setDragCircle([]); } } else if(mode === 'CIRCLE') { if(pastCircle) { pastCircle.setMap(null); setCircle(); - naver.maps.Event.removeListener(pastEve); + naver.maps.Event.removeListener(pastEve); } } - finishDraw(); + + finishDraw(); + props.handleInitCoordinates(); } const startMode = (mode) => { @@ -203,22 +197,10 @@ export const FlightPlanDrawTest = props => { dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function() { onMouseDownDrag(index) })) } setDragCircle(dragCircle); + setPolyline(polyline); + + setAreaInfo(polypaths); - //파싱 - // let polypathJSON = new Array(); - // for(let i = 0; i< polypaths.length; i++) { - // let obj = new Object(); - - // obj.x = '' + polypaths[i]._lng + ''; - // obj.y = '' + polypaths[i]._lat + ''; - - // obj = JSON.stringify(obj); - // polypathJSON.push(JSON.parse(obj)); - // } - // console.log(polypathJSON, 'json polyline path'); - // bufferMove(); - // bufferTest(); - props.handleCoordinates(polypaths); } else { polyline.setMap(null); polyline = ''; @@ -266,7 +248,7 @@ export const FlightPlanDrawTest = props => { map: map }); // lastDistance = guideline.getDistance(); - + //실제 사용되는 라인 polyline = new naver.maps.Polyline({ strokeLineCap: 'round', @@ -370,7 +352,7 @@ export const FlightPlanDrawTest = props => { clickable: true }); - Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function() { onMouseDownDrag(0); }) + Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function() { onMouseDownDrag(0); }) } else { circle.setRadius(100); circle.setCenter(coord); @@ -481,7 +463,7 @@ export const FlightPlanDrawTest = props => { if(polygon) { var path = polygon.getPath()._array; setPolygon(polygon); - setAreaInfo(path, ''); + // setAreaInfo(path, ''); } $(document).off('mousemove.measure'); @@ -498,35 +480,46 @@ export const FlightPlanDrawTest = props => { } const setAreaInfo = (path, bufferpath) => { - areaInfo = ''; + areaInfo = { + coordinates : [], + bufferZone: 0, + }; + + let prePath = []; + if(path) { + path.forEach((item) => { + const p = { + lat: item.y, + lon: item.x + } - if(path) { - let prePath = []; - path.forEach(prev=> prePath.push([prev.x, prev.y])) + prePath.push(p); + }) + // path.forEach(prev=> prePath.push([prev.x, prev.y])) } if(polyline) { - areaInfo = { - linepath: prePath, - linebuffer: 50, - bufferpath: bufferpath - } + areaInfo.coordinates = prePath; + areaInfo.areaType = 'LINE'; } else if(polygon) { - areaInfo = { - polygonpath: prePath - } - } else if(circle) { - areaInfo = { - center: circle.getCenter(), - radius: circle.getRadius() + areaInfo.coordinates = prePath; + areaInfo.areaType = 'POLYGON'; + } else if(circle) { + const point = { + lat: circle.getCenter().y, + lon: circle.getCenter().x } + + areaInfo.coordinates.push(point); + areaInfo.bufferZone = circle.getRadius(); + areaInfo.areaType = 'CIRCLE'; } - console.log(areaInfo, 'areaInfo') + props.handleCoordinates(areaInfo); + // console.log(areaInfo, 'areaInfo') } const bufferTest = () => { - let pol = polyline.getPath()._array; //latlng point 다 준건가? - // console.log(pol) + let pol = polyline.getPath()._array; //latlng point 다 준건가? let lineStringPaths = []; for(let i = 0; i< pol.length; i++) { @@ -563,8 +556,7 @@ export const FlightPlanDrawTest = props => { bufferRadius ) - const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult) - // console.log(bufferResultGeoJSON) + const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult) // bufferPolyline = new naver.maps.Polyline({ // strokeColor: '#ff0000', @@ -636,8 +628,7 @@ export const FlightPlanDrawTest = props => { const writer = new GeoJSONWriter(); const distance = (100 * 0.001) / 111.12; //100미터 - const line = reader.read(coords); - // const buffer = BufferOp.bufferOp(line, distance); + const line = reader.read(coords); const buffer = BufferOp.bufferOp(line, distance, 0, 3); let bufferpath = buffer._shell._points._coordinates; @@ -654,71 +645,62 @@ export const FlightPlanDrawTest = props => { strokeWeight: 2, strokeStyle: [4, 4], strokeOpacity: 1, - path : bufferPaths, - // path: [ - - // ], + path : bufferPaths, map: map - }); - - + }); // setAreaInfo(polyline.getPath()._array, bufferPath); setAreaInfo(polyline.getPath()._array, bufferPaths); setPolyline(polyline); setBuffer(bufferPolyline) } - const onClickCheck = () => { - console.log('onClickReset') - // if(!mapControl.drawType) return; - - if(mapControl.drawCheck === 'RESET') { + const onClickReset = () => { + if(mapControl.drawType === 'RESET') { clearMode(mode); - mode = newMode; - - startMode(newMode); - // removeListener(); - // if(polyline) { - // polyline.setMap(null); - // polyline = ''; - // guideline.setMap(null); - // guideline = ''; - // bufferPolyline.setMap(null); - // bufferPolyline = ''; - // } - // if(polygon) { - // console.log(polygon) - // polygon.setMap(null); - // polygon = ''; - // } - // if(circle) { - // circle.setMap(null); - // circle = ''; - // radiusline.setMap(null); - // radiusline = ''; - // } + } + } + + const handleDetailDrwa = () => { + + if (props.areaCoordList) { + const areas = props.areaCoordList[0]; + if(areas.areaType && areas.areaType === 'LINE') { + const paths = []; + + areas.coordList.forEach((coord) => { + const path = new naver.maps.LatLng(coord.lat, coord.lon) + + paths.push(path); + }) + + polyline = new naver.maps.Polyline({ + strokeLineCap: 'round', + strokeLineJoin: 'round', + strokeColor: '#283046', + strokeWeight: 3, + strokeOpacity: 1, + path: paths, + map: map + }); + + setPolyline(polyline) + // $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); }); + } + + if(areas.areaType && areas.areaType === 'PLOYGON') { + + } + + if(areas.areaType && areas.areaType === 'CIRCLE') { + + } } - - } + +} return ( - <> - {/* - 확인 - - handlerDrawCheck('RESET')} - onClick={e => handlerDrawType('RESET')} - > - 초기화 - */} + <> ); }; \ No newline at end of file diff --git a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js index 150f5e1..dccf0c4 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js @@ -17,12 +17,6 @@ const FlightPlanAreaDetailContainer = ({ handleModal }) => { } const handleSave = () => { - - if(areaDetail[0].coordList.length <= 1) { - alert('영역을 생성해주세요.'); - return false; - } - const resultAreaDetail = areaDetail.map((area, i) => { return { ...area,