김장현
2 years ago
1 changed files with 233 additions and 221 deletions
@ -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 ( |
||||
<Card className='mb-0'> |
||||
<CardBody> |
||||
<div className='search-cont search-info pd-0'> |
||||
<div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'> |
||||
<div> |
||||
<h4>지도 영역</h4> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div style={{ position: 'relative' }}> |
||||
<div id="map" style={{ width: '100%', height: '60vh' }}> |
||||
{isMapLoad ? <FlightPlanDraw |
||||
map={map}
|
||||
naver={naver} |
||||
mode={mode} |
||||
areaCoordList={mapAreaCoordList} |
||||
// areaCoordList={areaCoordList}
|
||||
handleCoordinates={handleCoordinates} |
||||
handleInitCoordinates={handleInitCoordinates} |
||||
handleConfirm={props.handleConfirm} |
||||
/> : null} |
||||
|
||||
<Button.Ripple |
||||
color='primary' |
||||
className='area-button' |
||||
onClick={e => handlerDrawType('RESET')} |
||||
// {...props.test? (
|
||||
// {}
|
||||
// ):(
|
||||
// {disabled:false}
|
||||
// )}
|
||||
disabled={props.test} |
||||
> |
||||
초기화 |
||||
</Button.Ripple> |
||||
<Input |
||||
type='text' |
||||
id='searchInput' |
||||
name='searchInput' |
||||
className='area-input' |
||||
placeholder='검색명을 입력하세요.' |
||||
onChange={handleChange} |
||||
// bsSize='sm'
|
||||
/> |
||||
<Button.Ripple |
||||
// className='mr-1'
|
||||
className='area-button' |
||||
color='primary' |
||||
onClick={handleSearch} |
||||
// size='sm'
|
||||
> |
||||
검색 |
||||
</Button.Ripple> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
{isMapLoad ? ( |
||||
<FeatureAirZone map={map} naver={naver} features={airArea.features} /> |
||||
) : null} |
||||
|
||||
<div className='d-flex align-items-center mt-2'> |
||||
<Button.Ripple |
||||
className='mr-1' |
||||
color='primary' |
||||
onClick={e => handlerDrawType('LINE')} |
||||
disabled={props.test} |
||||
> |
||||
WayPoint |
||||
</Button.Ripple> |
||||
<Button.Ripple |
||||
className='mr-1' |
||||
color='primary' |
||||
onClick={e => handlerDrawType('CIRCLE')} |
||||
disabled={props.test} |
||||
> |
||||
Circle |
||||
</Button.Ripple> |
||||
<Button.Ripple |
||||
color='primary' |
||||
onClick={e => handlerDrawType('POLYGON')} |
||||
disabled={props.test} |
||||
> |
||||
Polygon |
||||
</Button.Ripple> |
||||
</div> |
||||
</CardBody> |
||||
</Card> |
||||
) |
||||
} |
||||
}; |
||||
|
||||
return ( |
||||
<Card className='mb-0'> |
||||
<CardBody> |
||||
<div className='search-cont search-info pd-0'> |
||||
<div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'> |
||||
<div> |
||||
<h4>지도 영역</h4> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div style={{ position: 'relative' }}> |
||||
<div id='map' style={{ width: '100%', height: '60vh' }}> |
||||
{isMapLoad ? ( |
||||
<FlightPlanDraw |
||||
map={map} |
||||
naver={naver} |
||||
mode={mode} |
||||
areaCoordList={mapAreaCoordList} |
||||
// areaCoordList={areaCoordList}
|
||||
handleCoordinates={handleCoordinates} |
||||
handleInitCoordinates={handleInitCoordinates} |
||||
handleConfirm={props.handleConfirm} |
||||
/> |
||||
) : null} |
||||
|
||||
<Button.Ripple |
||||
color='primary' |
||||
className='area-button' |
||||
onClick={e => handlerDrawType('RESET')} |
||||
// {...props.test? (
|
||||
// {}
|
||||
// ):(
|
||||
// {disabled:false}
|
||||
// )}
|
||||
disabled={props.test} |
||||
> |
||||
초기화 |
||||
</Button.Ripple> |
||||
<Input |
||||
type='text' |
||||
id='searchInput' |
||||
name='searchInput' |
||||
className='area-input' |
||||
placeholder='검색명을 입력하세요.' |
||||
onChange={handleChange} |
||||
// bsSize='sm'
|
||||
/> |
||||
<Button.Ripple |
||||
// className='mr-1'
|
||||
className='area-button' |
||||
color='primary' |
||||
onClick={handleSearch} |
||||
// size='sm'
|
||||
> |
||||
검색 |
||||
</Button.Ripple> |
||||
</div> |
||||
</div> |
||||
|
||||
{isMapLoad ? ( |
||||
<FeatureAirZone map={map} naver={naver} features={airArea.features} /> |
||||
) : null} |
||||
|
||||
<div className='d-flex align-items-center mt-2'> |
||||
<Button.Ripple |
||||
className='mr-1' |
||||
color='primary' |
||||
onClick={e => handlerDrawType('LINE')} |
||||
disabled={props.test} |
||||
> |
||||
WayPoint |
||||
</Button.Ripple> |
||||
<Button.Ripple |
||||
className='mr-1' |
||||
color='primary' |
||||
onClick={e => handlerDrawType('CIRCLE')} |
||||
disabled={props.test} |
||||
> |
||||
Circle |
||||
</Button.Ripple> |
||||
<Button.Ripple |
||||
color='primary' |
||||
onClick={e => handlerDrawType('POLYGON')} |
||||
disabled={props.test} |
||||
> |
||||
Polygon |
||||
</Button.Ripple> |
||||
</div> |
||||
</CardBody> |
||||
</Card> |
||||
); |
||||
}; |
||||
|
||||
export default FlightPlanAreaMap; |
Loading…
Reference in new issue