From a1395a4b5b9ab25df1f602f3c537e6cb2dfe39bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Thu, 5 Oct 2023 13:40:14 +0900 Subject: [PATCH] =?UTF-8?q?=ED=8C=8C=EC=9D=BC=EB=AA=85=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../draw/{LanncDraw.js => LaancDraw.js} | 41 ++++-- .../map/mapbox/draw/LaancMapSearch.js | 109 +++++++++++++++ src/utility/DrawUtil.js | 1 + src/views/laanc/LaancAreaMap.js | 125 ++---------------- 4 files changed, 150 insertions(+), 126 deletions(-) rename src/components/map/mapbox/draw/{LanncDraw.js => LaancDraw.js} (94%) create mode 100644 src/components/map/mapbox/draw/LaancMapSearch.js 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 ( +
+
+ + + + + + + + +
+
    + {searchRes?.length !== 0 && isSearch ? ( + searchRes?.map(search => { + const title = search.title + .replaceAll('', '') + .replaceAll('', ''); + + return ( +
  • handlerSearchCoord(search.mapx, search.mapy)} + > + +
    +
    + + {title} + +
    +
    + {search.roadAddress} +
    +
    +     +
    • + ); + }) + ) : ( + <> + )} +
+
+
+
+ ); +} diff --git a/src/utility/DrawUtil.js b/src/utility/DrawUtil.js index 3de240a..e77f2b1 100644 --- a/src/utility/DrawUtil.js +++ b/src/utility/DrawUtil.js @@ -1,5 +1,6 @@ import * as turf from '@turf/turf'; import mapboxgl from 'mapbox-gl'; +import 'mapbox-gl/dist/mapbox-gl.css'; export const InitFeature = (type, id) => { return { diff --git a/src/views/laanc/LaancAreaMap.js b/src/views/laanc/LaancAreaMap.js index 4e8561a..c7e69b1 100644 --- a/src/views/laanc/LaancAreaMap.js +++ b/src/views/laanc/LaancAreaMap.js @@ -5,22 +5,13 @@ import MapboxLanguage from '@mapbox/mapbox-gl-language'; import { MAPBOX_TOKEN } from '../../configs/constants'; import { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { - Card, - CardBody, - Input, - InputGroup, - InputGroupAddon, - InputGroupText -} from 'reactstrap'; -import { Search } from 'react-feather'; +import { Card, CardBody } from 'reactstrap'; import { initFlightBas } from '../../modules/basis/flight/models/basisFlightModel'; import { AREA_COORDINATE_LIST_SAVE, FLIGHT_PLAN_AREA_BUFFER_LIST } from '../../modules/basis/flight/actions/basisFlightAction'; -import { flightPlanAPI } from '../../modules/basis/flight/apis/basisFlightApi'; -import { LanncDraw } from '../../components/map/mapbox/draw/LanncDraw'; +import { LaancDraw } from '../../components/map/mapbox/draw/LaancDraw'; import { drawTypeChangeAction, mapInitAction @@ -39,6 +30,7 @@ import flatGimpo from '../../components/map/geojson/flatGimpoAirportAirArea.json import gimpo from '../../components/map/geojson/gimpoAirportAirArea.json'; import geoJson from '../../components/map/geojson/airArea.json'; import { FeatureAirZone } from '../../components/map/mapbox/feature/FeatureAirZone'; +import LaancMapSearch from '../../components/map/mapbox/draw/LaancMapSearch'; export default function LaancAreaMap({ centeredModal, mapContainer }) { const dispatch = useDispatch(); @@ -52,10 +44,6 @@ export default function LaancAreaMap({ centeredModal, mapContainer }) { initFlightBas.initDetail.areaList ); - const [query, setQuery] = useState(''); - const [searchRes, setSearchRes] = useState([]); - const [isSearch, setIsSearch] = useState(false); - const [number, setNumber] = useState(0); const [detailLayer, setDetailLayer] = useState(); @@ -192,6 +180,7 @@ export default function LaancAreaMap({ centeredModal, mapContainer }) { }); map.dragRotate.disable(); + // map.doubleClickZoom.disable(); const language = new MapboxLanguage(); map.addControl(language); @@ -205,6 +194,10 @@ export default function LaancAreaMap({ centeredModal, mapContainer }) { } )); + map.on('contextmenu', function (e) { + e.preventDefault(); + }); + map.on('style.load', () => { // 김포 3d 공역 map.addLayer({ @@ -251,48 +244,6 @@ export default function LaancAreaMap({ centeredModal, mapContainer }) { dispatch(mapInitAction(map)); }; - // 지역 검색 - 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); - }; - const handlerDrawType = val => { dispatch(drawTypeChangeAction(val)); }; @@ -343,63 +294,7 @@ export default function LaancAreaMap({ centeredModal, mapContainer }) {
- {/* 지도 검색 */} -
-
- - - - - - - - -
-
    - {searchRes?.length !== 0 && isSearch ? ( - searchRes?.map(search => { - const title = search.title - .replaceAll('', '') - .replaceAll('', ''); - - return ( -
  • - handlerSearchCoord(search.mapx, search.mapy) - } - > - -
    -
    - - {title} - -
    -
    - {search.roadAddress} -
    -
    -     -
    • - ); - }) - ) : ( - <> - )} -
-
-
-
+
{isMapLoad && mapObject ? ( <> -