pav
/
pav-fe-kac
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

지도 유형 이슈 수정

master
김장현 2 months ago
parent
5ce409dc4c
commit
0f6fcbc410
6 changed files with 219 additions and 159 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. 8
      src/components/map/mapbox/MapBoxMap.js
  2. 334
      src/containers/flight/NewFlightApprovalsContainer.js
  3. 11
      src/redux/features/control/map/mapSlice.ts
  4. 1
      src/redux/features/control/map/mapState.ts
  5. 16
      src/utility/hooks/useMapType.ts
  6. 8
      src/views/control/setting/ControlSetting.js

8
src/components/map/mapbox/MapBoxMap.js
Unescape View File

@ -100,8 +100,10 @@ export default function MapBoxMap() {
// 지도 초기 셋팅
useLayoutEffect(() => {
mapBoxMapInit();
}, []);
if (mapState.mapType === 'TERRAIN' || mapState.mapType === 'SATELLITE') {
mapBoxMapInit();
}
}, [mapState.mapType]);
// 공역 표출 정보에 따른 공역 변경
useEffect(() => {
@ -299,7 +301,7 @@ export default function MapBoxMap() {
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v12', // style URL
style: mapState.mapStyleUrl, // style URL
center: [127.85101412107547, 37.520357], // starting position [lng, lat]
zoom: 8.5, // starting zoom
antialias: true,

334
src/containers/flight/NewFlightApprovalsContainer.js
Unescape View File

@ -23,8 +23,17 @@ import { setLogout } from '@src/redux/features/account/auth/authThunk';
import logo from '../../assets/images/logo/kac_logo_ icon.svg';
import { AiOutlinePoweroff } from 'react-icons/ai';
import WebsocketClient from '../../components/websocket/WebsocketClient';
import { Card, ButtonGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter, Table } from '@component/ui';
import { FiUsers, FiFileText } from "react-icons/fi";
import {
Card,
ButtonGroup,
Button,
Modal,
ModalHeader,
ModalBody,
ModalFooter,
Table
} from '@component/ui';
import { FiUsers, FiFileText } from 'react-icons/fi';
export default function NewFlightApprovalsContainer({ mode }) {
const dispatch = useDispatch();
@ -37,7 +46,7 @@ export default function NewFlightApprovalsContainer({ mode }) {
const [filter, setFilter] = useState('');
// 지도
const [mapObject, setMapObject] = useState();
const [mapType, setMapType] = useMapType();
const [setMapType] = useMapType();
const { areaCoordList, isOpenModal } = useSelector(state => state.laancState);
const [startDate, setStartDate] = useState(dayjs().format('YYYY-MM-DD'));
@ -54,7 +63,7 @@ export default function NewFlightApprovalsContainer({ mode }) {
// 미니맵 레이어
const [previewLayer, setPreviewLayer] = useState();
const map = useSelector(state => state.mapState.map);
const { map, mapType } = useSelector(state => state.mapState);
// popup
const [isPopup, setIsPopup] = useState(false);
@ -340,7 +349,7 @@ export default function NewFlightApprovalsContainer({ mode }) {
return (
<>
<div className='map' style={{ width: '100%' }}>
<div className='test_modal'>
<div className='test_modal'>
<Button
color='primary'
size='lg'
@ -360,161 +369,192 @@ export default function NewFlightApprovalsContainer({ mode }) {
</ModalHeader>
<ModalBody className='onestop-validation'>
<div className='pal-table-warp'>
<h5 className='table-ti'><FiFileText />기체 정보</h5>
<h5 className='table-ti'>
<FiFileText />
기체 정보
</h5>
<div className='pal-table'>
<Table responsive>
<thead>
<tr>
<th width='80'>No</th>
<th width='120'>유효성 검사</th>
<th>제작 번호</th>
<th>기체 용도</th>
<th>기체 중량</th>
<th>보험 가입</th>
</tr>
</thead>
<tbody>
<tr>
<td width='80'>1</td>
<td width='120' className='success'>성공</td>
<td>163CGBEROA529Y</td>
<td>영리</td>
<td>25kg이하</td>
<td className='success'>가입</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>실패</td>
<td>163CGBEROA529Y</td>
<td>영리</td>
<td>25kg이하</td>
<td className='fail'>미 가입</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>실패</td>
<td>163CGBEROA529Y</td>
<td>영리</td>
<td>25kg이하</td>
<td className='fail'>미 가입</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>실패</td>
<td>163CGBEROA529Y</td>
<td>영리</td>
<td>25kg이하</td>
<td className='fail'>미 가입</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>실패</td>
<td>163CGBEROA529Y</td>
<td>영리</td>
<td>25kg이하</td>
<td className='fail'>미 가입</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>실패</td>
<td>163CGBEROA529Y</td>
<td>영리</td>
<td>25kg이하</td>
<td className='fail'>미 가입</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>실패</td>
<td>163CGBEROA529Y</td>
<td>영리</td>
<td>25kg이하</td>
<td className='fail'>미 가입</td>
</tr>
</tbody>
<thead>
<tr>
<th width='80'>No</th>
<th width='120'>유효성 검사</th>
<th>제작 번호</th>
<th>기체 용도</th>
<th>기체 중량</th>
<th>보험 가입</th>
</tr>
</thead>
<tbody>
<tr>
<td width='80'>1</td>
<td width='120' className='success'>
성공
</td>
<td>163CGBEROA529Y</td>
<td>영리</td>
<td>25kg이하</td>
<td className='success'>가입</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>
실패
</td>
<td>163CGBEROA529Y</td>
<td>영리</td>
<td>25kg이하</td>
<td className='fail'>미 가입</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>
실패
</td>
<td>163CGBEROA529Y</td>
<td>영리</td>
<td>25kg이하</td>
<td className='fail'>미 가입</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>
실패
</td>
<td>163CGBEROA529Y</td>
<td>영리</td>
<td>25kg이하</td>
<td className='fail'>미 가입</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>
실패
</td>
<td>163CGBEROA529Y</td>
<td>영리</td>
<td>25kg이하</td>
<td className='fail'>미 가입</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>
실패
</td>
<td>163CGBEROA529Y</td>
<td>영리</td>
<td>25kg이하</td>
<td className='fail'>미 가입</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>
실패
</td>
<td>163CGBEROA529Y</td>
<td>영리</td>
<td>25kg이하</td>
<td className='fail'>미 가입</td>
</tr>
</tbody>
</Table>
</div>
</div>
<div className='pal-table-warp'>
<h5 className='table-ti'><FiUsers/>조종자 정보</h5>
<h5 className='table-ti'>
<FiUsers />
조종자 정보
</h5>
<div className='pal-table'>
<Table>
<thead>
<tr>
<th width='80'>No</th>
<th width='120'>유효성 검사</th>
<th>이름</th>
<th>생년 월일</th>
<th>자격 번호</th>
<th>조종 자격</th>
</tr>
</thead>
<tbody>
<tr>
<td width='80'>1</td>
<td width='120' className='success'>성공</td>
<td>홍*동</td>
<td>1995****</td>
<td>91-****12</td>
<td className='success'>여</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>실패</td>
<td>김*혜</td>
<td>1995****</td>
<td>91-****12</td>
<td className='fail'>부</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>실패</td>
<td>김*혜</td>
<td>1995****</td>
<td>91-****12</td>
<td className='fail'>부</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>실패</td>
<td>김*혜</td>
<td>1995****</td>
<td>91-****12</td>
<td className='fail'>부</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>실패</td>
<td>김*혜</td>
<td>1995****</td>
<td>91-****12</td>
<td className='fail'>부</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>실패</td>
<td>김*혜</td>
<td>1995****</td>
<td>91-****12</td>
<td className='fail'>부</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>실패</td>
<td>김*혜</td>
<td>1995****</td>
<td>91-****12</td>
<td className='fail'>부</td>
</tr>
</tbody>
<thead>
<tr>
<th width='80'>No</th>
<th width='120'>유효성 검사</th>
<th>이름</th>
<th>생년 월일</th>
<th>자격 번호</th>
<th>조종 자격</th>
</tr>
</thead>
<tbody>
<tr>
<td width='80'>1</td>
<td width='120' className='success'>
성공
</td>
<td>홍*동</td>
<td>1995****</td>
<td>91-****12</td>
<td className='success'>여</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>
실패
</td>
<td>김*혜</td>
<td>1995****</td>
<td>91-****12</td>
<td className='fail'>부</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>
실패
</td>
<td>김*혜</td>
<td>1995****</td>
<td>91-****12</td>
<td className='fail'>부</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>
실패
</td>
<td>김*혜</td>
<td>1995****</td>
<td>91-****12</td>
<td className='fail'>부</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>
실패
</td>
<td>김*혜</td>
<td>1995****</td>
<td>91-****12</td>
<td className='fail'>부</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>
실패
</td>
<td>김*혜</td>
<td>1995****</td>
<td>91-****12</td>
<td className='fail'>부</td>
</tr>
<tr>
<td width='80'>2</td>
<td width='120' className='fail'>
실패
</td>
<td>김*혜</td>
<td>1995****</td>
<td>91-****12</td>
<td className='fail'>부</td>
</tr>
</tbody>
</Table>
</div>
</div>
</ModalBody>
<ModalFooter>
<Button
color='primary'
onClick={() => setTestModal(!testModal)}
>
<Button color='primary' onClick={() => setTestModal(!testModal)}>
확인
</Button>{' '}
</ModalFooter>

11
src/redux/features/control/map/mapSlice.ts
Unescape View File

@ -4,6 +4,7 @@ import { IMapState } from './mapState';
const initMap: IMapState = {
map: undefined,
mapType: 'TERRAIN',
mapStyleUrl: 'mapbox://styles/mapbox/streets-v12',
objectId: '',
isClickObject: false,
area0001: true,
@ -26,6 +27,16 @@ const mapSlice = createSlice({
},
clientMapTypeChange: (state, action) => {
const value = action.payload;
let styleUrl = '';
if (value === 'TERRAIN' || value === 'SATELLITE') {
if (value === 'TERRAIN') {
styleUrl = 'mapbox://styles/mapbox/streets-v12';
} else {
styleUrl = 'mapbox://styles/mapbox/satellite-streets-v12';
}
state.mapStyleUrl = styleUrl;
}
state.mapType = value;
},
clientObjectClick: (state, action) => {

1
src/redux/features/control/map/mapState.ts
Unescape View File

@ -1,6 +1,7 @@
export interface IMapState {
map: any;
mapType: string;
mapStyleUrl: string;
objectId: string;
isClickObject: boolean;
area0001: boolean;

16
src/utility/hooks/useMapType.ts
Unescape View File

@ -24,17 +24,23 @@ const useMapType = () => {
mapState.map.setMaxPitch(85);
mapState.map.dragRotate.enable();
} else if (type === '2D') {
mapState.map.setMaxPitch(0);
mapState.map.setBearing(0);
mapState.map.dragRotate.disable();
// mapState.map.setMaxPitch(0);
// mapState.map.setBearing(0);
// mapState.map.dragRotate.disable();
} else if (type === 'SATELLITE') {
mapState.map.setStyle('mapbox://styles/mapbox/satellite-streets-v12');
mapState.map.setTerrain({
source: 'mapbox-dem',
exaggeration: 1
});
mapState.map.setMaxPitch(85);
mapState.map.dragRotate.enable();
}
dispatch(clientMapTypeChange(type));
setMapType(type);
// setMapType(type);
};
return [mapType, handlerMapType];
return [handlerMapType];
};
export default useMapType;

8
src/views/control/setting/ControlSetting.js
Unescape View File

@ -18,7 +18,7 @@ import flatGimpo from '../../../components/map/geojson/flatGimpoAirportAirArea.j
import { clientDispatchTopMenu } from '@src/redux/features/layout/layoutSlice';
const ControlSetting = props => {
const [mapType, setMapType] = useMapType();
const [setMapType] = useMapType();
const dispatch = useDispatch();
const history = useHistory();
@ -140,19 +140,19 @@ const ControlSetting = props => {
<div className='map-btn'>
<ButtonGroup>
<Button
color={mapType === 'TERRAIN' ? 'primary' : ''}
color={mapState.mapType === 'TERRAIN' ? 'primary' : ''}
onClick={e => setMapType('TERRAIN')}
>
지형지도
</Button>
<Button
color={mapType === 'NORMAL' ? 'primary' : ''}
color={mapState.mapType === 'NORMAL' ? 'primary' : ''}
onClick={e => setMapType('NORMAL')}
>
일반지도
</Button>
<Button
color={mapType === '2D' ? 'primary' : ''}
color={mapState.mapType === '2D' ? 'primary' : ''}
onClick={e => setMapType('2D')}
>
2D

Write Preview
Loading…
Cancel
Save