diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js index 6df20df..11ccd96 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaMap.js +++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js @@ -39,7 +39,11 @@ const FlightPlanAreaMap = (props) => { useEffect(() => { ModeInit(); - }, [mapControl.drawType]) + }, [mapControl.drawType]); + + useEffect(() => { + setMapAreaCoordList(areaCoordList) + }, [areaCoordList]); const ModeInit = () => { setMode(mapControl.drawType) @@ -122,7 +126,7 @@ const FlightPlanAreaMap = (props) => { map={map} naver={naver} mode={mode} - areaCoordList={areaCoordList} + areaCoordList={mapAreaCoordList} handleCoordinates={handleCoordinates} handleInitCoordinates={handleInitCoordinates} /> : null} diff --git a/src/components/map/naver/draw/FlightPlanDrawTest.js b/src/components/map/naver/draw/FlightPlanDrawTest.js index 1027134..5a48971 100644 --- a/src/components/map/naver/draw/FlightPlanDrawTest.js +++ b/src/components/map/naver/draw/FlightPlanDrawTest.js @@ -6,10 +6,10 @@ import { drawTypeChangeAction } from '../../../../modules/control/map/actions/co import GeoJSONReader from 'jsts/org/locationtech/jts/io/GeoJSONReader'; import GeometryFactory from 'jsts/org/locationtech/jts/geom/GeometryFactory'; -import {BufferOp} from 'jsts/org/locationtech/jts/operation/buffer'; -import {DistanceOp} from 'jsts/org/locationtech/jts/operation/distance/DistanceOp'; +import { BufferOp } from 'jsts/org/locationtech/jts/operation/buffer'; +import { DistanceOp } from 'jsts/org/locationtech/jts/operation/distance/DistanceOp'; -import JSTSWKTReader from 'jsts/org/locationtech/jts/io/WKTReader'; +import JSTSWKTReader from 'jsts/org/locationtech/jts/io/WKTReader'; import GeoJSONWriter from 'jsts/org/locationtech/jts/io/GeoJSONWriter'; import JSTSBufferOp from 'jsts/org/locationtech/jts/operation/buffer/BufferOp' import JSTSBufferParameter from 'jsts/org/locationtech/jts/operation/buffer/BufferParameters'; @@ -23,10 +23,10 @@ export const FlightPlanDrawTest = props => { const [pastBuffer, setBuffer] = useState(); const [pastPolygon, setPolygon] = useState(); - + const [pastCircle, setCircle] = useState(); const [pastEve, setEve] = useState(); - + const [pastDragCircle, setDragCircle] = useState([]); const naver = props.naver; @@ -57,21 +57,21 @@ export const FlightPlanDrawTest = props => { let check; - useEffect(() => { + useEffect(() => { drawInit(); }, [mapControl.drawType]) useEffect(() => { handleDetailDrwa(); - }, []) + }, [props.areaCoordList]) const zoomChange = () => { let change; - if(change) { + if (change) { naver.maps.Event.removeListener(change); } else { - change = naver.maps.Event.addListener(map, 'zoom_changed', function() { - if(dragCircle) { + change = naver.maps.Event.addListener(map, 'zoom_changed', function () { + if (dragCircle) { // dragCircle.forEach(prev => prev.setRadius(map._mapOptions.zoom + 5)); // dragCircle.forEach(prev => prev.setRadius(prev.getRadius() * 1.25)); } @@ -79,27 +79,27 @@ export const FlightPlanDrawTest = props => { } } - const drawInit = () => { - console.log(mapControl.drawType); - if(mapControl.drawType==='LINE') { + const drawInit = () => { + console.log(mapControl.drawType); + if (mapControl.drawType === 'LINE') { onClickButton('LINE'); - } else if(mapControl.drawType==='CIRCLE') { + } else if (mapControl.drawType === 'CIRCLE') { onClickButton('CIRCLE'); - } else if(mapControl.drawType==='POLYGON') { + } else if (mapControl.drawType === 'POLYGON') { onClickButton('POLYGON'); - } else if(mapControl.drawType==='RESET') { + } else if (mapControl.drawType === 'RESET') { onClickReset('RESET') } } const onClickButton = (newMode) => { - console.log('onClickButton'); + console.log('onClickButton'); - zoomChange(); + zoomChange(); clearMode(mode); - if(mode === newMode) { + if (mode === newMode) { mode = null; return; } @@ -109,11 +109,11 @@ export const FlightPlanDrawTest = props => { startMode(newMode); } - const clearMode = (mode) => { + const clearMode = (mode) => { console.log('clearMode') // if(!mode) return; - + // clear mode는 전체를 다 초기화 하는게 맞지 않을까..? 무조건 drawType이 변할때마다 초기화해주기로.. if (pastPolyline) { console.log('clrea polyline ', pastPolyline) @@ -126,7 +126,7 @@ export const FlightPlanDrawTest = props => { if (pastCircle) { console.log('clrea circle ', pastCircle) pastCircle.setMap(null); - naver.maps.Event.removeListener(pastEve); + naver.maps.Event.removeListener(pastEve); setCircle(); } @@ -136,12 +136,12 @@ export const FlightPlanDrawTest = props => { pastDragCircle.forEach(c => c.setMap(null)); setPolygon(); - setDragCircle([]); + setDragCircle([]); } - finishDraw(); - props.handleInitCoordinates(); - + finishDraw(); + props.handleInitCoordinates(); + // if(mode === 'LINE' && pastPolyline) { // pastPolyline.setMap(null); // pastDragCircle.forEach(c => c.setMap(null)); @@ -176,23 +176,23 @@ export const FlightPlanDrawTest = props => { console.log('startMode') if (!mode) return; - + if (mode === 'LINE') { - Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickPolyline(e) }); + Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolyline(e) }); } else if (mode === 'POLYGON') { - Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickPolygon(e) }); + Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolygon(e) }); } else if (mode === 'CIRCLE') { - setEve(naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e) })) + setEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) })) } } const removeListener = () => { console.log('removeListener') - + naver.maps.Event.removeListener(Eve.clickEve); naver.maps.Event.removeListener(Eve.mousedownEve); naver.maps.Event.removeListener(Eve.rightclickEve); - if(!circle) $(document).off('mousemove.measure'); + if (!circle) $(document).off('mousemove.measure'); // if(pastCircle) naver.maps.Event.removeListener(pastEve); naver.maps.Event.removeListener(pastEve); } @@ -200,17 +200,17 @@ export const FlightPlanDrawTest = props => { const finishDraw = () => { console.log('finishDraw') removeListener(); - if(polyline) { + if (polyline) { let polypaths = polyline.getPath()._array; - - if(guideline) { + + if (guideline) { guideline.setMap(null); guideline = ''; } - - if(polypaths.length >= 2) { + + if (polypaths.length >= 2) { //꼭짓점 circle 생성 - for(let index = 0; index < polypaths.length; index++) { + for (let index = 0; index < polypaths.length; index++) { dragCircle.push( new naver.maps.Circle({ strokeOpacity: 1, @@ -223,12 +223,12 @@ export const FlightPlanDrawTest = props => { clickable: true }) ) - - dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function() { onMouseDownDrag(index) })) + + dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function () { onMouseDownDrag(index) })) } setDragCircle(dragCircle); setPolyline(polyline); - + setAreaInfo(polypaths); } else { @@ -236,13 +236,13 @@ export const FlightPlanDrawTest = props => { polyline = ''; } - } else if(polygon) { + } else if (polygon) { let path = polygon.getPath(); path.pop(); let polygonpaths = polygon.getPath()._array; //꼭짓점 circle 생성 - for(let index = 0; index < polygonpaths.length; index++) { + for (let index = 0; index < polygonpaths.length; index++) { dragCircle.push( new naver.maps.Circle({ strokeOpacity: 1, @@ -255,7 +255,7 @@ export const FlightPlanDrawTest = props => { clickable: true }) ) - dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function() { onMouseDownDrag(index) })) + dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function () { onMouseDownDrag(index) })) } setDragCircle(dragCircle); setPolygon(polygon); @@ -267,8 +267,8 @@ export const FlightPlanDrawTest = props => { console.log('onClickPolyline') var coord = e.coord; - if(!check) { - if(!polyline) { + if (!check) { + if (!polyline) { //가이드라인 guideline = new naver.maps.Polyline({ strokeColor: '#283046', @@ -278,7 +278,7 @@ export const FlightPlanDrawTest = props => { map: map }); // lastDistance = guideline.getDistance(); - + //실제 사용되는 라인 polyline = new naver.maps.Polyline({ strokeLineCap: 'round', @@ -289,21 +289,21 @@ export const FlightPlanDrawTest = props => { path: [coord], map: map }); - - Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function() { finishDraw() }) - $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); }); - + + Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() }) + $(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); }); + lastDistance = polyline.getDistance(); // this._addMileStone(coord, 'Start'); } else { guideline.setPath([e.coord]); polyline.getPath().push(coord); - + var distance = polyline.getDistance(); // addMileStone(coord, this._fromMetersToText(distance - this._lastDistance)); lastDistance = distance; } - } + } } const onMouseMovePolyline = (e) => { @@ -312,7 +312,7 @@ export const FlightPlanDrawTest = props => { coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), path = guideline.getPath(); - if(path.getLength() === 2) { + if (path.getLength() === 2) { path.pop(); } @@ -323,7 +323,7 @@ export const FlightPlanDrawTest = props => { console.log('onClickPolygon') var coord = e.coord; - if(!polygon) { + if (!polygon) { polygon = new naver.maps.Polygon({ strokeColor: '#283046', strokeOpacity: 1, @@ -333,8 +333,8 @@ export const FlightPlanDrawTest = props => { map: map }); - Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function() { finishDraw() }) - $(document).on('mousemove.measure', function(e) { onMouseMovePolygon(e) }); + Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() }) + $(document).on('mousemove.measure', function (e) { onMouseMovePolygon(e) }); } else { polygon.getPath().push(coord); } @@ -342,13 +342,13 @@ export const FlightPlanDrawTest = props => { const onMouseMovePolygon = (e) => { console.log('onMouseMovePolygon') - if(!polygon) return; + if (!polygon) return; var proj = map.getProjection(), coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), path = polygon.getPath(); - if(path.getLength() >= 2) { + if (path.getLength() >= 2) { path.pop(); } @@ -359,8 +359,8 @@ export const FlightPlanDrawTest = props => { console.log('onClickCircle') var coord = e.coord; - if(!check) { - if(!circle) { + if (!check) { + if (!circle) { //가이드라인 radiusline = new naver.maps.Polyline({ // strokeStyle: [4, 4], @@ -382,7 +382,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); @@ -398,7 +398,7 @@ export const FlightPlanDrawTest = props => { const onMouseDownDrag = (index) => { console.log('onMouseDownDrag') - if(circle) { + if (circle) { naver.maps.Event.removeListener(Eve.clickEve); } @@ -412,8 +412,8 @@ export const FlightPlanDrawTest = props => { disableTwoFingerTapZoom: true }) - $(document).on('mousemove.measure', function(e) { onMouseMoveDrag(e, index) }); - $(document).on('mouseup.measure', function() { onMouseUpDrag() }); + $(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) }); + $(document).on('mouseup.measure', function () { onMouseUpDrag() }); } const onMouseMoveDrag = (e, index) => { @@ -424,29 +424,29 @@ export const FlightPlanDrawTest = props => { var proj = map.getProjection(), coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)); - if(polyline) { + if (polyline) { var polypaths = polyline.getPath()._array; let movepath = []; - for(let i = 0; i < polypaths.length; i++) { + for (let i = 0; i < polypaths.length; i++) { let path; - if(i === index) { + if (i === index) { path = coord; } else { path = polypaths[i] } movepath.push(path); } - + polyline.setPath(movepath); - } else if(polygon) { + } else if (polygon) { var polygonpaths = polygon.getPath()._array; let movepath = []; - for(let i = 0; i < polygonpaths.length; i++) { + for (let i = 0; i < polygonpaths.length; i++) { let path; - if(i === index) { + if (i === index) { path = coord; } else { path = polygonpaths[i] @@ -455,19 +455,19 @@ export const FlightPlanDrawTest = props => { } polygon.setPaths(movepath) - } else if(circle) { + } else if (circle) { var circlepath = radiusline.getPath(), center = circle.getCenter(), r = proj.getDistance(coord, center); - if(circlepath.getLength() === 2) { + if (circlepath.getLength() === 2) { circlepath.pop(); } circlepath.push(coord); circle.setRadius(r); } - - if(!circle) { + + if (!circle) { dragCircle[index].setCenter(coord); } } @@ -485,12 +485,12 @@ export const FlightPlanDrawTest = props => { disableTwoFingerTapZoom: false }) - if(polyline) { + if (polyline) { bufferPolyline.setMap(null); // bufferMove(); } - if(polygon) { + if (polygon) { var path = polygon.getPath()._array; setPolygon(polygon); // setAreaInfo(path, ''); @@ -499,9 +499,9 @@ export const FlightPlanDrawTest = props => { $(document).off('mousemove.measure'); $(document).off('mouseup.measure'); - if(circle) { + if (circle) { // Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e); }) - setEve(naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e) })) + setEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) })) setCircle(circle); setAreaInfo('', ''); } @@ -509,14 +509,14 @@ export const FlightPlanDrawTest = props => { check = false; } - const setAreaInfo = (path, bufferpath) => { + const setAreaInfo = (path, bufferpath) => { areaInfo = { - coordinates : [], + coordinates: [], bufferZone: 0, }; let prePath = []; - if(path) { + if (path) { path.forEach((item) => { const p = { lat: item.y, @@ -526,23 +526,23 @@ export const FlightPlanDrawTest = props => { prePath.push(p); }) // path.forEach(prev=> prePath.push([prev.x, prev.y])) - } + } - if(polyline) { - areaInfo.coordinates = prePath; - areaInfo.areaType = 'LINE'; - } else if(polygon) { + if (polyline) { + areaInfo.coordinates = prePath; + areaInfo.areaType = 'LINE'; + } else if (polygon) { areaInfo.coordinates = prePath; - areaInfo.areaType = 'POLYGON'; - } else if(circle) { + 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'; + areaInfo.areaType = 'CIRCLE'; } props.handleCoordinates(areaInfo); // console.log(areaInfo, 'areaInfo') @@ -552,7 +552,7 @@ export const FlightPlanDrawTest = props => { let pol = polyline.getPath()._array; //latlng point 다 준건가? let lineStringPaths = []; - for(let i = 0; i< pol.length; i++) { + for (let i = 0; i < pol.length; i++) { // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToEPSG3857(pol[i])) // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToNaver(pol[i])) // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToTM128(pol[i])) @@ -564,7 +564,7 @@ export const FlightPlanDrawTest = props => { // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToUTMK(naver.maps.Point(pol[i].x, pol[i].y))) - + lineStringPaths.push([pol[i].x, pol[i].y]); } // console.log(map.getProjection().getProjectionName()); @@ -578,7 +578,7 @@ export const FlightPlanDrawTest = props => { const wkt = 'LINESTRING (126.6061581 37.5218642, 126.6061581 37.518052)' let coords = { "type": "LineString", - "coordinates" : lineStringPaths + "coordinates": lineStringPaths }; const bufferCenter = new JSTSWKTReader().read(wkt) const bufferResult = JSTSBufferOp.bufferOp( @@ -586,7 +586,7 @@ export const FlightPlanDrawTest = props => { bufferRadius ) - const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult) + const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult) // bufferPolyline = new naver.maps.Polyline({ // strokeColor: '#ff0000', @@ -596,7 +596,7 @@ export const FlightPlanDrawTest = props => { // strokeOpacity: 1, // path : bufferPaths, // // path: [ - + // // ], // map: map // }); @@ -609,7 +609,7 @@ export const FlightPlanDrawTest = props => { let pol = polyline.getPath()._array; let lineStringPaths = []; - for(let i = 0; i< polyline.getPath().length; i++) { + for (let i = 0; i < polyline.getPath().length; i++) { lineStringPaths.push([pol[i].x, pol[i].y]); } console.log(lineStringPaths, 'polyline path') @@ -647,54 +647,54 @@ export const FlightPlanDrawTest = props => { // map: map // }); - //------------------------ + //------------------------ - let coords = { - "type": "LineString", - "coordinates" : lineStringPaths - }; - - const reader = new GeoJSONReader(); - const writer = new GeoJSONWriter(); + let coords = { + "type": "LineString", + "coordinates": lineStringPaths + }; - const distance = (100 * 0.001) / 111.12; //100미터 - const line = reader.read(coords); - const buffer = BufferOp.bufferOp(line, distance, 0, 3); + const reader = new GeoJSONReader(); + const writer = new GeoJSONWriter(); - let bufferpath = buffer._shell._points._coordinates; + const distance = (100 * 0.001) / 111.12; //100미터 + const line = reader.read(coords); + const buffer = BufferOp.bufferOp(line, distance, 0, 3); - let bufferPaths = []; - for(let i = 0; i< bufferpath.length; i++) { - bufferPaths.push([bufferpath[i].x, bufferpath[i].y]); - } - console.log(bufferPaths, 'bufferPaths') + let bufferpath = buffer._shell._points._coordinates; - bufferPolyline = new naver.maps.Polyline({ - strokeColor: '#ff0000', - strokeColor: '#283046', - strokeWeight: 2, - strokeStyle: [4, 4], - strokeOpacity: 1, - path : bufferPaths, - map: map - }); - // setAreaInfo(polyline.getPath()._array, bufferPath); - setAreaInfo(polyline.getPath()._array, bufferPaths); - setPolyline(polyline); - setBuffer(bufferPolyline) + let bufferPaths = []; + for (let i = 0; i < bufferpath.length; i++) { + bufferPaths.push([bufferpath[i].x, bufferpath[i].y]); + } + console.log(bufferPaths, 'bufferPaths') + + bufferPolyline = new naver.maps.Polyline({ + strokeColor: '#ff0000', + strokeColor: '#283046', + strokeWeight: 2, + strokeStyle: [4, 4], + strokeOpacity: 1, + path: bufferPaths, + map: map + }); + // setAreaInfo(polyline.getPath()._array, bufferPath); + setAreaInfo(polyline.getPath()._array, bufferPaths); + setPolyline(polyline); + setBuffer(bufferPolyline) } - const onClickReset = () => { + const onClickReset = () => { console.log('onClickRest - ', mapControl.drawType); - if(mapControl.drawType === 'RESET') { + if (mapControl.drawType === 'RESET') { clearMode('RESET'); - } + } } const handleDetailDrwa = () => { - if (props.areaCoordList) { - const areas = props.areaCoordList[0]; + if (props.areaCoordList) { + const areas = props.areaCoordList[0]; const paths = []; @@ -702,9 +702,9 @@ export const FlightPlanDrawTest = props => { const path = new naver.maps.LatLng(coord.lat, coord.lon) paths.push(path); - }); + }); - if(areas.areaType && areas.areaType === 'LINE') { + if (areas.areaType && areas.areaType === 'LINE') { polyline = new naver.maps.Polyline({ strokeLineCap: 'round', strokeLineJoin: 'round', @@ -714,12 +714,38 @@ export const FlightPlanDrawTest = props => { path: paths, map: map }); - + setPolyline(polyline) - // $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); }); + + if (areas.bufferCoordList) { + const bufferPaths = []; + + areas.bufferCoordList.forEach((bfCoord) => { + const path = new naver.maps.LatLng(bfCoord.lat, bfCoord.lon); + + bufferPaths.push(path); + }); + console.log('buffer test : ',areas.bufferCoordList); + + if(pastPolygon) { + pastPolygon.setMap(null); + } + + polygon = new naver.maps.Polygon({ + strokeColor: '#283046', + strokeOpacity: 1, + fillColor: '#7367F0', + fillOpacity: 0.1, + paths: bufferPaths, + map: map + }); + console.log(polygon); + + setPolygon(polygon); + } } - if(areas.areaType && areas.areaType === 'POLYGON') { + if (areas.areaType && areas.areaType === 'POLYGON') { polygon = new naver.maps.Polygon({ strokeColor: '#283046', strokeOpacity: 1, @@ -732,7 +758,7 @@ export const FlightPlanDrawTest = props => { setPolygon(polygon); } - if(areas.areaType && areas.areaType === 'CIRCLE') { + if (areas.areaType && areas.areaType === 'CIRCLE') { circle = new naver.maps.Circle({ strokeColor: '#283046', strokeOpacity: 1, @@ -747,10 +773,10 @@ export const FlightPlanDrawTest = props => { setCircle(circle); } } -} + } return ( - <> + <> ); }; \ No newline at end of file diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index 4be5aac..51e250b 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -142,7 +142,7 @@ const FlightPlanDetailContainer = () => { useEffect(() => { // 조종사, 기체 정보 Redux 초기화 - // dispatch(Actions.PILOT_ARCRFT_SELECT_INIT()); + dispatch(Actions.PILOT_ARCRFT_SELECT_INIT()); }) const handleModal = (modal) => {