map draw 초기값 셋팅 기능 utils 이동

src/components/laanc/map/LaancMap.js

@@ -4,15 +4,10 @@ import { useDispatch, useSelector } from '@src/redux/store';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import mapboxgl from 'mapbox-gl';
 import MapboxLanguage from '@mapbox/mapbox-gl-language';
-import MapboxDraw from '@mapbox/mapbox-gl-draw';
+
-import {
-  CircleMode,
-  DragCircleMode,
-  DirectMode,
-  SimpleSelectMode
-} from 'mapbox-gl-draw-circle';
 import { MAPBOX_TOKEN } from '../../../configs/constants';
 import threebox from 'threebox-plugin';
+import { getDraw } from '@src/utility/MapUtils';
 // mapUtils
 import {
   InitFeature,
@@ -95,98 +90,7 @@ export default function LaancMap({ page, handleChange, data }) {
       attributionControl: false
     });
 
-    // 비행구역 상세맵 draw 정보 셋팅
+    setDrawObj(getDraw());
-    const draw = new MapboxDraw({
-      displayControlsDefault: false,
-      userProperties: true,
-      boxSelect: false,
-      modes: {
-        ...MapboxDraw.modes,
-        draw_circle: CircleMode,
-        drag_circle: DragCircleMode,
-        direct_select: DirectMode,
-        simple_select: SimpleSelectMode
-      },
-      styles: [
-        {
-          // polyline
-          id: 'gl-draw-line',
-          type: 'line',
-          filter: [
-            'all',
-            ['==', '$type', 'LineString'],
-            ['!=', 'mode', 'static']
-          ],
-          layout: {
-            'line-cap': 'round',
-            'line-join': 'round'
-          },
-          paint: {
-            'line-color': '#8a1c05',
-            'line-dasharray': [0.2, 2],
-            'line-width': 2
-          }
-        },
-        {
-          // polygon fill
-          id: 'gl-draw-polygon-fill',
-          type: 'fill',
-          filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
-          paint: {
-            'fill-color': '#8a1c05',
-            'fill-outline-color': '#8a1c05',
-            'fill-opacity': 0.1
-          }
-        },
-        // polygon outline
-        {
-          id: 'gl-draw-polygon-stroke-active',
-          type: 'line',
-          filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
-          layout: {
-            'line-cap': 'round',
-            'line-join': 'round'
-          },
-          paint: {
-            'line-color': '#8a1c05',
-            'line-dasharray': [0.2, 2],
-            'line-width': 2
-          }
-        },
-        {
-          // vertex point halos
-          id: 'gl-draw-polygon-and-line-vertex-halo-active',
-          type: 'circle',
-          filter: [
-            'all',
-            ['==', 'meta', 'vertex'],
-            ['==', '$type', 'Point'],
-            ['!=', 'mode', 'static']
-          ],
-          paint: {
-            'circle-radius': 8,
-            'circle-color': '#ffffff'
-          }
-        },
-        {
-          // vertex points
-          id: 'gl-draw-polygon-and-line-vertex-active',
-          type: 'circle',
-          filter: [
-            'all',
-            ['==', 'meta', 'vertex'],
-            ['==', '$type', 'Point'],
-            ['!=', 'mode', 'static']
-          ],
-          paint: {
-            'circle-radius': 6,
-            'circle-color': '#8a1c05'
-          }
-        }
-      ]
-    });
-
-    setDrawObj(draw);
     map.dragRotate.disable();
 
     const language = new MapboxLanguage();

src/utility/MapUtils.js

@@ -1,5 +1,12 @@
 import * as turf from '@turf/turf';
 import mapboxgl from 'mapbox-gl';
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import {
+  CircleMode,
+  DragCircleMode,
+  DirectMode,
+  SimpleSelectMode
+} from 'mapbox-gl-draw-circle';
 import 'mapbox-gl/dist/mapbox-gl.css';
 
 // v월드 공역
@@ -467,3 +474,95 @@ export const flightlayerBuffer = source => {
     filter: ['==', ['get', 'id'], 'buffer']
   };
 };
+
+// 비행구역 상세맵 draw 정보 셋팅
+export const getDraw = () =>
+  new MapboxDraw({
+    displayControlsDefault: false,
+    userProperties: true,
+    boxSelect: false,
+    modes: {
+      ...MapboxDraw.modes,
+      draw_circle: CircleMode,
+      drag_circle: DragCircleMode,
+      direct_select: DirectMode,
+      simple_select: SimpleSelectMode
+    },
+    styles: [
+      {
+        // polyline
+        id: 'gl-draw-line',
+        type: 'line',
+        filter: [
+          'all',
+          ['==', '$type', 'LineString'],
+          ['!=', 'mode', 'static']
+        ],
+        layout: {
+          'line-cap': 'round',
+          'line-join': 'round'
+        },
+        paint: {
+          'line-color': '#8a1c05',
+          'line-dasharray': [0.2, 2],
+          'line-width': 2
+        }
+      },
+      {
+        // polygon fill
+        id: 'gl-draw-polygon-fill',
+        type: 'fill',
+        filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
+        paint: {
+          'fill-color': '#8a1c05',
+          'fill-outline-color': '#8a1c05',
+          'fill-opacity': 0.1
+        }
+      },
+      // polygon outline
+      {
+        id: 'gl-draw-polygon-stroke-active',
+        type: 'line',
+        filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
+        layout: {
+          'line-cap': 'round',
+          'line-join': 'round'
+        },
+        paint: {
+          'line-color': '#8a1c05',
+          'line-dasharray': [0.2, 2],
+          'line-width': 2
+        }
+      },
+      {
+        // vertex point halos
+        id: 'gl-draw-polygon-and-line-vertex-halo-active',
+        type: 'circle',
+        filter: [
+          'all',
+          ['==', 'meta', 'vertex'],
+          ['==', '$type', 'Point'],
+          ['!=', 'mode', 'static']
+        ],
+        paint: {
+          'circle-radius': 8,
+          'circle-color': '#ffffff'
+        }
+      },
+      {
+        // vertex points
+        id: 'gl-draw-polygon-and-line-vertex-active',
+        type: 'circle',
+        filter: [
+          'all',
+          ['==', 'meta', 'vertex'],
+          ['==', '$type', 'Point'],
+          ['!=', 'mode', 'static']
+        ],
+        paint: {
+          'circle-radius': 6,
+          'circle-color': '#8a1c05'
+        }
+      }
+    ]
+  });