파일명 수정

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();
       }

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 (
+    <div className='d-flex search-comp absolute'>
+      <div className=''>
+        <InputGroup className='search-feather'>
+          <InputGroupAddon addonType='prepend'>
+            <InputGroupText>
+              <Search size={14} onClick={handlerSearchRes} />
+            </InputGroupText>
+          </InputGroupAddon>
+          <Input
+            type='text'
+            id='searchInput'
+            name='searchInput'
+            size='sm'
+            autoComplete='off'
+            placeholder='검색명을 입력하세요.'
+            onChange={handlerSearchChange}
+            onKeyPress={handlerSearchEnter}
+          />
+        </InputGroup>
+        <div className='search-result-comp'>
+          <ul>
+            {searchRes?.length !== 0 && isSearch ? (
+              searchRes?.map(search => {
+                const title = search.title
+                  .replaceAll('<b>', '')
+                  .replaceAll('</b>', '');
+
+                return (
+                  <li
+                    key={search.mapx + search.mapy}
+                    onClick={() => handlerSearchCoord(search.mapx, search.mapy)}
+                  >
+                    <a>
+                      <div className='search-result'>
+                        <div className='title'>
+                          <span>
+                            <strong>{title}</strong>
+                          </span>
+                        </div>
+                        <div className='address'>
+                          <span>{search.roadAddress}</span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                );
+              })
+            ) : (
+              <></>
+            )}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}

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 {

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 {
+import { Card, CardBody } from 'reactstrap';
-  Card,
-  CardBody,
-  Input,
-  InputGroup,
-  InputGroupAddon,
-  InputGroupText
-} from 'reactstrap';
-import { Search } from 'react-feather';
 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 { LaancDraw } from '../../components/map/mapbox/draw/LaancDraw';
-import { LanncDraw } from '../../components/map/mapbox/draw/LanncDraw';
 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 }) {
     <Card className='mb-0'>
       <CardBody>
         <div style={{ position: 'relative' }}>
-          {/* 지도 검색 */}
+          <LaancMapSearch mapObject={mapObject} />
-          <div className='d-flex search-comp absolute'>
-            <div className=''>
-              <InputGroup className='search-feather'>
-                <InputGroupAddon addonType='prepend'>
-                  <InputGroupText>
-                    <Search size={14} onClick={handlerSearchRes} />
-                  </InputGroupText>
-                </InputGroupAddon>
-                <Input
-                  type='text'
-                  id='searchInput'
-                  name='searchInput'
-                  size='sm'
-                  autoComplete='off'
-                  placeholder='검색명을 입력하세요.'
-                  onChange={handlerSearchChange}
-                  onKeyPress={handlerSearchEnter}
-                />
-              </InputGroup>
-              <div className='search-result-comp'>
-                <ul>
-                  {searchRes?.length !== 0 && isSearch ? (
-                    searchRes?.map(search => {
-                      const title = search.title
-                        .replaceAll('<b>', '')
-                        .replaceAll('</b>', '');
-
-                      return (
-                        <li
-                          key={search.mapx + search.mapy}
-                          onClick={() =>
-                            handlerSearchCoord(search.mapx, search.mapy)
-                          }
-                        >
-                          <a>
-                            <div className='search-result'>
-                              <div className='title'>
-                                <span>
-                                  <strong>{title}</strong>
-                                </span>
-                              </div>
-                              <div className='address'>
-                                <span>{search.roadAddress}</span>
-                              </div>
-                            </div>
-                          </a>
-                        </li>
-                      );
-                    })
-                  ) : (
-                    <></>
-                  )}
-                </ul>
-              </div>
-            </div>
-          </div>
           <div
             id='detail'
             ref={mapContainer}
@@ -407,7 +302,7 @@ export default function LaancAreaMap({ centeredModal, mapContainer }) {
           ></div>
           {isMapLoad && mapObject ? (
             <>
-              <LanncDraw
+              <LaancDraw
                 mapObject={mapObject}
                 mapboxgl={mapboxgl}
                 mode={mode}