pav
/
pav-home
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

비행 구역 설정 수정

feature/auth
김장현 2 years ago
parent
47a7560050
commit
a8a74f7ad6
1 changed files with 233 additions and 221 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 454
      src/components/basis/flight/plan/FlightPlanAreaMap.js

454
src/components/basis/flight/plan/FlightPlanAreaMap.js
Unescape View File

@ -1,232 +1,244 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { import { Card, CardBody, Button, Input } from 'reactstrap';
Card,
CardBody,
Button,
Input
} from 'reactstrap';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone'; 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 { FlightPlanDraw } from '../../../map/naver/draw/FlightPlanDraw';
import { initFlightBas } from '../../../../modules/basis/flight/models/basisFlightModel'; import { initFlightBas } from '../../../../modules/basis/flight/models/basisFlightModel';
import { AREA_COORDINATE_LIST_SAVE } from '../../../../modules/basis/flight/actions/basisFlightAction'; import { AREA_COORDINATE_LIST_SAVE } from '../../../../modules/basis/flight/actions/basisFlightAction';
const FlightPlanAreaMap = (props) => { const FlightPlanAreaMap = props => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const naver = window.naver; const naver = window.naver;
const airArea = props.airArea; const airArea = props.airArea;
const mapControl = useSelector(state => state.controlMapReducer); const mapControl = useSelector(state => state.controlMapReducer);
const { areaCoordList } = useSelector(state => state.flightState); const { areaCoordList } = useSelector(state => state.flightState);
const [map, setMap] = useState(); const [map, setMap] = useState();
const [isMapLoad, setIsMapLoad] = useState(false); const [isMapLoad, setIsMapLoad] = useState(false);
const [mode, setMode] = useState(); const [mode, setMode] = useState();
const [mapAreaCoordList, setMapAreaCoordList] = useState(initFlightBas.initDetail.areaList); const [mapAreaCoordList, setMapAreaCoordList] = useState(
initFlightBas.initDetail.areaList
const [searchData, setSearchData] = useState(); );
useEffect(() => { const [searchData, setSearchData] = useState();
NaverMapInit();
},[]); useEffect(() => {
NaverMapInit();
useEffect(() => { }, []);
setIsMapLoad(true);
}, [airArea]); useEffect(() => {
setIsMapLoad(true);
}, [airArea]);
useEffect(() => {
ModeInit(); useEffect(() => {
}, [mapControl.drawType]); ModeInit();
}, [mapControl.drawType]);
useEffect(() => {
if(areaCoordList) { useEffect(() => {
if(areaCoordList[0].coordList[0].lat !== 0 && areaCoordList[0].coordList[0].lon !== 0){ if (areaCoordList) {
if(map) { if (
map.setCenter(new naver.maps.LatLng(areaCoordList[0].coordList[0].lat, areaCoordList[0].coordList[0].lon)) areaCoordList[0].coordList[0].lat !== 0 &&
setMapAreaCoordList(areaCoordList) areaCoordList[0].coordList[0].lon !== 0
} ) {
} if (map) {
} map.setCenter(
new naver.maps.LatLng(
}, [areaCoordList]); areaCoordList[0].coordList[0].lat,
areaCoordList[0].coordList[0].lon
)
const ModeInit = () => { );
setMode(mapControl.drawType) setMapAreaCoordList(areaCoordList);
} }
}
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);
} }
}, [areaCoordList, map]);
const handleSearch = () => {
console.log(searchData, 'encoding') 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 = {
const handleChange = e => { // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
const {name, value} = e.target; center: new naver.maps.LatLng(37.520357, 126.610166),
zoom: !areaCoordList ? 13 : bufferzoom.bufferzoom,
if(name=='searchInput') { zoomControl: true,
setSearchData(encodeURI(value)); 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'> return (
<CardBody> <Card className='mb-0'>
<div className='search-cont search-info pd-0'> <CardBody>
<div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'> <div className='search-cont search-info pd-0'>
<div> <div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
<h4>지도 영역</h4> <div>
</div> <h4>지도 영역</h4>
</div> </div>
</div> </div>
</div>
<div style={{ position: 'relative' }}>
<div id="map" style={{ width: '100%', height: '60vh' }}> <div style={{ position: 'relative' }}>
{isMapLoad ? <FlightPlanDraw <div id='map' style={{ width: '100%', height: '60vh' }}>
map={map} {isMapLoad ? (
naver={naver} <FlightPlanDraw
mode={mode} map={map}
areaCoordList={mapAreaCoordList} naver={naver}
// areaCoordList={areaCoordList} mode={mode}
handleCoordinates={handleCoordinates} areaCoordList={mapAreaCoordList}
handleInitCoordinates={handleInitCoordinates} // areaCoordList={areaCoordList}
handleConfirm={props.handleConfirm} handleCoordinates={handleCoordinates}
/> : null} handleInitCoordinates={handleInitCoordinates}
handleConfirm={props.handleConfirm}
<Button.Ripple />
color='primary' ) : null}
className='area-button'
onClick={e => handlerDrawType('RESET')} <Button.Ripple
// {...props.test? ( color='primary'
// {} className='area-button'
// ):( onClick={e => handlerDrawType('RESET')}
// {disabled:false} // {...props.test? (
// )} // {}
disabled={props.test} // ):(
> // {disabled:false}
초기화 // )}
</Button.Ripple> disabled={props.test}
<Input >
type='text' 초기화
id='searchInput' </Button.Ripple>
name='searchInput' <Input
className='area-input' type='text'
placeholder='검색명을 입력하세요.' id='searchInput'
onChange={handleChange} name='searchInput'
// bsSize='sm' className='area-input'
/> placeholder='검색명을 입력하세요.'
<Button.Ripple onChange={handleChange}
// className='mr-1' // bsSize='sm'
className='area-button' />
color='primary' <Button.Ripple
onClick={handleSearch} // className='mr-1'
// size='sm' className='area-button'
> color='primary'
검색 onClick={handleSearch}
</Button.Ripple> // size='sm'
</div> >
</div> 검색
</Button.Ripple>
</div>
{isMapLoad ? ( </div>
<FeatureAirZone map={map} naver={naver} features={airArea.features} />
) : null} {isMapLoad ? (
<FeatureAirZone map={map} naver={naver} features={airArea.features} />
<div className='d-flex align-items-center mt-2'> ) : null}
<Button.Ripple
className='mr-1' <div className='d-flex align-items-center mt-2'>
color='primary' <Button.Ripple
onClick={e => handlerDrawType('LINE')} className='mr-1'
disabled={props.test} color='primary'
> onClick={e => handlerDrawType('LINE')}
WayPoint disabled={props.test}
</Button.Ripple> >
<Button.Ripple WayPoint
className='mr-1' </Button.Ripple>
color='primary' <Button.Ripple
onClick={e => handlerDrawType('CIRCLE')} className='mr-1'
disabled={props.test} color='primary'
> onClick={e => handlerDrawType('CIRCLE')}
Circle disabled={props.test}
</Button.Ripple> >
<Button.Ripple Circle
color='primary' </Button.Ripple>
onClick={e => handlerDrawType('POLYGON')} <Button.Ripple
disabled={props.test} color='primary'
> onClick={e => handlerDrawType('POLYGON')}
Polygon disabled={props.test}
</Button.Ripple> >
</div> Polygon
</CardBody> </Button.Ripple>
</Card> </div>
) </CardBody>
} </Card>
);
export default FlightPlanAreaMap; };
export default FlightPlanAreaMap;

Write Preview
Loading…
Cancel
Save