From a8a74f7ad6f30f052723c1721eb3300dbc5e73ca Mon Sep 17 00:00:00 2001 From: kimjh2369 Date: Fri, 16 Sep 2022 15:14:08 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EA=B5=AC=EC=97=AD=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basis/flight/plan/FlightPlanAreaMap.js | 454 +++++++++--------- 1 file changed, 233 insertions(+), 221 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js index 8f95e8b..1bc19de 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaMap.js +++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js @@ -1,232 +1,244 @@ import React, { useEffect, useState } from 'react'; -import { - Card, - CardBody, - Button, - Input -} from 'reactstrap'; +import { Card, CardBody, Button, Input } from 'reactstrap'; import { useDispatch, useSelector } from 'react-redux'; import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone'; -import { drawTypeChangeAction, drawCheckAction } from '../../../../modules/control/map/actions/controlMapActions'; +import { + drawTypeChangeAction, + drawCheckAction +} from '../../../../modules/control/map/actions/controlMapActions'; import { FlightPlanDraw } from '../../../map/naver/draw/FlightPlanDraw'; import { initFlightBas } from '../../../../modules/basis/flight/models/basisFlightModel'; import { AREA_COORDINATE_LIST_SAVE } from '../../../../modules/basis/flight/actions/basisFlightAction'; -const FlightPlanAreaMap = (props) => { - const dispatch = useDispatch(); - const naver = window.naver; - 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 [mapAreaCoordList, setMapAreaCoordList] = useState(initFlightBas.initDetail.areaList); - - const [searchData, setSearchData] = useState(); - - useEffect(() => { - NaverMapInit(); - },[]); - - useEffect(() => { - setIsMapLoad(true); - }, [airArea]); - - - useEffect(() => { - ModeInit(); - }, [mapControl.drawType]); - - useEffect(() => { - if(areaCoordList) { - if(areaCoordList[0].coordList[0].lat !== 0 && areaCoordList[0].coordList[0].lon !== 0){ - if(map) { - map.setCenter(new naver.maps.LatLng(areaCoordList[0].coordList[0].lat, areaCoordList[0].coordList[0].lon)) - setMapAreaCoordList(areaCoordList) - } - } - } - - }, [areaCoordList]); - - - const ModeInit = () => { - setMode(mapControl.drawType) - } - - const NaverMapInit = () => { - const bufferzoom ={}; - if(areaCoordList){ - if(areaCoordList[0].bufferZone>=0 && areaCoordList[0].bufferZone <2000){ - bufferzoom.bufferzoom =13; - } - else if(areaCoordList[0].bufferZone>=2000 && areaCoordList[0].bufferZone <5000){ - bufferzoom.bufferzoom =12; - } - else if(areaCoordList[0].bufferZone>=5000 && areaCoordList[0].bufferZone <=9000){ - bufferzoom.bufferzoom =11; - } - else{ - bufferzoom.bufferzoom =10; - } - } - const mapOptions = { - // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547), - center: new naver.maps.LatLng(37.520357, 126.610166), - zoom: !areaCoordList ? 13 : bufferzoom.bufferzoom, - zoomControl: true, - mapTypeId: naver.maps.MapTypeId.NORMAL, - zoomControlOptions: { - position: naver.maps.Position.LEFT_CENTER, - style: naver.maps.ZoomControlStyle.SMALL - } - }; - setMap(new naver.maps.Map('map', mapOptions)); - } - - const handlerDrawType = val => { - dispatch(drawTypeChangeAction(val)); - }; - - const handleInitCoordinates = () => { - const init = initFlightBas.initDetail.areaList.concat(); - dispatch(AREA_COORDINATE_LIST_SAVE(init)) - } - - const handleCoordinates = (areaInfo) => { - const initAreaList = initFlightBas.initDetail.areaList.concat() - const coordList = []; - - // radius = 10; - areaInfo.coordinates.forEach((c, i) => { - const coord = Object.assign({}, initFlightBas['coord']); - 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 { - ...area, - bufferZone: areaInfo.bufferZone, - areaType: areaInfo.areaType, - coordList : coordList - } - }) - - // dispatch(AREA_COORDINATE_LIST_SAVE(areaList)) - setMapAreaCoordList(areaList); +const FlightPlanAreaMap = props => { + const dispatch = useDispatch(); + const naver = window.naver; + 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 [mapAreaCoordList, setMapAreaCoordList] = useState( + initFlightBas.initDetail.areaList + ); + + const [searchData, setSearchData] = useState(); + + useEffect(() => { + NaverMapInit(); + }, []); + + useEffect(() => { + setIsMapLoad(true); + }, [airArea]); + + useEffect(() => { + ModeInit(); + }, [mapControl.drawType]); + + useEffect(() => { + if (areaCoordList) { + if ( + areaCoordList[0].coordList[0].lat !== 0 && + areaCoordList[0].coordList[0].lon !== 0 + ) { + if (map) { + map.setCenter( + new naver.maps.LatLng( + areaCoordList[0].coordList[0].lat, + areaCoordList[0].coordList[0].lon + ) + ); + setMapAreaCoordList(areaCoordList); + } + } } - - const handleSearch = () => { - console.log(searchData, 'encoding') + }, [areaCoordList, map]); + + const ModeInit = () => { + setMode(mapControl.drawType); + }; + + const NaverMapInit = () => { + const bufferzoom = {}; + if (areaCoordList) { + if ( + areaCoordList[0].bufferZone >= 0 && + areaCoordList[0].bufferZone < 2000 + ) { + bufferzoom.bufferzoom = 13; + } else if ( + areaCoordList[0].bufferZone >= 2000 && + areaCoordList[0].bufferZone < 5000 + ) { + bufferzoom.bufferzoom = 12; + } else if ( + areaCoordList[0].bufferZone >= 5000 && + areaCoordList[0].bufferZone <= 9000 + ) { + bufferzoom.bufferzoom = 11; + } else { + bufferzoom.bufferzoom = 10; + } } - - const handleChange = e => { - const {name, value} = e.target; - - if(name=='searchInput') { - setSearchData(encodeURI(value)); + const mapOptions = { + // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547), + center: new naver.maps.LatLng(37.520357, 126.610166), + zoom: !areaCoordList ? 13 : bufferzoom.bufferzoom, + zoomControl: true, + mapTypeId: naver.maps.MapTypeId.NORMAL, + zoomControlOptions: { + position: naver.maps.Position.LEFT_CENTER, + style: naver.maps.ZoomControlStyle.SMALL } + }; + setMap(new naver.maps.Map('map', mapOptions)); + }; + + const handlerDrawType = val => { + dispatch(drawTypeChangeAction(val)); + }; + + const handleInitCoordinates = () => { + const init = initFlightBas.initDetail.areaList.concat(); + dispatch(AREA_COORDINATE_LIST_SAVE(init)); + }; + + const handleCoordinates = areaInfo => { + const initAreaList = initFlightBas.initDetail.areaList.concat(); + const coordList = []; + + // radius = 10; + areaInfo.coordinates.forEach((c, i) => { + const coord = Object.assign({}, initFlightBas['coord']); + 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 { + ...area, + bufferZone: areaInfo.bufferZone, + areaType: areaInfo.areaType, + coordList: coordList + }; + }); + + // dispatch(AREA_COORDINATE_LIST_SAVE(areaList)) + setMapAreaCoordList(areaList); + }; + + const handleSearch = () => { + // console.log(searchData, 'encoding'); + }; + + const handleChange = e => { + const { name, value } = e.target; + + if (name == 'searchInput') { + setSearchData(encodeURI(value)); } - - return ( - - -
-
-
-

