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
Split 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 {
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>
)
}
export default FlightPlanAreaMap;
};
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;

Write Preview
Loading…
Cancel
Save