laanc 비행구역 선택구간 좌표 표출(임시 css)

src/components/map/mapbox/draw/LaancDrawControl.js

@@ -5,7 +5,8 @@ import {
   CalculateDistance,
   handlerGetCircleCoord,
   handlerGetHtmlContent,
-  handlerGetMidPoint
+  handlerGetMidPoint,
+  handlerReturnMode
 } from '../../../../utility/DrawUtil';
 import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions';
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
@@ -93,10 +94,10 @@ export const LaancDrawControl = props => {
     const obj = state[type?.toLowerCase()];
 
     if (type && obj) {
+      const feature = drawObj.get(obj.id);
+      const coordinates = feature.geometry.coordinates;
       if (type !== 'CIRCLE') {
         if (state.currentVertexPosition > 1) {
-          const feature = drawObj.get(obj.id);
-          const coordinates = feature.geometry.coordinates;
           const coords = [
             ...new Set(
               type === 'LINE'
@@ -118,6 +119,7 @@ export const LaancDrawControl = props => {
             obj.id
           );
         }
+        props.setCoordArr(prev => [...prev, [e.lngLat.lng, e.lngLat.lat]]);
       }
     }
   };
@@ -200,6 +202,8 @@ export const LaancDrawControl = props => {
           coord: initCoord,
           id: obj.id
         };
+
+        props.setCoordArr(mode === 'LINE' ? initCoord : initCoord[0]);
         handlerRemoveGroupMarker(obj.id);
         handlerCreateGroupMarker(data, mode);
         handlerAbnormalityCheck(data, mode);
@@ -321,7 +325,7 @@ export const LaancDrawControl = props => {
 
   const handlerPastDraw = () => {
     if (props.areaCoordList) {
-      const obj = drawObj.getAll().features;
+      const obj = drawObj?.getAll().features;
       const areas = props.areaCoordList;
       if (areas.length > 0 && obj.length > 0) {
         // areas -> 지도에 그려진 모든 구역 정보여야함
@@ -445,6 +449,7 @@ export const LaancDrawControl = props => {
       props.handlerInitCoordinates();
     }
 
+    props.setCoordArr([]);
     const mode = mapControl.drawType;
     if (!mode || mode === 'RESET') {
       props.handlerAddChange('isAddable', false);
@@ -474,12 +479,5 @@ export const LaancDrawControl = props => {
     }
   };
 
-  // drawMode에 따른 drawType 매칭
-  const handlerReturnMode = mode => {
-    if (mode.includes('line') || mode.includes('Line')) return 'LINE';
-    if (mode.includes('polygon') || mode.includes('Polygon')) return 'POLYGON';
-    if (mode.includes('circle') || mode.includes('Circle')) return 'CIRCLE';
-  };
-
   return <InfoModal modal={alertModal} setModal={setAlertModal} />;
 };

src/utility/DrawUtil.js

@@ -111,6 +111,13 @@ export const handlerFitBounds = (map, paths, padding, type) => {
   map.fitBounds(bounds, { padding: padding });
 };
 
+// drawMode에 따른 drawType 매칭
+export const handlerReturnMode = mode => {
+  if (mode.includes('line') || mode.includes('Line')) return 'LINE';
+  if (mode.includes('polygon') || mode.includes('Polygon')) return 'POLYGON';
+  if (mode.includes('circle') || mode.includes('Circle')) return 'CIRCLE';
+};
+
 // draw 레이어
 export const layerWayPoint = source => {
   return {

src/views/laanc/LaancAreaMap.js

@@ -56,6 +56,7 @@ export default function LaancAreaMap({
   const [modal, setModal] = useState(false);
 
   const [detailLayer, setDetailLayer] = useState();
+  const [coordArr, setCoordArr] = useState([]);
 
   const detailGeo = useMemo(() => {
     return {
@@ -313,6 +314,29 @@ export default function LaancAreaMap({
       <CardBody>
         <div style={{ position: 'relative' }}>
           <LaancMapSearch mapObject={mapObject} />
+          <div
+            className='d-flex absolute'
+            style={{
+              position: 'relative',
+              zIndex: 100,
+              margin: '400px 10px 10px 10px'
+            }}
+          >
+            {mapObject ? (
+              <div style={{ width: '400px' }}>
+                <div style={{ backgroundColor: '#fff' }}>
+                  {/* <div>좌표위치</div> */}
+                  {coordArr.length > 0
+                    ? coordArr.map(coord => (
+                        <div>
+                          {coord[0]} | {coord[1]}
+                        </div>
+                      ))
+                    : null}
+                </div>
+              </div>
+            ) : null}
+          </div>
           <div
             id='detail'
             ref={mapContainer}
@@ -355,6 +379,7 @@ export default function LaancAreaMap({
                 handlerSaveCheck={handlerSaveCheck}
                 handlerCoordinates={handlerCoordinates}
                 handlerInitCoordinates={handlerInitCoordinates}
+                setCoordArr={setCoordArr}
               />
               <FeatureAirZone map={mapObject} mapboxgl={mapboxgl} />
               {modal ? (