|
|
@ -9,7 +9,8 @@ import { |
|
|
|
flightlayerPolyline, |
|
|
|
flightlayerPolyline, |
|
|
|
flightlayerPolygon, |
|
|
|
flightlayerPolygon, |
|
|
|
flightlayerBuffer, |
|
|
|
flightlayerBuffer, |
|
|
|
handlerStartMode |
|
|
|
handlerStartMode, |
|
|
|
|
|
|
|
handlerOnClickDrawLineString |
|
|
|
} from '../../utility/MapUtils'; |
|
|
|
} from '../../utility/MapUtils'; |
|
|
|
import { useHistory } from 'react-router-dom'; |
|
|
|
import { useHistory } from 'react-router-dom'; |
|
|
|
import useMapType from '@hooks/useMapType'; |
|
|
|
import useMapType from '@hooks/useMapType'; |
|
|
@ -48,6 +49,7 @@ import { X } from 'react-feather'; |
|
|
|
import mapboxgl from 'mapbox-gl'; |
|
|
|
import mapboxgl from 'mapbox-gl'; |
|
|
|
import * as turf from '@turf/turf'; |
|
|
|
import * as turf from '@turf/turf'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let distanceMarkers = []; |
|
|
|
export default function OperationApprovalsContainer({ mode }) { |
|
|
|
export default function OperationApprovalsContainer({ mode }) { |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const history = useHistory(); |
|
|
|
const history = useHistory(); |
|
|
@ -62,6 +64,7 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
// 비행구역 그리기
|
|
|
|
// 비행구역 그리기
|
|
|
|
const [drawObj, setDrawObj] = useState(); |
|
|
|
const [drawObj, setDrawObj] = useState(); |
|
|
|
const [filter, setFilter] = useState(''); |
|
|
|
const [filter, setFilter] = useState(''); |
|
|
|
|
|
|
|
const mouseCursorRef = useRef(null); |
|
|
|
|
|
|
|
|
|
|
|
// 지도
|
|
|
|
// 지도
|
|
|
|
const [mapObject, setMapObject] = useState(); |
|
|
|
const [mapObject, setMapObject] = useState(); |
|
|
@ -133,6 +136,7 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
window._mapbox = map; |
|
|
|
window._mapbox = map; |
|
|
|
let mapInstance = mode === 'container' ? map : window.opener._mapbox; |
|
|
|
let mapInstance = mode === 'container' ? map : window.opener._mapbox; |
|
|
|
setMapObject(mapInstance); |
|
|
|
setMapObject(mapInstance); |
|
|
|
|
|
|
|
handlerOnClickDrawLineString(mapInstance, handlerDrawMarker); |
|
|
|
} |
|
|
|
} |
|
|
|
}, [map]); |
|
|
|
}, [map]); |
|
|
|
|
|
|
|
|
|
|
@ -462,11 +466,8 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handlerDrawTypeChange = (e, val) => { |
|
|
|
const handlerDrawTypeChange = (e, val) => { |
|
|
|
// const cursor = document.getElementById('distance_cursor');
|
|
|
|
drawObj.deleteAll(); |
|
|
|
// cursor.style.display = 'block';
|
|
|
|
distanceMarkers.map(i => i.remove()); |
|
|
|
// cursor.style.left = e.clientX + 'px';
|
|
|
|
|
|
|
|
// cursor.style.top = e.clientY + 45 + 'px';
|
|
|
|
|
|
|
|
// cursor.innerText = '시작점 선택';
|
|
|
|
|
|
|
|
dispatch(clientChangeDrawType(val)); |
|
|
|
dispatch(clientChangeDrawType(val)); |
|
|
|
handlerStartMode(val, drawObj); |
|
|
|
handlerStartMode(val, drawObj); |
|
|
|
}; |
|
|
|
}; |
|
|
@ -480,6 +481,36 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
setMapType(val); |
|
|
|
setMapType(val); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handlerDistanceClose = () => { |
|
|
|
|
|
|
|
drawObj.deleteAll(); |
|
|
|
|
|
|
|
dispatch(clientChangeDrawType('')); |
|
|
|
|
|
|
|
document.getElementById('distance_box').style.display = 'none'; |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handlerDrawMarker = (mapInstance, markerList, startPoint) => { |
|
|
|
|
|
|
|
const marker = markerList.filter(i => { |
|
|
|
|
|
|
|
return i.coord[0][0] === startPoint.lng; |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
if (marker.length > 0) { |
|
|
|
|
|
|
|
let distanceMarker = new mapboxgl.Popup({ |
|
|
|
|
|
|
|
closeButton: false, |
|
|
|
|
|
|
|
closeOnClick: false, |
|
|
|
|
|
|
|
anchor: 'bottom', |
|
|
|
|
|
|
|
focusAfterOpen: false |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
.setLngLat([ |
|
|
|
|
|
|
|
marker[0].coord[0][0].toFixed(6), |
|
|
|
|
|
|
|
marker[0].coord[0][1].toFixed(6) |
|
|
|
|
|
|
|
]) |
|
|
|
|
|
|
|
.setHTML( |
|
|
|
|
|
|
|
`<div style="color:#000000;font-weight:400;">${marker[0].text}</div>` |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
.addTo(mapInstance); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
distanceMarkers.push(distanceMarker); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handlerLogout = async () => { |
|
|
|
const handlerLogout = async () => { |
|
|
|
const { payload } = await dispatch(setLogout()); |
|
|
|
const { payload } = await dispatch(setLogout()); |
|
|
|
|
|
|
|
|
|
|
@ -493,6 +524,18 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
<div className='map' style={{ width: '100%' }}> |
|
|
|
<div className='map' style={{ width: '100%' }}> |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
ref={mouseCursorRef} |
|
|
|
|
|
|
|
style={{ |
|
|
|
|
|
|
|
position: 'absolute', |
|
|
|
|
|
|
|
display: 'none', |
|
|
|
|
|
|
|
background: '#8a1c05', |
|
|
|
|
|
|
|
color: '#fff', |
|
|
|
|
|
|
|
padding: '5px', |
|
|
|
|
|
|
|
borderRadius: '5px', |
|
|
|
|
|
|
|
fontWeight: 500 |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
></div> |
|
|
|
<div className='test_modal'> |
|
|
|
<div className='test_modal'> |
|
|
|
<Button |
|
|
|
<Button |
|
|
|
color='primary' |
|
|
|
color='primary' |
|
|
@ -770,10 +813,14 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
</ButtonGroup> |
|
|
|
</ButtonGroup> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className='data-box-btn-list'> |
|
|
|
<div |
|
|
|
|
|
|
|
id='distance_box' |
|
|
|
|
|
|
|
className='data-box-btn-list' |
|
|
|
|
|
|
|
style={{ display: 'none' }} |
|
|
|
|
|
|
|
> |
|
|
|
<h4>측정</h4> |
|
|
|
<h4>측정</h4> |
|
|
|
<div className='distance-check'> |
|
|
|
<div className='distance-check'> |
|
|
|
<div class='btn-box'> |
|
|
|
<div className='btn-box'> |
|
|
|
<Button |
|
|
|
<Button |
|
|
|
className='btn-icon rounded-circle' |
|
|
|
className='btn-icon rounded-circle' |
|
|
|
color='primary' |
|
|
|
color='primary' |
|
|
@ -792,6 +839,7 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
className='btn-icon rounded-circle' |
|
|
|
className='btn-icon rounded-circle' |
|
|
|
color='dark' |
|
|
|
color='dark' |
|
|
|
size='sm' |
|
|
|
size='sm' |
|
|
|
|
|
|
|
onClick={handlerDistanceClose} |
|
|
|
> |
|
|
|
> |
|
|
|
<X size={16} /> |
|
|
|
<X size={16} /> |
|
|
|
</Button> |
|
|
|
</Button> |
|
|
@ -799,7 +847,13 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
<div className='text'> |
|
|
|
<div className='text'> |
|
|
|
<p> |
|
|
|
<p> |
|
|
|
지도에서 지점을 클릭하여 거리를 측정하세요. |
|
|
|
지도에서 지점을 클릭하여 거리를 측정하세요. |
|
|
|
<span className='finish'>총 거리 : 1050.24m</span> |
|
|
|
<span |
|
|
|
|
|
|
|
id='total_distance' |
|
|
|
|
|
|
|
className='finish' |
|
|
|
|
|
|
|
style={{ display: 'none' }} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
총 거리 : 1050.24m |
|
|
|
|
|
|
|
</span> |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|