diff --git a/src/containers/flight/OperationApprovalsContainer.js b/src/containers/flight/OperationApprovalsContainer.js index 44895d85..d3c021c9 100644 --- a/src/containers/flight/OperationApprovalsContainer.js +++ b/src/containers/flight/OperationApprovalsContainer.js @@ -34,6 +34,7 @@ import { Table } from '@component/ui'; import { FiUsers, FiFileText } from 'react-icons/fi'; +import mapboxgl from 'mapbox-gl'; export default function OperationApprovalsContainer({ mode }) { const dispatch = useDispatch(); @@ -73,6 +74,9 @@ export default function OperationApprovalsContainer({ mode }) { const savedRightMenuRef = useRef(null); const [clientX, setClientX] = useState(0); + // 비행구역 데이터블록 + const [dataBlocks, setDataBlocks] = useState([]); + const previewGeo2 = { type: 'FeatureCollection', features: [] @@ -333,7 +337,61 @@ export default function OperationApprovalsContainer({ mode }) { // mapObject.setPaintProperty('waypoint', 'circle-radius', 10); mapObject?.getSource('preview').setData(previewGeo2); + + handlerInfoWindow(areaCoordList); + } + }; + + const handlerInfoWindow = data => { + if (dataBlocks.length > 0) { + dataBlocks?.map(block => { + block.remove(); + }); } + + data.map((apply, idx) => { + const divCd = + apply.fltElevMax === 120 + ? '원추' + : apply.fltElevMax > 45 && apply.fltElevMax < 100 + ? '수평' + : '-'; + + const content = + '
' + + '
' + + '' + + apply?.applyNo + + '' + + '
' + + '
' + + '
' + + '' + + '비행구역' + + (idx + 1) + + ' / ' + + '주소-' + + ' / ' + + divCd + + '' + + '
' + + '
' + + '
'; + + if (mapObject) { + const dataBlock = new mapboxgl.Popup({ + offset: [0, 0], + closeButton: false, + closeOnClick: false, + closeOnMove: false + }) + .setLngLat({ lng: apply?.lon, lat: apply?.lat }) + .setHTML(content) + .addTo(mapObject); + + setDataBlocks(prev => [...prev, dataBlock]); + } + }); }; const handlerLogout = async () => {