diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index a0ddc8c1..c6f1fbcd 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -244,9 +244,7 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon .left-menu-nav li button svg path{fill:#f4f4f4;} /* fligth path draw */ -.left-menu-nav li .circle{background-color: #283046; font-size:0.9rem; color: white; width:70px; border: 0px;} -.left-menu-nav li .line{background-color: #283046; font-size:0.9rem; color: white; width:70px; border: 0px;} -.left-menu-nav li .none{background-color: #283046; font-size:0.9rem; color: white; width:70px; border: 0px;} +.left-menu-nav li .check{background-color: #283046; font-size:0.9rem; color: white; width:70px; border: 0px;} /*메인-알림*/ .notice{width:650px;height:45px;overflow:hidden;position:absolute;left:50%;top:20px;transform: translate(-50%,0px);background:#283046;display:flex;font-size:0.9375rem;color:#f4f4f4;padding:0px 20px;border-radius:30px;} diff --git a/src/components/mapDraw/naver/NaverMap.js b/src/components/mapDraw/naver/NaverMap.js index 784b97fb..6b32d000 100644 --- a/src/components/mapDraw/naver/NaverMap.js +++ b/src/components/mapDraw/naver/NaverMap.js @@ -8,9 +8,6 @@ import NaverMapControl from './NaverMapControl'; import { NaverMapSearch } from './search/NaverMapSearch'; import { FeatureAirZone } from './feature/FeatureAirZone'; import { DrawPath } from './draw/DrawPath'; -import { DrawTest0 } from './draw/DrawTest0'; -import { DrawTest1 } from './draw/DrawTest1'; -import { DrawTest2 } from './draw/DrawTest2'; import { DrawMap } from './draw/DrawMap'; import geoJson from '../geojson/airArea.json'; @@ -34,9 +31,9 @@ export const NaverCustomMap = () => { // setIsMapLoad(true); }, []); - useEffect(() => { - console.log('==============11111==================', mapObject); - }, [mapObject]); + // useEffect(() => { + // console.log('==============11111==================', mapObject); + // }, [mapObject]); const removeArrMarkers = arrData => { arrMarkers = arrData; diff --git a/src/components/mapDraw/naver/draw/DrawMap.js b/src/components/mapDraw/naver/draw/DrawMap.js index ea694e6e..6b0ea4fc 100644 --- a/src/components/mapDraw/naver/draw/DrawMap.js +++ b/src/components/mapDraw/naver/draw/DrawMap.js @@ -1,71 +1,84 @@ import { useEffect, useState } from "react"; +import { render } from "react-dom"; import { BiCaretLeftCircle } from "react-icons/bi"; import { useSelector } from "react-redux"; export const DrawMap = props => { const {naver} = props; const {map} = props; + const [check, setCheck] = useState([]); + + const {drawCheck} = useSelector(state => state.controlMapReducer); + useEffect(() => { + init(); + }, [drawCheck]); + + const init = () => { + removeDraw(); + } + + const removeDraw = () => { + check.forEach(prev => prev.setMap(null)); drawSetting(); - // debugger; - console.log("draw create") - }, []); + } - const drawSetting = () => { - // debugger; - console.log(map) - const drawingManager = new naver.maps.drawing.DrawingManager({ - drawingControl: [ - naver.maps.drawing.DrawingMode.POLYLINE, - naver.maps.drawing.DrawingMode.POLYGON, - naver.maps.drawing.DrawingMode.ELLIPSE, - naver.maps.drawing.DrawingMode.RECTANGLE - ], - drawingControlOptions: { - position: naver.maps.Position.LEFT_CENTER, - style: naver.maps.drawing.DrawingStyle.VERTICAL - }, - controlPointOptions: { - anchorPointOptions: { - radius: 5, - fillColor: '#ff0000', - strokeColor: '#0000ff', - strokeWeight: 2 - }, - midPointOptions: { - radius: 4, - fillColor: '#ff0000', - strokeColor: '#0000ff', - strokeWeight: 2, - fillOpacity: 0.5 - } - }, - rectangleOptions: { - fillColor: '#ff0000', - fillOpacity: 0.3, - strokeWeight: 2, - strokeColor: '#ff0000' - }, - ellipseOptions: { - fillColor: '#ff25dc', - fillOpacity: 0.3, - strokeWeight: 2, - strokeColor: '#ff25dc' - }, - polylineOptions: { // 화살표 아이콘 계열 옵션은 무시됩니다. - strokeColor: '#222', - strokeWeight: 2 - }, - polygonOptions: { - fillColor: '#ffc300', - fillOpacity: 0.3, - strokeWeight: 2, - strokeColor:'#ffc300' - } - }); - drawingManager.setMap(map); + const drawSetting = () => { + if(drawCheck) { + let drawingManager = new naver.maps.drawing.DrawingManager({ + drawingControl: [ + naver.maps.drawing.DrawingMode.POLYLINE, + naver.maps.drawing.DrawingMode.POLYGON, + naver.maps.drawing.DrawingMode.ELLIPSE, + naver.maps.drawing.DrawingMode.RECTANGLE + ], + drawingControlOptions: { + position: naver.maps.Position.LEFT_CENTER, + style: naver.maps.drawing.DrawingStyle.VERTICAL + }, + controlPointOptions: { + anchorPointOptions: { + radius: 5, + fillColor: '#ff0000', + strokeColor: '#ffffff', + strokeWeight: 2 + }, + midPointOptions: { + radius: 4, + fillColor: '#0067a3', + strokeColor: '#ffffff', + strokeWeight: 2, + } + }, + rectangleOptions: { + fillColor: '#ff0000', + fillOpacity: 0.3, + strokeWeight: 2, + strokeColor: '#ff0000' + }, + ellipseOptions: { + fillColor: '#ff25dc', + fillOpacity: 0.3, + strokeWeight: 2, + strokeColor: '#ff25dc' + }, + polylineOptions: { // 화살표 아이콘 계열 옵션은 무시됩니다. + strokeColor: '#222', + strokeWeight: 2 + }, + polygonOptions: { + fillColor: '#ffc300', + fillOpacity: 0.3, + strokeWeight: 2, + strokeColor:'#ffc300' + } + }); + drawingManager.setMap(map); + setCheck(prev => ([...prev, drawingManager])); + } + } return null; diff --git a/src/components/mapDraw/naver/draw/DrawPath.js b/src/components/mapDraw/naver/draw/DrawPath.js index cf2e9531..f8326ed4 100644 --- a/src/components/mapDraw/naver/draw/DrawPath.js +++ b/src/components/mapDraw/naver/draw/DrawPath.js @@ -35,7 +35,6 @@ export const DrawPath = props => { } const drawSetting = () => { - debugger; const drawingManager = new naver.maps.drawing.DrawingManager({ drawingControl: [ naver.maps.drawing.DrawingMode.POLYLINE, @@ -53,7 +52,7 @@ export const DrawPath = props => { const removeEvent = () => { eventGroup.forEach(prev => naver.maps.Event.removeListener(prev)); - eventGroup.forEach(prev => console.log(prev)); + // eventGroup.forEach(prev => console.log(prev)); // const test = eventGroup.find(prev=> prev='drawingManager'); // if(test) { // test.setMap(null); @@ -98,23 +97,8 @@ export const DrawPath = props => { // } // }); - // const drawingManager = new naver.maps.drawing.DrawingManager({ - // drawingControl: [ - // naver.maps.drawing.DrawingMode.POLYLINE, - // naver.maps.drawing.DrawingMode.POLYGON, - // naver.maps.drawing.DrawingMode.ELLIPSE, - // naver.maps.drawing.DrawingMode.RECTANGLE - // ], - // drawingControlOptions: { - // position: naver.maps.Position.LEFT_CENTER, - // style: naver.maps.drawing.DrawingStyle.VERTICAL - // } - // }); - - // drawingManager.setMap(map); setEventGroup(prev => ([...prev, addClick])); - // setEventGroup(prev => ([...prev, addClick, drawingManager])); } const startDraw = () => { diff --git a/src/components/mapDraw/naver/draw/DrawTest0.js b/src/components/mapDraw/naver/draw/DrawTest0.js deleted file mode 100644 index ec092735..00000000 --- a/src/components/mapDraw/naver/draw/DrawTest0.js +++ /dev/null @@ -1,71 +0,0 @@ -import { useEffect, useState } from "react"; -import { useSelector } from "react-redux"; - - -export const DrawTest0 = props => { - const {naver} = props; - const {map} = props; - - const mapControl = useSelector(state => state.controlMapReducer); - - // const [linePositions, setLinePositions] = useState([]); - const positions = ([]); - const [lineZips, setLineZips] = useState([]); - - useEffect(() => { - }, [mapControl.drawType]); - - - - if(mapControl.drawType === 'LINE') { - naver.maps.Event.addListener(map, 'click', function(e) { - // const position = e.coord; - positions.push(e.coord); - createPolyline(positions); - }) - - // naver.maps.Event.addListener(map, 'dbclick', function(e) { - // console.log("dbclick") - // }) - - naver.maps.Event.addListener(map, 'keydown', function(e) { - const keyboardEvent = e.keyboardEvent, - keyCode = keyboardEvent.keyCode || keyboardEvent.which; - - const ESC = 27; - - if(keyCode === ESC) { - keyboardEvent.preventDefault(); - - // for(var i=0, ii=lineZips.length; i line.setMap(null)); - setLineZips([]); - console.log(lineZips); - - } - }) - } - - const createPolyline = (positions) => { - if(positions.length >= 2) { - const polyline = new naver.maps.Polyline({ - path: [positions[(positions.length)-1], positions[(positions.length)-2]], - strokeWeight: 2, - strokeOpacity: 1, - strokeColor: '#ff0000', - map: map - }) - // polyline.setMap(map); - setLineZips([...lineZips, positions]); - } - } - - const removeLine = () => { - - } - - return null; -} \ No newline at end of file diff --git a/src/components/mapDraw/naver/draw/DrawTest1.js b/src/components/mapDraw/naver/draw/DrawTest1.js deleted file mode 100644 index 871576f9..00000000 --- a/src/components/mapDraw/naver/draw/DrawTest1.js +++ /dev/null @@ -1,157 +0,0 @@ -import { useEffect, useState } from "react"; -import { BiCaretLeftCircle } from "react-icons/bi"; -import { useSelector } from "react-redux"; - -export const DrawTest1 = props => { - const {naver} = props; - const {map} = props; - const {drawType} = useSelector(state => state.controlMapReducer); - - let linePath = ([]); - let circleCenter = ''; - // let positions = ([]); - // let po = ''; - - const r = 1000; - // const [polylines, setPolylines] = useState([]); - // const [circleLayers, setCircleLayers] = useState(); - let polylines = ([]); - // let circleLayers = (''); - let circleLayers = ([]); - - useEffect(() => { - init(); - }, []); - - useEffect(() => { - remove(); - console.log(drawType) - // init(); - }, [drawType]); - - const event = () => { - let addClick = naver.maps.Event.addListener(map, 'click', function(e) { - if(drawType) { - linePath.push(e.coord); - circleCenter = e.coord - clickDraw(); - } else { - - } - }) - - let escDown = naver.maps.Event.addListener(map, 'keydown', function(e) { - const keyboardEvent = e.keyboardEvent, - keyCode = keyboardEvent.keyCode || keyboardEvent.which; - - const ESC = 27; - - if(keyCode === ESC) { - keyboardEvent.preventDefault(); - remove(); - } - }) - - - } - - - const init = () => { - remove(); - event(); - } - - const clickDraw = () => { - // if(!drawType) { - // alert("path option을 선택해주세요.") - // } else { - // if(drawType === 'LINE') { - // console.log("LINE") - // createPolyline(); - // } else if(drawType === 'CIRCLE') { - // console.log("CIRCLE") - // createCircle(); - // } - // } - if(drawType === 'LINE') { - console.log('1') - createPolyline(); - } else if(drawType === 'CIRCLE') { - createCircle(); - } - } - - const createPolyline = () => { - if(linePath.length >= 2) { - const polyline = new naver.maps.Polyline({ - // path: [positions[positions.length-1], po], - path: linePath, - strokeColor: '#ff0000', - strokeWeight: 2, - strokeOpacity: 0.5, - map: map - }); - linePath.shift(); - // setPolylines(prev => ([...prev, polyline])); - polylines.push(polyline); - } - } - - // const createCircle = (positions) => { - const createCircle = () => { - if(circleLayers) remove(); - // const circleCenter = positions[0]; - // console.log(circleCenter) - // console.log(po) - // const te = positions[0]; - const circle = new naver.maps.Circle({ - center: circleCenter, - // center: positions[0], - strokeColor: '#ff0000', - strokeWeight: 2, - strokeOpacity: 1, - fillColor: '#0000ff', - fillOpacity: 0.35, - radius: r, - clickable: false, - map: map - }) - // circleCenter.shift(); - // setCircleLayers(circle); - // circleLayers = circle; - circleLayers.push(circle); - } - - // const reCircle = () => { - // // circle.setMap(null); - // // positions = ([]); - // // circleLayers.forEach(cir => cir.setMap(null)); - // circleLayers.setMap(null); - // // setCircleLayers(); - // circleLayers = ''; - // } - - - const remove = () => { - // debugger; - if(polylines) { - polylines.forEach(poly => poly.setMap(null)); - polylines = ([]); - // console.log("poly remove") - } - if(circleLayers) { - circleLayers.forEach(cir => cir.setMap(null)); - circleLayers = ([]); - // console.log("circle remove") - } - // circleLayers.forEach(cir => cir.setMap(null)); - // circleLayers = ([]); - circleCenter = ''; - linePath = ([]); - // console.log("remove!!") - // setClickable(0); - } - - return null; -}; - diff --git a/src/components/mapDraw/naver/draw/DrawTest2.js b/src/components/mapDraw/naver/draw/DrawTest2.js deleted file mode 100644 index c44dbf87..00000000 --- a/src/components/mapDraw/naver/draw/DrawTest2.js +++ /dev/null @@ -1,180 +0,0 @@ -import { useEffect, useState } from "react"; -import { useSelector } from "react-redux"; - - -export const DrawTest2 = props => { - const {naver} = props; - const {map} = props; - let draw = ''; - const {drawType} = useSelector(state => state.controlMapReducer); - - const r = 1000; - let positions = ([]); - const [polyGroup, setPolyGroup] = useState([]); - const [eventGroup, setEventGrouop] = useState([]); - const [circleGroup, setCircleGroup] = useState([]); - - useEffect(() => { - remove2(); - clickEvent(); - }, [drawType]); - - useEffect(() => { - remove(); - }, [polyGroup, eventGroup]); - - useEffect(() => { - // moveCircle(); - remove(); - }, [circleGroup]); - - - const moveCircle = () => { - if(circleGroup) { - circleGroup.forEach(prev => prev.setMap(null)); - } - }; - - const movePoly = () => { - if(polyGroup) { - polyGroup.forEach(prev => prev.setMap(null)); - } - } - - const clickEvent = () => { - console.log("d") - // remove2(); - // drawType = - if(drawType === 'CIRCLE') { - console.log("circle") - } else if(drawType === 'LINE') { - console.log("LINE") - }else if(drawType === 'POLYGON') { - console.log("POLYGON") - } - - addPositions(); - } - - const remove2 = () => { - polyGroup.forEach(poly => poly.setMap(null)); - setPolyGroup([]); - circleGroup.forEach(cir => cir.setMap(null)); - setCircleGroup([]); - eventGroup.forEach(eve => naver.maps.Event.removeListener(eve)); - setEventGrouop([]); - positions = []; - } - - const addPositions = () => { - if(event) naver.maps.Event.removeListener(event); - var event = naver.maps.Event.addListener(map, 'click', function(e) { - debugger; - if(drawType === 'LINE') { - positions.push(e.coord); - createPolyline(positions); - } else if(drawType === 'CIRCLE') { - positions = e.coord; - createCircle(positions); - } - }) - // setEventGrouop(prev => ([...prev, event])); - } - - const createCircle = (positions) => { - moveCircle(); - const circle = new naver.maps.Circle({ - center: positions, - strokeColor: '#ff0000', - strokeWeight: 2, - strokeOpacity: 1, - fillColor: '#0000ff', - fillOpacity: 0.35, - radius: r, - clickable: false, - map: map - }) - draw = drawType; - setCircleGroup(prev => ([...prev, circle])); - } - - const createPolyline = (positions) => { - if(positions.length >= 2) { - movePoly(); - const polyline = new naver.maps.Polyline({ - // path: [positions[(positions.length)-1], positions[(positions.length)-2]], - path: positions, - strokeColor: '#ff0000', - strokeWeight: 2, - strokeOpacity: 1, - map: map - }) - positions.shift(); - console.log(positions) - draw = drawType; - setPolyGroup(prev => ([...prev, polyline])); - } - - } - - const remove = () => { - if(drawType!=draw) { - naver.maps.Event.addListener(map, 'keydown', function(e) { - const keyboardEvent = e.keyboardEvent, - keyCode = keyboardEvent.keyCode || keyboardEvent.which; - - const ESC = 27; - - if(keyCode === ESC) { - keyboardEvent.preventDefault(); - polyGroup.forEach(poly => poly.setMap(null)); - setPolyGroup([]); - circleGroup.forEach(cir => cir.setMap(null)); - setCircleGroup([]); - // eventGroup.forEach(eve => naver.maps.Event.removeListener(eve)); - // setEventGrouop([]); - positions = []; - // debugger; - } - - - }) - } - } - - // const drawTypeChange = () => { - // remove(); - // draw = drawType; - // } - - // const init = () => { - // // draw = drawType; - // if(draw) { - // var event = naver.maps.Event.addListener(map, 'click', function(e) { - // draw = drawType; - // console.log(drawType, "drawType") - // // remove(draw, event); - // drawTypeChange(); - // // naver.maps.Event.removeListener(event); - // }) - // } - // // remove(event); - // } - - // const remove = (draw, event) => { - // if(draw == drawType) { - // console.log("안지워") - // } else { - // console.log("지워") - // naver.maps.Event.removeListener(event); - // } - // if(positions) naver.maps.Event.removeListener(map, 'click', function(e) { - // console.log(e); - // }); - // naver.maps.removeListener(event); - // } - - - - return null; -} \ No newline at end of file diff --git a/src/modules/control/map/actions/controlMapActions.ts b/src/modules/control/map/actions/controlMapActions.ts index d728c382..6b8e0a30 100644 --- a/src/modules/control/map/actions/controlMapActions.ts +++ b/src/modules/control/map/actions/controlMapActions.ts @@ -4,7 +4,10 @@ export const mapTypeChangeAction = (value: any) => dispatch => // draw 옵션 변경 Action export const drawTypeChangeAction = (value: any) => dispatch => -dispatch({type: 'DRAW_TYPE_CHANGE', value}) +dispatch({type: 'DRAW_TYPE_CHANGE', value}); + +export const drawCheckAction = (value: any) => dispatch => +dispatch({type: 'DRAW_CHECK', value}); // 드론체 클릭 시 Action export const objectClickAction = (value: any) => dispatch => diff --git a/src/modules/control/map/reducers/controlMapReducer.ts b/src/modules/control/map/reducers/controlMapReducer.ts index a8dac245..a454b860 100644 --- a/src/modules/control/map/reducers/controlMapReducer.ts +++ b/src/modules/control/map/reducers/controlMapReducer.ts @@ -11,7 +11,9 @@ const initialState = { area0006: true, // 초경량비행장치 sensor: 'dust', - drawType: '' + drawType: '', + + drawCheck: false }; const controlReducerReducer = (state = initialState, action) => { @@ -75,6 +77,12 @@ const controlReducerReducer = (state = initialState, action) => { ...state, drawType: action.value }; + + case 'DRAW_CHECK': + return { + ...state, + drawCheck: action.value + }; } }; diff --git a/src/views/testDraw/main/ControlMainDraw.js b/src/views/testDraw/main/ControlMainDraw.js index 91d6decb..55410aca 100644 --- a/src/views/testDraw/main/ControlMainDraw.js +++ b/src/views/testDraw/main/ControlMainDraw.js @@ -29,7 +29,7 @@ import { } from 'reactstrap' import { - drawTypeChangeAction + drawTypeChangeAction, drawCheckAction } from '../../../modules/control/map/actions/controlMapActions'; const ControlMainDraw = () => { @@ -79,6 +79,10 @@ const ControlMainDraw = () => { dispatch(drawTypeChangeAction(val)); }; + const handlerDrawCheck = val => { + dispatch(drawCheckAction(val)); + } + return ( <> @@ -102,25 +106,36 @@ const ControlMainDraw = () => { handlerDrawType('CIRCLE')} value={mapControl.drawType === 'CIRCLE' ? 'check' : 'CIRCLE'} /> handlerDrawType('LINE')} value={mapControl.drawType === 'LINE' ? 'check' : 'LINE'} />
handlerDrawType('')} value={mapControl.drawType === '' ? 'check' : 'X'} + /> + + + +
    +
  • + handlerDrawCheck(!mapControl.drawCheck)} + value={mapControl.drawCheck === true ? 'IN USE' : 'STOP'} /> -