|
|
@ -10,7 +10,8 @@ import { |
|
|
|
flightlayerPolygon, |
|
|
|
flightlayerPolygon, |
|
|
|
flightlayerBuffer, |
|
|
|
flightlayerBuffer, |
|
|
|
handlerStartMode, |
|
|
|
handlerStartMode, |
|
|
|
handlerOnClickDrawLineString |
|
|
|
handlerOnClickDrawLineString, |
|
|
|
|
|
|
|
getDintancePointPopupList |
|
|
|
} 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'; |
|
|
@ -50,6 +51,7 @@ import mapboxgl from 'mapbox-gl'; |
|
|
|
import * as turf from '@turf/turf'; |
|
|
|
import * as turf from '@turf/turf'; |
|
|
|
|
|
|
|
|
|
|
|
let distanceMarkers = []; |
|
|
|
let distanceMarkers = []; |
|
|
|
|
|
|
|
|
|
|
|
export default function OperationApprovalsContainer({ mode }) { |
|
|
|
export default function OperationApprovalsContainer({ mode }) { |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const history = useHistory(); |
|
|
|
const history = useHistory(); |
|
|
@ -95,7 +97,8 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
const [dataBlocks, setDataBlocks] = useState([]); |
|
|
|
const [dataBlocks, setDataBlocks] = useState([]); |
|
|
|
|
|
|
|
|
|
|
|
// 거리측정
|
|
|
|
// 거리측정
|
|
|
|
const [isDistanceStartPoint, setIsDistanceStartPoint] = useState(false); |
|
|
|
const [isDistanceStartPoint, setIsDistanceStartPoint] = useState(true); |
|
|
|
|
|
|
|
const [isResetDisabled, isSetResetDisabled] = useState(true); |
|
|
|
const totalDistanceRef = useRef(null); |
|
|
|
const totalDistanceRef = useRef(null); |
|
|
|
const mouseCursorRef = useRef(null); |
|
|
|
const mouseCursorRef = useRef(null); |
|
|
|
const distanceBoxRef = useRef(null); |
|
|
|
const distanceBoxRef = useRef(null); |
|
|
@ -472,6 +475,7 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
|
|
|
|
|
|
|
|
const handlerDrawObjInit = (obj, mapInstance) => { |
|
|
|
const handlerDrawObjInit = (obj, mapInstance) => { |
|
|
|
setDrawObj(obj); |
|
|
|
setDrawObj(obj); |
|
|
|
|
|
|
|
|
|
|
|
handlerOnClickDrawLineString( |
|
|
|
handlerOnClickDrawLineString( |
|
|
|
mapInstance, |
|
|
|
mapInstance, |
|
|
|
handlerDrawPopup, |
|
|
|
handlerDrawPopup, |
|
|
@ -492,32 +496,72 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
|
|
|
|
|
|
|
|
const handlerDistanceClose = () => { |
|
|
|
const handlerDistanceClose = () => { |
|
|
|
drawObj.deleteAll(); |
|
|
|
drawObj.deleteAll(); |
|
|
|
|
|
|
|
distanceMarkers.map(i => i.remove()); |
|
|
|
dispatch(clientChangeDrawType('simple_select')); |
|
|
|
dispatch(clientChangeDrawType('simple_select')); |
|
|
|
drawObj.changeMode('simple_select'); |
|
|
|
drawObj.changeMode('simple_select'); |
|
|
|
|
|
|
|
totalDistanceRef.current.innerText = ''; |
|
|
|
mouseCursorRef.current.style.display = 'none'; |
|
|
|
mouseCursorRef.current.style.display = 'none'; |
|
|
|
distanceBoxRef.current.style.display = 'none'; |
|
|
|
distanceBoxRef.current.style.display = 'none'; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handlerDrawReset = () => { |
|
|
|
|
|
|
|
drawObj.deleteAll(); |
|
|
|
|
|
|
|
distanceMarkers.map(i => i.remove()); |
|
|
|
|
|
|
|
dispatch(clientChangeDrawType('LINE')); |
|
|
|
|
|
|
|
drawObj.changeMode('draw_line_string'); |
|
|
|
|
|
|
|
isSetResetDisabled(true); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handlerDistanceRevert = () => { |
|
|
|
const handlerDistanceRevert = () => { |
|
|
|
if (drawObj.getMode() === 'draw_line_string') { |
|
|
|
if (drawObj.getMode() === 'draw_line_string') { |
|
|
|
const allFeatures = drawObj.getAll(); |
|
|
|
const allFeatures = drawObj.getAll(); |
|
|
|
|
|
|
|
|
|
|
|
if (allFeatures.features.length > 0) { |
|
|
|
if (allFeatures.features.length > 0) { |
|
|
|
allFeatures.features[0].geometry.coordinates.pop(); // 마지막 좌표 제거
|
|
|
|
drawObj.deleteAll(); |
|
|
|
allFeatures.features[0].geometry.coordinates.pop(); |
|
|
|
const coords = allFeatures.features[0].geometry.coordinates; |
|
|
|
allFeatures.features[0].geometry.coordinates.push( |
|
|
|
|
|
|
|
allFeatures.features[0].geometry.coordinates[ |
|
|
|
// 새로운 배열로 마지막 두 개의 값을 제거
|
|
|
|
allFeatures.features[0].geometry.coordinates.length - 1 |
|
|
|
if (coords.length > 1) { |
|
|
|
] |
|
|
|
// 최소한 두 개의 좌표가 있어야 함
|
|
|
|
); |
|
|
|
const newCoords = coords.slice(0, -2); // 마지막 두 개의 값을 제거
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
newCoords.push(newCoords[newCoords.length - 1]); // 마지막 값을 다시 추가
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 중복 배열 제거
|
|
|
|
|
|
|
|
const uniqueArray = Array.from( |
|
|
|
|
|
|
|
new Set(newCoords.map(JSON.stringify)) |
|
|
|
|
|
|
|
).map(JSON.parse); |
|
|
|
|
|
|
|
|
|
|
|
drawObj.set(allFeatures); |
|
|
|
if (uniqueArray.length === 1) { |
|
|
|
|
|
|
|
uniqueArray.push(uniqueArray[uniqueArray.length - 1]); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
drawObj.set({ |
|
|
|
|
|
|
|
type: 'FeatureCollection', |
|
|
|
|
|
|
|
features: [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
type: 'Feature', |
|
|
|
|
|
|
|
properties: {}, |
|
|
|
|
|
|
|
id: 'pal_line_string', |
|
|
|
|
|
|
|
geometry: { type: 'LineString', coordinates: [...uniqueArray] } |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
const markerList = getDintancePointPopupList(drawObj); |
|
|
|
|
|
|
|
handlerDrawPopup(mapObject, markerList, drawObj); |
|
|
|
|
|
|
|
// 다시 이어그리기
|
|
|
|
|
|
|
|
let feature = drawObj.getAll().features[0]; |
|
|
|
|
|
|
|
drawObj.changeMode('draw_line_string', { |
|
|
|
|
|
|
|
featureId: 'pal_line_string', |
|
|
|
|
|
|
|
from: feature.geometry.coordinates[ |
|
|
|
|
|
|
|
feature.geometry.coordinates.length - 1 |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handlerDrawPopup = (mapInstance, popupList) => { |
|
|
|
const handlerDrawPopup = (mapInstance, popupList, draw = undefined) => { |
|
|
|
// setIsDistanceStartPoint(true);
|
|
|
|
|
|
|
|
if (distanceMarkers.length > 0) { |
|
|
|
if (distanceMarkers.length > 0) { |
|
|
|
distanceMarkers.map(i => i.remove()); |
|
|
|
distanceMarkers.map(i => i.remove()); |
|
|
|
} |
|
|
|
} |
|
|
@ -538,6 +582,13 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
distanceMarkers.push(distanceMarker); |
|
|
|
distanceMarkers.push(distanceMarker); |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (draw.getMode() === 'simple_select') { |
|
|
|
|
|
|
|
setIsDistanceStartPoint(true); |
|
|
|
|
|
|
|
isSetResetDisabled(false); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
setIsDistanceStartPoint(false); |
|
|
|
|
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handlerLogout = async () => { |
|
|
|
const handlerLogout = async () => { |
|
|
@ -842,14 +893,18 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
className='btn-icon rounded-circle' |
|
|
|
className='btn-icon rounded-circle' |
|
|
|
color='primary' |
|
|
|
color='primary' |
|
|
|
size='sm' |
|
|
|
size='sm' |
|
|
|
|
|
|
|
disabled={isResetDisabled} |
|
|
|
|
|
|
|
onClick={handlerDrawReset} |
|
|
|
> |
|
|
|
> |
|
|
|
<FiRotateCw size={16} /> |
|
|
|
<FiRotateCw size={16} /> |
|
|
|
</Button> |
|
|
|
</Button> |
|
|
|
<Button |
|
|
|
<Button |
|
|
|
|
|
|
|
id='draw_revert' |
|
|
|
onClick={handlerDistanceRevert} |
|
|
|
onClick={handlerDistanceRevert} |
|
|
|
className='btn-icon rounded-circle' |
|
|
|
className='btn-icon rounded-circle' |
|
|
|
color={isDistanceStartPoint ? 'primary' : ''} |
|
|
|
color='primary' |
|
|
|
size='sm' |
|
|
|
size='sm' |
|
|
|
|
|
|
|
disabled={isDistanceStartPoint} |
|
|
|
> |
|
|
|
> |
|
|
|
<FiCornerUpLeft size={16} /> |
|
|
|
<FiCornerUpLeft size={16} /> |
|
|
|
</Button> |
|
|
|
</Button> |
|
|
|