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

laanc 비행구역 시스템얼럿, 추가버튼 모달 삭제 및 동일한 타입으로 그리기 가능

pull/2/head
junh_eee(이준희) 11 months ago
parent
2128f61e34
commit
f0114847d7
4 changed files with 98 additions and 58 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. 81
      src/components/map/mapbox/draw/LaancDrawControl.js
  2. 16
      src/utility/DrawUtil.js
  3. 38
      src/views/laanc/FlightArea.js
  4. 21
      src/views/laanc/LaancAreaMap.js

81
src/components/map/mapbox/draw/LaancDrawControl.js
Unescape View File

@ -6,6 +6,8 @@ import {
handlerGetCircleCoord, handlerGetCircleCoord,
handlerGetHtmlContent, handlerGetHtmlContent,
handlerGetMidPoint, handlerGetMidPoint,
handlerRemoveAllMarker,
handlerRemoveGroupMarker,
handlerReturnMode handlerReturnMode
} from '../../../../utility/DrawUtil'; } from '../../../../utility/DrawUtil';
import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions'; import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions';
@ -41,7 +43,8 @@ export const LaancDrawControl = props => {
const areaType = props.areaCoordList[0].areaType; const areaType = props.areaCoordList[0].areaType;
const drawType = mapControl.drawType; const drawType = mapControl.drawType;
if (areaType !== drawType) drawInit(); drawInit();
// if (areaType !== drawType) drawInit();
}, [mapControl.drawType]); }, [mapControl.drawType]);
useEffect(() => { useEffect(() => {
@ -260,6 +263,9 @@ export const LaancDrawControl = props => {
// 비정상 감지 시 해당 도형, 마커 삭제 // 비정상 감지 시 해당 도형, 마커 삭제
const handlerRemoveError = id => { const handlerRemoveError = id => {
dispatch(drawTypeChangeAction('DONE'));
// props.handlerAddChange('isAddable', false);
props.handlerAddChange('overAdd', false);
drawObj.delete(id); drawObj.delete(id);
handlerRemoveGroupMarker(id); handlerRemoveGroupMarker(id);
props.handlerSaveCheck(false); props.handlerSaveCheck(false);
@ -357,6 +363,7 @@ export const LaancDrawControl = props => {
paths.push(paths[0]); paths.push(paths[0]);
} }
} }
dispatch(drawTypeChangeAction('DONE'));
} }
}); });
} }
@ -389,21 +396,21 @@ export const LaancDrawControl = props => {
} }
}; };
// 지도에 있는 모든 마커 삭제 // // 지도에 있는 모든 마커 삭제
const handlerRemoveAllMarker = () => { // const handlerRemoveAllMarker = () => {
const ele = document.getElementsByClassName('mapboxgl-popup'); // const ele = document.getElementsByClassName('mapboxgl-popup');
const eleArr = Array.from(ele); // const eleArr = Array.from(ele);
eleArr?.forEach(marker => marker.remove()); // eleArr?.forEach(marker => marker.remove());
}; // };
// 해당되는 id의 마커 삭제 // // 해당되는 id의 마커 삭제
const handlerRemoveGroupMarker = id => { // const handlerRemoveGroupMarker = id => {
const ele = document.getElementsByClassName('mapboxgl-popup'); // const ele = document.getElementsByClassName('mapboxgl-popup');
const eleArr = Array.from(ele); // const eleArr = Array.from(ele);
eleArr?.forEach(marker => { // eleArr?.forEach(marker => {
if (marker.innerHTML.includes(id)) marker.remove(); // if (marker.innerHTML.includes(id)) marker.remove();
}); // });
}; // };
// 개별 마커 생성 // 개별 마커 생성
const handlerCreateOneMarker = (anchor, lngLat, text, id) => { const handlerCreateOneMarker = (anchor, lngLat, text, id) => {
@ -439,33 +446,31 @@ export const LaancDrawControl = props => {
}; };
const drawInit = () => { const drawInit = () => {
if (!props.addData.isAddable) { const mode = mapControl.drawType;
drawObj.deleteAll(); if (mode !== 'DONE') {
handlerRemoveAllMarker(); console.log(props.addData.isAddable, '-----');
if (!props.addData.isAddable) {
drawObj.deleteAll();
handlerRemoveAllMarker();
props.handlerSaveCheck(false); props.handlerSaveCheck(false);
setDrawObjId(); setDrawObjId();
props.handlerInitCoordinates(); props.handlerInitCoordinates();
} }
props.setCoordArr([]); props.setCoordArr([]);
const mode = mapControl.drawType; if (!mode || mode === 'RESET') {
if (!mode || mode === 'RESET') { props.handlerAddChange('isAddable', false);
props.handlerAddChange('isAddable', false); props.handlerAddChange('isViewAdd', false);
props.handlerAddChange('isViewAdd', false); props.handlerAddChange('overAdd', false);
props.handlerAddChange('overAdd', false); drawObj.deleteAll();
drawObj.deleteAll(); handlerRemoveAllMarker();
handlerRemoveAllMarker(); return;
return; }
}
const addData = props.addData; handlerStartMode(mode);
if (addData.isAddable && addData.isViewAdd && addData.overAdd) {
alert('구역은 최대 2개까지 설정 가능합니다.');
return;
} }
handlerStartMode(mode);
}; };
const handlerStartMode = mode => { const handlerStartMode = mode => {

16
src/utility/DrawUtil.js
Unescape View File

@ -118,6 +118,22 @@ export const handlerReturnMode = mode => {
if (mode.includes('circle') || mode.includes('Circle')) return 'CIRCLE'; if (mode.includes('circle') || mode.includes('Circle')) return 'CIRCLE';
}; };
// 지도에 있는 모든 마커 삭제
export const handlerRemoveAllMarker = () => {
const ele = document.getElementsByClassName('mapboxgl-popup');
const eleArr = Array.from(ele);
eleArr?.forEach(marker => marker.remove());
};
// 해당되는 id의 마커 삭제
export const handlerRemoveGroupMarker = id => {
const ele = document.getElementsByClassName('mapboxgl-popup');
const eleArr = Array.from(ele);
eleArr?.forEach(marker => {
if (marker.innerHTML.includes(id)) marker.remove();
});
};
// draw 레이어 // draw 레이어
export const layerWayPoint = source => { export const layerWayPoint = source => {
return { return {

38
src/views/laanc/FlightArea.js
Unescape View File

@ -14,7 +14,10 @@ import { MAPBOX_TOKEN } from '../../configs/constants';
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import { AREA_DETAIL_LIST_SAVE } from '../../modules/basis/flight/actions/basisFlightAction'; import {
AREA_COORDINATE_LIST_SAVE,
AREA_DETAIL_LIST_SAVE
} from '../../modules/basis/flight/actions/basisFlightAction';
import { import {
drawTypeChangeAction, drawTypeChangeAction,
mapInitAction mapInitAction
@ -25,6 +28,7 @@ import {
handlerCreatePoint, handlerCreatePoint,
handlerFitBounds, handlerFitBounds,
handlerGetCircleCoord, handlerGetCircleCoord,
handlerRemoveAllMarker,
layerBuffer, layerBuffer,
layerPolygon, layerPolygon,
layerPolyline, layerPolyline,
@ -38,6 +42,7 @@ import { ErrorModal } from '../../components/modal/ErrorModal';
import { FeatureAirZone } from '../../components/map/mapbox/feature/FeatureAirZone'; import { FeatureAirZone } from '../../components/map/mapbox/feature/FeatureAirZone';
import { WeatherContainer } from '../../containers/basis/flight/plan/WeatherContainer'; import { WeatherContainer } from '../../containers/basis/flight/plan/WeatherContainer';
import { InfoModal } from '../../components/modal/InfoModal'; import { InfoModal } from '../../components/modal/InfoModal';
import { initFlightBas } from '../../modules/laanc/models/laancModels';
const initialAddData = { const initialAddData = {
isAddable: false, isAddable: false,
@ -497,13 +502,13 @@ export default function FlightArea({
const handlerAddClick = () => { const handlerAddClick = () => {
if (!addData.isAddable) { if (!addData.isAddable) {
setAddModal(prev => ({ // setAddModal(prev => ({
...prev, // ...prev,
isOpen: true // isOpen: true
})); // }));
handlerAddChange('isAddable', true); handlerAddChange('isAddable', true);
} else { } else {
alert('구역은 최대 2개까지 설정 가능합니다.'); // alert('구역은 최대 2개까지 설정 가능합니다.');
} }
}; };
@ -520,6 +525,15 @@ export default function FlightArea({
})); }));
}; };
const handlerSaveCheck = save => {
setIsSaveable(save);
};
const handlerInitCoordinates = () => {
const init = initFlightBas.initDetail.areaList.concat();
dispatch(AREA_COORDINATE_LIST_SAVE(init));
};
return ( return (
<div className='vertically-centered-modal'> <div className='vertically-centered-modal'>
<div> <div>
@ -546,7 +560,8 @@ export default function FlightArea({
centeredModal={centeredModal} centeredModal={centeredModal}
mapContainer={mapContainer} mapContainer={mapContainer}
drawObj={drawObj} drawObj={drawObj}
setIsSaveable={setIsSaveable} handlerInitCoordinates={handlerInitCoordinates}
handlerSaveCheck={handlerSaveCheck}
handlerAddChange={handlerAddChange} handlerAddChange={handlerAddChange}
addData={addData} addData={addData}
/> />
@ -556,27 +571,29 @@ export default function FlightArea({
<div className='laanc-point'> <div className='laanc-point'>
<Button <Button
color='primary' color='primary'
disabled={mapControl.drawType === 'LINE' || addData.overAdd}
onClick={() => { onClick={() => {
handlerDrawType('LINE'); handlerDrawType('LINE');
// drawObj.changeMode('draw_line_string');
}} }}
> >
WayPoint WayPoint
</Button> </Button>
<Button <Button
color='primary' color='primary'
disabled={mapControl.drawType === 'CIRCLE' || addData.overAdd}
onClick={() => { onClick={() => {
handlerDrawType('CIRCLE'); handlerDrawType('CIRCLE');
// drawObj.changeMode('drag_circle');
}} }}
> >
Circle Circle
</Button> </Button>
<Button <Button
color='primary' color='primary'
disabled={
mapControl.drawType === 'POLYGON' || addData.overAdd
}
onClick={() => { onClick={() => {
handlerDrawType('POLYGON'); handlerDrawType('POLYGON');
// drawObj.changeMode('draw_polygon');
}} }}
> >
Polygon Polygon
@ -592,6 +609,7 @@ export default function FlightArea({
</Button> </Button>
{addData.isViewAdd ? ( {addData.isViewAdd ? (
<Button <Button
disabled={addData.overAdd}
color='primary' color='primary'
onClick={() => { onClick={() => {
handlerAddClick(); handlerAddClick();

21
src/views/laanc/LaancAreaMap.js
Unescape View File

@ -37,9 +37,10 @@ export default function LaancAreaMap({
centeredModal, centeredModal,
mapContainer, mapContainer,
drawObj, drawObj,
setIsSaveable, handlerSaveCheck,
handlerAddChange, handlerAddChange,
addData addData,
handlerInitCoordinates
}) { }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const mapControl = useSelector(state => state.controlMapReducer); const mapControl = useSelector(state => state.controlMapReducer);
@ -256,10 +257,10 @@ export default function LaancAreaMap({
dispatch(mapInitAction(map)); dispatch(mapInitAction(map));
}; };
const handlerInitCoordinates = () => { // const handlerInitCoordinates = () => {
const init = initFlightBas.initDetail.areaList.concat(); // const init = initFlightBas.initDetail.areaList.concat();
dispatch(AREA_COORDINATE_LIST_SAVE(init)); // dispatch(AREA_COORDINATE_LIST_SAVE(init));
}; // };
const handlerCoordinates = areaInfo => { const handlerCoordinates = areaInfo => {
const initAreaList = initFlightBas.initDetail.areaList.concat(); const initAreaList = initFlightBas.initDetail.areaList.concat();
@ -305,9 +306,9 @@ export default function LaancAreaMap({
setModal(!modal); setModal(!modal);
}; };
const handlerSaveCheck = save => { // const handlerSaveCheck = save => {
setIsSaveable(save); // setIsSaveable(save);
}; // };
return ( return (
<Card className='mb-0'> <Card className='mb-0'>
@ -319,7 +320,7 @@ export default function LaancAreaMap({
style={{ style={{
position: 'relative', position: 'relative',
zIndex: 100, zIndex: 100,
margin: '400px 10px 10px 10px' margin: '470px 10px 10px 10px'
}} }}
> >
{mapObject ? ( {mapObject ? (

Write Preview
Loading…
Cancel
Save