|
|
@ -34,6 +34,7 @@ import { |
|
|
|
Table |
|
|
|
Table |
|
|
|
} from '@component/ui'; |
|
|
|
} from '@component/ui'; |
|
|
|
import { FiUsers, FiFileText } from 'react-icons/fi'; |
|
|
|
import { FiUsers, FiFileText } from 'react-icons/fi'; |
|
|
|
|
|
|
|
import mapboxgl from 'mapbox-gl'; |
|
|
|
|
|
|
|
|
|
|
|
export default function OperationApprovalsContainer({ mode }) { |
|
|
|
export default function OperationApprovalsContainer({ mode }) { |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const dispatch = useDispatch(); |
|
|
@ -73,6 +74,9 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
const savedRightMenuRef = useRef(null); |
|
|
|
const savedRightMenuRef = useRef(null); |
|
|
|
const [clientX, setClientX] = useState(0); |
|
|
|
const [clientX, setClientX] = useState(0); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 비행구역 데이터블록
|
|
|
|
|
|
|
|
const [dataBlocks, setDataBlocks] = useState([]); |
|
|
|
|
|
|
|
|
|
|
|
const previewGeo2 = { |
|
|
|
const previewGeo2 = { |
|
|
|
type: 'FeatureCollection', |
|
|
|
type: 'FeatureCollection', |
|
|
|
features: [] |
|
|
|
features: [] |
|
|
@ -333,7 +337,61 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
|
|
|
|
|
|
|
|
// mapObject.setPaintProperty('waypoint', 'circle-radius', 10);
|
|
|
|
// mapObject.setPaintProperty('waypoint', 'circle-radius', 10);
|
|
|
|
mapObject?.getSource('preview').setData(previewGeo2); |
|
|
|
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 = |
|
|
|
|
|
|
|
'<div class="tooltip-box">' + |
|
|
|
|
|
|
|
'<div class="tooltip-ti">' + |
|
|
|
|
|
|
|
'<span>' + |
|
|
|
|
|
|
|
apply?.applyNo + |
|
|
|
|
|
|
|
'</span>' + |
|
|
|
|
|
|
|
'</div>' + |
|
|
|
|
|
|
|
'<div class="tooltip-txt">' + |
|
|
|
|
|
|
|
'<div class="tooltip-txt-list">' + |
|
|
|
|
|
|
|
'<span>' + |
|
|
|
|
|
|
|
'비행구역' + |
|
|
|
|
|
|
|
(idx + 1) + |
|
|
|
|
|
|
|
' / ' + |
|
|
|
|
|
|
|
'주소-' + |
|
|
|
|
|
|
|
' / ' + |
|
|
|
|
|
|
|
divCd + |
|
|
|
|
|
|
|
'</span>' + |
|
|
|
|
|
|
|
'</div>' + |
|
|
|
|
|
|
|
'</div>' + |
|
|
|
|
|
|
|
'</div>'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 () => { |
|
|
|
const handlerLogout = async () => { |
|
|
|