|
|
|
@ -3,7 +3,7 @@ import mapboxgl from 'mapbox-gl';
|
|
|
|
|
import threebox from 'threebox-plugin'; |
|
|
|
|
import MapboxLanguage from '@mapbox/mapbox-gl-language'; |
|
|
|
|
import { MAPBOX_TOKEN } from '../../../configs/constants'; |
|
|
|
|
import { useEffect, useMemo, useState } from 'react'; |
|
|
|
|
import { useEffect, useMemo, useRef, useState } from 'react'; |
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
import { Card, CardBody } from 'reactstrap'; |
|
|
|
|
import { initFlightBas } from '../../../modules/basis/flight/models/basisFlightModel'; |
|
|
|
@ -76,6 +76,11 @@ export default function LaancAreaMap({
|
|
|
|
|
}; |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
// 좌표 정보 마우스 드래그
|
|
|
|
|
const scrollRef = useRef(null); |
|
|
|
|
const [isDrag, setIsDrag] = useState(false); |
|
|
|
|
const [startX, setStartX] = useState(); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
handlerMapInit(); |
|
|
|
|
}, []); |
|
|
|
@ -321,36 +326,56 @@ export default function LaancAreaMap({
|
|
|
|
|
// setModal(!modal);
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
// 좌표 정보 마우스 드래그
|
|
|
|
|
const onMouseDown = e => { |
|
|
|
|
e.preventDefault(); |
|
|
|
|
setIsDrag(true); |
|
|
|
|
setStartX(e.pageX + scrollRef.current.scrollLeft); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const onMouseMove = e => { |
|
|
|
|
if (isDrag) { |
|
|
|
|
const { scrollWidth, clientWidth, scrollLeft } = scrollRef.current; |
|
|
|
|
|
|
|
|
|
scrollRef.current.scrollLeft = startX - e.pageX; |
|
|
|
|
|
|
|
|
|
if (scrollLeft === 0) { |
|
|
|
|
setStartX(e.pageX); |
|
|
|
|
} else if (scrollWidth <= clientWidth + scrollLeft) { |
|
|
|
|
setStartX(e.pageX + scrollLeft); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const throttle = (func, ms) => { |
|
|
|
|
let throttled = false; |
|
|
|
|
return (...args) => { |
|
|
|
|
if (!throttled) { |
|
|
|
|
throttled = true; |
|
|
|
|
setTimeout(() => { |
|
|
|
|
func(...args); |
|
|
|
|
throttled = false; |
|
|
|
|
}, ms); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const onMouseUp = e => { |
|
|
|
|
setIsDrag(false); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<Card className='mb-0'> |
|
|
|
|
<CardBody> |
|
|
|
|
<div style={{ position: 'relative' }}> |
|
|
|
|
<LaancMapSearch mapObject={mapObject} /> |
|
|
|
|
{/* <div className='d-flex coords-wrap'> |
|
|
|
|
<div className='coords-box'> |
|
|
|
|
<div> |
|
|
|
|
<h6 className='ti'>비행구역 1</h6> |
|
|
|
|
<div className='coords-box-scroll'> |
|
|
|
|
<div className='coords-box-list'> |
|
|
|
|
<span> |
|
|
|
|
<span>126.6058737, 37.5220027</span> |
|
|
|
|
<span className='etc'>/</span> |
|
|
|
|
<span>126.6058093, 37.5188038</span> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
<div className='coords-box-list'> |
|
|
|
|
<span> |
|
|
|
|
<span>126.6058737, 37.5220027</span> |
|
|
|
|
<span className='etc'>/</span> |
|
|
|
|
<span>126.6058093, 37.5188038</span> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> */} |
|
|
|
|
|
|
|
|
|
<div className='d-flex coords-wrap'> |
|
|
|
|
<div |
|
|
|
|
className='d-flex coords-wrap' |
|
|
|
|
ref={scrollRef} |
|
|
|
|
onMouseDown={onMouseDown} |
|
|
|
|
onMouseMove={isDrag ? throttle(onMouseMove, 50) : null} |
|
|
|
|
onMouseUp={onMouseUp} |
|
|
|
|
> |
|
|
|
|
{viewCoordObj?.map((obj, i) => { |
|
|
|
|
let coord = |
|
|
|
|
obj.properties.id === 'LINE' |
|
|
|
|