|
|
@ -62,7 +62,6 @@ 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(); |
|
|
@ -95,6 +94,12 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
// 비행구역 데이터블록
|
|
|
|
// 비행구역 데이터블록
|
|
|
|
const [dataBlocks, setDataBlocks] = useState([]); |
|
|
|
const [dataBlocks, setDataBlocks] = useState([]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 거리측정
|
|
|
|
|
|
|
|
const [isDistanceStartPoint, setIsDistanceStartPoint] = useState(false); |
|
|
|
|
|
|
|
const totalDistanceRef = useRef(null); |
|
|
|
|
|
|
|
const mouseCursorRef = useRef(null); |
|
|
|
|
|
|
|
const distanceBoxRef = useRef(null); |
|
|
|
|
|
|
|
|
|
|
|
// 비행구역 (운항과) 레이어
|
|
|
|
// 비행구역 (운항과) 레이어
|
|
|
|
const operationLayer = { |
|
|
|
const operationLayer = { |
|
|
|
type: 'FeatureCollection', |
|
|
|
type: 'FeatureCollection', |
|
|
@ -135,7 +140,6 @@ 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]); |
|
|
|
|
|
|
|
|
|
|
@ -461,46 +465,78 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
const handlerDrawTypeChange = (e, val) => { |
|
|
|
const handlerDrawTypeChange = (e, val) => { |
|
|
|
drawObj.deleteAll(); |
|
|
|
drawObj.deleteAll(); |
|
|
|
distanceMarkers.map(i => i.remove()); |
|
|
|
distanceMarkers.map(i => i.remove()); |
|
|
|
|
|
|
|
distanceBoxRef.current.style.display = 'block'; |
|
|
|
dispatch(clientChangeDrawType(val)); |
|
|
|
dispatch(clientChangeDrawType(val)); |
|
|
|
handlerStartMode(val, drawObj); |
|
|
|
handlerStartMode(val, drawObj); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handlerDrawObjInit = obj => { |
|
|
|
const handlerDrawObjInit = (obj, mapInstance) => { |
|
|
|
setDrawObj(obj); |
|
|
|
setDrawObj(obj); |
|
|
|
|
|
|
|
handlerOnClickDrawLineString( |
|
|
|
|
|
|
|
mapInstance, |
|
|
|
|
|
|
|
handlerDrawPopup, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
totalDistanceRef, |
|
|
|
|
|
|
|
mouseCursorRef, |
|
|
|
|
|
|
|
distanceBoxRef |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
obj |
|
|
|
|
|
|
|
); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handlerMapTypeChange = val => { |
|
|
|
const handlerMapTypeChange = val => { |
|
|
|
dispatch(clientChangeDrawType('')); |
|
|
|
// dispatch(clientChangeDrawType(''));
|
|
|
|
|
|
|
|
drawObj.changeMode('simple_select'); |
|
|
|
setMapType(val); |
|
|
|
setMapType(val); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handlerDistanceClose = () => { |
|
|
|
const handlerDistanceClose = () => { |
|
|
|
drawObj.deleteAll(); |
|
|
|
drawObj.deleteAll(); |
|
|
|
dispatch(clientChangeDrawType('')); |
|
|
|
dispatch(clientChangeDrawType('simple_select')); |
|
|
|
document.getElementById('distance_box').style.display = 'none'; |
|
|
|
drawObj.changeMode('simple_select'); |
|
|
|
|
|
|
|
mouseCursorRef.current.style.display = 'none'; |
|
|
|
|
|
|
|
distanceBoxRef.current.style.display = 'none'; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handlerDrawMarker = (mapInstance, markerList, startPoint) => { |
|
|
|
const handlerDistanceRevert = () => { |
|
|
|
const marker = markerList.filter(i => { |
|
|
|
if (drawObj.getMode() === 'draw_line_string') { |
|
|
|
return i.coord[0][0] === startPoint.lng; |
|
|
|
const allFeatures = drawObj.getAll(); |
|
|
|
}); |
|
|
|
|
|
|
|
if (marker.length > 0) { |
|
|
|
if (allFeatures.features.length > 0) { |
|
|
|
|
|
|
|
allFeatures.features[0].geometry.coordinates.pop(); // 마지막 좌표 제거
|
|
|
|
|
|
|
|
allFeatures.features[0].geometry.coordinates.pop(); |
|
|
|
|
|
|
|
allFeatures.features[0].geometry.coordinates.push( |
|
|
|
|
|
|
|
allFeatures.features[0].geometry.coordinates[ |
|
|
|
|
|
|
|
allFeatures.features[0].geometry.coordinates.length - 1 |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
drawObj.set(allFeatures); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handlerDrawPopup = (mapInstance, popupList) => { |
|
|
|
|
|
|
|
// setIsDistanceStartPoint(true);
|
|
|
|
|
|
|
|
if (distanceMarkers.length > 0) { |
|
|
|
|
|
|
|
distanceMarkers.map(i => i.remove()); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (popupList.length > 0) { |
|
|
|
|
|
|
|
popupList.map(i => { |
|
|
|
let distanceMarker = new mapboxgl.Popup({ |
|
|
|
let distanceMarker = new mapboxgl.Popup({ |
|
|
|
closeButton: false, |
|
|
|
closeButton: false, |
|
|
|
closeOnClick: false, |
|
|
|
closeOnClick: false, |
|
|
|
anchor: 'bottom', |
|
|
|
anchor: 'bottom', |
|
|
|
focusAfterOpen: false |
|
|
|
focusAfterOpen: false |
|
|
|
}) |
|
|
|
}) |
|
|
|
.setLngLat([ |
|
|
|
.setLngLat([i.coord[0][0].toFixed(6), i.coord[0][1].toFixed(6)]) |
|
|
|
marker[0].coord[0][0].toFixed(6), |
|
|
|
|
|
|
|
marker[0].coord[0][1].toFixed(6) |
|
|
|
|
|
|
|
]) |
|
|
|
|
|
|
|
.setHTML( |
|
|
|
.setHTML( |
|
|
|
`<div style="color:#000000;font-weight:400;">${marker[0].text}</div>` |
|
|
|
`<div style="color:#000000;font-weight:400;">${i.text}</div>` |
|
|
|
) |
|
|
|
) |
|
|
|
.addTo(mapInstance); |
|
|
|
.addTo(mapInstance); |
|
|
|
|
|
|
|
|
|
|
|
distanceMarkers.push(distanceMarker); |
|
|
|
distanceMarkers.push(distanceMarker); |
|
|
|
|
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
@ -517,18 +553,6 @@ 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' |
|
|
@ -807,7 +831,7 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
<div |
|
|
|
id='distance_box' |
|
|
|
ref={distanceBoxRef} |
|
|
|
className='data-box-btn-list' |
|
|
|
className='data-box-btn-list' |
|
|
|
style={{ display: 'none' }} |
|
|
|
style={{ display: 'none' }} |
|
|
|
> |
|
|
|
> |
|
|
@ -822,8 +846,9 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
<FiRotateCw size={16} /> |
|
|
|
<FiRotateCw size={16} /> |
|
|
|
</Button> |
|
|
|
</Button> |
|
|
|
<Button |
|
|
|
<Button |
|
|
|
|
|
|
|
onClick={handlerDistanceRevert} |
|
|
|
className='btn-icon rounded-circle' |
|
|
|
className='btn-icon rounded-circle' |
|
|
|
color='primary' |
|
|
|
color={isDistanceStartPoint ? 'primary' : ''} |
|
|
|
size='sm' |
|
|
|
size='sm' |
|
|
|
> |
|
|
|
> |
|
|
|
<FiCornerUpLeft size={16} /> |
|
|
|
<FiCornerUpLeft size={16} /> |
|
|
@ -841,7 +866,7 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
<p> |
|
|
|
<p> |
|
|
|
지도에서 지점을 클릭하여 거리를 측정하세요. |
|
|
|
지도에서 지점을 클릭하여 거리를 측정하세요. |
|
|
|
<span |
|
|
|
<span |
|
|
|
id='total_distance' |
|
|
|
ref={totalDistanceRef} |
|
|
|
className='finish' |
|
|
|
className='finish' |
|
|
|
style={{ display: 'none' }} |
|
|
|
style={{ display: 'none' }} |
|
|
|
> |
|
|
|
> |
|
|
@ -903,6 +928,18 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
)} |
|
|
|
)} |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
ref={mouseCursorRef} |
|
|
|
|
|
|
|
style={{ |
|
|
|
|
|
|
|
position: 'absolute', |
|
|
|
|
|
|
|
display: 'none', |
|
|
|
|
|
|
|
background: '#8a1c05', |
|
|
|
|
|
|
|
color: '#fff', |
|
|
|
|
|
|
|
padding: '5px', |
|
|
|
|
|
|
|
borderRadius: '5px', |
|
|
|
|
|
|
|
fontWeight: 500 |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
></div> |
|
|
|
</> |
|
|
|
</> |
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|