diff --git a/src/components/laanc/map/LaancAreaMap.js b/src/components/laanc/map/LaancAreaMap.js index 97f36128..432edcaa 100644 --- a/src/components/laanc/map/LaancAreaMap.js +++ b/src/components/laanc/map/LaancAreaMap.js @@ -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 (
- {/*
-
-
-
비행구역 1
-
-
- - 126.6058737, 37.5220027 - / - 126.6058093, 37.5188038 - -
-
- - 126.6058737, 37.5220027 - / - 126.6058093, 37.5188038 - -
-
-
-
-
*/} - -
+
{viewCoordObj?.map((obj, i) => { let coord = obj.properties.id === 'LINE'