diff --git a/src/components/map/mapbox/draw/LanncDraw.js b/src/components/map/mapbox/draw/LaancDraw.js similarity index 94% rename from src/components/map/mapbox/draw/LanncDraw.js rename to src/components/map/mapbox/draw/LaancDraw.js index 53e7edd..69bb618 100644 --- a/src/components/map/mapbox/draw/LanncDraw.js +++ b/src/components/map/mapbox/draw/LaancDraw.js @@ -11,7 +11,7 @@ import { handlerGetMidPoint } from '../../../../utility/DrawUtil'; -export const LanncDraw = props => { +export const LaancDraw = props => { const mapControl = useSelector(state => state.controlMapReducer); const mapObject = props.mapObject; const canvas = mapObject.getCanvasContainer(); @@ -38,6 +38,7 @@ export const LanncDraw = props => { }; const geojson = props.geojson; + const [geoState, setGeoState] = useState(geojson); const detailLayer = props.detailLayer; let mode = props.mode; @@ -59,6 +60,8 @@ export const LanncDraw = props => { const drawType = mapControl.drawType; if (areaType !== drawType && detailLayer) { + console.log('drawInit'); + geojson.features = geoState.features; drawInit(); } }, [mapControl.drawType, detailLayer]); @@ -99,15 +102,16 @@ export const LanncDraw = props => { const handlerClearMode = () => { console.log('clearMode'); - finishDraw(); - + removeListener(); removeGeoJson(); + props.handlerInitCoordinates(); }; const handlerStartMode = mode => { - if (!mode) return; + if (!mode || mode === 'RESET') return; + console.log('startMode'); mapObject.on('click', clickEve); }; @@ -122,7 +126,7 @@ export const LanncDraw = props => { mapObject.off('mousemove', onMouseMove); mapObject.off('mousemove', onMouseMovePolyline); mapObject.off('mousemove', onMouseMovePolygon); - mapObject.off('contextmenu', finishDraw); + mapObject.off('contextmenu', onRightClick); // 이거 있나 없나 뭔 차이지? setMouseDownEve(false); @@ -144,15 +148,19 @@ export const LanncDraw = props => { point = []; geojson.features = []; + setGeoState(geojson); + handlerGetSourceSetData(); }; - const finishDraw = () => { + const onRightClick = () => { + console.log('rightClick'); removeListener(); - console.log('finish'); const drawType = mapControl.drawType; const path = handlerGetGeoJsonCoord('point'); + console.log(mode, drawType); + if (path.length > 0) { if (drawType === 'LINE') { if (path.length > 1) { @@ -166,7 +174,6 @@ export const LanncDraw = props => { }); removeGeoJson(); props.handlerDrawType('RESET'); - // mapObject.on('click', clickEve); } handlerGetSourceSetData(); } else if (drawType === 'POLYGON') { @@ -183,7 +190,6 @@ export const LanncDraw = props => { }); removeGeoJson(); props.handlerDrawType('RESET'); - // mapObject.on('click', clickEve); } } handlerGetSourceSetData(); @@ -199,6 +205,7 @@ export const LanncDraw = props => { // polyline, polygon 생성 const onClickFeature = (e, obj) => { + console.log('click'); const formatCoord = FormattingCoord([e.lngLat.lng, e.lngLat.lat]); //현재 내 좌표가 waypoint레이어의 geojson도형 안에 속해있는지 안해있는지? //geojson을 반환해주는 듯? @@ -216,7 +223,11 @@ export const LanncDraw = props => { const featuresId = features[0].properties.id; handlerReplaceDuplicate(featuresId, ''); } else { - const index = geojson.features.filter( + // const index = geojson.features.filter( + // geo => geo.properties?.id === 'point' + // ).length; + const geoCopy = geojson.features.concat(); + const index = geoCopy.filter( geo => geo.properties?.id === 'point' ).length; @@ -242,7 +253,7 @@ export const LanncDraw = props => { addMileStone(coordinates, ''); } else { //첫 좌표 - mapObject.on('contextmenu', finishDraw); + mapObject.on('contextmenu', onRightClick); mapObject.on( 'mousemove', id === 'polyline' ? onMouseMovePolyline : onMouseMovePolygon @@ -322,6 +333,7 @@ export const LanncDraw = props => { mapObject.on('mousemove', onMouseMove); mapObject.on('mouseup', onMouseUp); + // 이거 왜 필요했던 거지? mapObject.off('click', clickEve); }; @@ -368,8 +380,11 @@ export const LanncDraw = props => { console.log('up'); mapObject.off('mousedown', 'waypoint', onMouseDown); + mapObject.off('mousemove', onMouseMove); mapObject.off('mouseup', onMouseUp); + + // 이거 왜 필요했던 거지? mapObject.off('click', clickEve); setMouseDownEve(false); @@ -509,15 +524,19 @@ export const LanncDraw = props => { //on으로 하면 그 반대 현상 -> 이벤트 다 지워줬는데 왜 down이 두번 잡혀?????? //얘만 해결하면 끝인데... if (!mouseDownEve) { + console.log('여기가 이벤트 등록입니다.'); mapObject.on('mousedown', 'waypoint', onMouseDown); setMouseDownEve(true); } + // mapObject.once('mousedown', 'waypoint', onMouseDown); } // 기존 마커 제거 후 재 생성 handlerRemoveMarker(); handlerCreateAllMarker(paths); + setGeoState(geojson); + mapObject.setPaintProperty('waypoint', 'circle-radius', 8); handlerGetSourceSetData(); } diff --git a/src/components/map/mapbox/draw/LaancMapSearch.js b/src/components/map/mapbox/draw/LaancMapSearch.js new file mode 100644 index 0000000..f07331d --- /dev/null +++ b/src/components/map/mapbox/draw/LaancMapSearch.js @@ -0,0 +1,109 @@ +import { Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap'; +import { Search } from 'react-feather'; +import { useState } from 'react'; +import { flightPlanAPI } from '../../../../modules/basis/flight/apis/basisFlightApi'; + +export default function LaancMapSearch({ mapObject }) { + const [query, setQuery] = useState(''); + const [searchRes, setSearchRes] = useState([]); + const [isSearch, setIsSearch] = useState(false); + + // 지역 검색 + const handlerSearchRes = async () => { + const res = await flightPlanAPI.searchArea({ query: query }); + setIsSearch(true); + setSearchRes(res.data.items); + }; + + const handlerSearchChange = e => { + const { name, value } = e.target; + + if (name == 'searchInput') { + setQuery(value); + } + }; + + const handlerSearchEnter = e => { + if (e.key == 'Enter') { + handlerSearchRes(); + } + }; + + const handlerSearchCoord = (mapx, mapy) => { + const numberString = [mapx, mapy]; + const latlng = []; + + numberString.map(coord => { + let digits = coord.split(''); + + if (digits[0] !== '1') { + digits.splice(2, 0, '.'); + } else { + digits.splice(3, 0, '.'); + } + + latlng.push(Number(digits.join(''))); + }); + + setIsSearch(false); + mapObject.setCenter(latlng); + mapObject.setZoom(15); + }; + + return ( +