지도 영역

-
-
-
- -
-
- {isMapLoad ? : null} - - handlerDrawType('RESET')} - // {...props.test? ( - // {} - // ):( - // {disabled:false} - // )} - disabled={props.test} - > - 초기화 - - - - 검색 - -
-
- - - {isMapLoad ? ( - - ) : null} - -
- handlerDrawType('LINE')} - disabled={props.test} - > - WayPoint - - handlerDrawType('CIRCLE')} - disabled={props.test} - > - Circle - - handlerDrawType('POLYGON')} - disabled={props.test} - > - Polygon - -
- - - ) -} - -export default FlightPlanAreaMap; \ No newline at end of file + }; + + return ( + + +
+
+
+

지도 영역

+
+
+
+ +
+
+ {isMapLoad ? ( + + ) : null} + + handlerDrawType('RESET')} + // {...props.test? ( + // {} + // ):( + // {disabled:false} + // )} + disabled={props.test} + > + 초기화 + + + + 검색 + +
+
+ + {isMapLoad ? ( + + ) : null} + +
+ handlerDrawType('LINE')} + disabled={props.test} + > + WayPoint + + handlerDrawType('CIRCLE')} + disabled={props.test} + > + Circle + + handlerDrawType('POLYGON')} + disabled={props.test} + > + Polygon + +
+ + + ); +}; + +export default FlightPlanAreaMap;