diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js index 6432e16..2fc6746 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaMap.js +++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js @@ -4,21 +4,15 @@ import { CardBody, Button, Input, - Row, - Col, InputGroup, InputGroupAddon, - InputGroupText, - FormGroup + InputGroupText } from 'reactstrap'; -import { Key, Search } from 'react-feather'; +import { Search } from 'react-feather'; import { useDispatch, useSelector } from 'react-redux'; import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone'; -import { - drawTypeChangeAction, - drawCheckAction -} from '../../../../modules/control/map/actions/controlMapActions'; -import { FlightPlanDraw } from '../../../map/naver/draw/FlightPlanDraw'; +import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions'; +import { FlightPlanDraw_init } from '../../../map/naver/draw/FlightPlanDraw'; import { initFlightBas } from '../../../../modules/basis/flight/models/basisFlightModel'; import { AREA_COORDINATE_LIST_SAVE, @@ -44,7 +38,8 @@ const FlightPlanAreaMap = props => { const [searchRes, setSearchRes] = useState([]); const [isSearch, setIsSearch] = useState(false); - const [dragSize, setDragSize] = useState(0); + const [dragSize, setDragSize] = useState(140); + const [pastDragCircle, setDragCircle] = useState([]); useEffect(() => { NaverMapInit(); @@ -53,6 +48,10 @@ const FlightPlanAreaMap = props => { }; }, []); + useEffect(() => { + pastDragCircle.forEach(c => c.setRadius(dragSize)); + }, [dragSize]); + useEffect(() => { setIsMapLoad(true); }, [airArea]); @@ -122,25 +121,12 @@ const FlightPlanAreaMap = props => { // console.log(dragSize); }); naver.maps.Event.addListener(mapp, 'zoom_changed', function () { - switch (mapp.zoom) { - case 13: - setDragSize(100); - break; - case 14: - setDragSize(40); - break; - case 15: - setDragSize(35); - break; - case 16: - setDragSize(20); - break; - case 17: - setDragSize(10); - break; - default: - setDragSize(100); - break; + let radius = 17920; + for (let i = 6; i < 22; i++) { + if (i == mapp.zoom) { + setDragSize(radius); + } + radius = radius / 2; } }); setMap(mapp); @@ -233,7 +219,7 @@ const FlightPlanAreaMap = props => {
{map ? ( - { isDone={props.isDone} isDisabled={props.isDisabled} dragSize={dragSize} + pastDragCircle={pastDragCircle} + setDragCircle={setDragCircle} /> ) : null} diff --git a/src/components/map/naver/draw/FlightPlanDraw.js b/src/components/map/naver/draw/FlightPlanDraw.js index a4f0686..0f55840 100644 --- a/src/components/map/naver/draw/FlightPlanDraw.js +++ b/src/components/map/naver/draw/FlightPlanDraw.js @@ -4,10 +4,9 @@ import { useDispatch, useSelector } from 'react-redux'; import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; import { InfoModal } from '../../../modal/InfoModal'; -export const FlightPlanDraw = props => { +export const FlightPlanDraw_init = props => { const dispatch = useDispatch(); const mapControl = useSelector(state => state.controlMapReducer); - // const isYour = props.isYour; const isDone = props.isDone; const isDisabled = props.isDisabled; @@ -15,7 +14,9 @@ export const FlightPlanDraw = props => { const [pastBuffer, setBuffer] = useState(); const [pastPolygon, setPolygon] = useState(); const [pastCircle, setCircle] = useState([]); - const [pastDragCircle, setDragCircle] = useState([]); + // const [pastDragCircle, setDragCircle] = useState([]); + const pastDragCircle = props.pastDragCircle; + const setDragCircle = props.setDragCircle; const [pastClickEve, setClickEve] = useState(); const [pastMarker, setMarker] = useState([]); @@ -33,8 +34,6 @@ export const FlightPlanDraw = props => { const naver = props.naver; const map = props.map; let mode = props.mode; - // let dragCircleSize = props.dragCircleSize; - // let dragSize = props.dragSize; let areaInfo; let lastDistance; @@ -65,10 +64,9 @@ export const FlightPlanDraw = props => { const [radiusCircle, setRadiusCircle] = useState(); - // useEffect(() => { - // console.log(props.dragSize); - // setRadiusCircle(props.dragSize); - // }, [props.dragSize]); + useEffect(() => { + setRadiusCircle(props.dragSize); + }, [props.dragSize]); useEffect(() => { drawInit(); @@ -630,12 +628,11 @@ export const FlightPlanDraw = props => { fillColor: '#ffffff', fillOpacity: 1, center: paths[i], - // radius: 17, - // radius: dragSize, map: map, - // clickable: true clickable: clickSet, - ...(props.dragSize ? { radius: radiusCircle } : { radius: 100 }) + ...(props.dragSize ? { radius: radiusCircle } : { radius: 140 }) + // radius: 17, + // clickable: true }) ); { @@ -742,12 +739,11 @@ export const FlightPlanDraw = props => { fillColor: '#ffffff', fillOpacity: 1, center: paths[i], - // radius: dragSize, - // radius: 17, - // radius: dragCircleSize, map: map, + clickable: clickSet, + ...(props.dragSize ? { radius: radiusCircle } : { radius: 140 }) + // radius: 17, // clickable: true - clickable: clickSet }) ); { @@ -837,19 +833,15 @@ export const FlightPlanDraw = props => { circle = new naver.maps.Circle({ strokeColor: '#283046', strokeOpacity: 1, - // fillColor: '#ff0000', fillColor: '#7367F0', fillOpacity: 0.1, center: paths[0], radius: areas.bufferZone, map: map, - // clickable: true clickable: clickSet + // clickable: true }); - // Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); }) { - // isDisabled - // isYour || isDone isDisabled || isDone ? {} : (Eve.mousedownEve = naver.maps.Event.addListener(