laanc draw test code

12 months ago · fac6000449
4 changed files with 308 additions and 9 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -2013,15 +2013,34 @@
        }
      }
    },
+    "@mapbox/geojsonhint": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojsonhint/-/geojsonhint-2.2.0.tgz",
+      "integrity": "sha512-8qQYRB+/2z2JsN5s6D0WAnpo69+3V3nvJsSFLwMB1dsaWz1V4oZeuoje9srbYAxxL8PXCwIywfhYa3GxOkBv5Q==",
+      "requires": {
+        "concat-stream": "^1.6.1",
+        "jsonlint-lines": "1.7.1",
+        "minimist": "1.2.0",
+        "vfile": "^4.0.0",
+        "vfile-reporter": "^5.1.1"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha512-7Wl+Jz+IGWuSdgsQEJ4JunV0si/iMhg42MnQQG6h1R6TNeVenp4U9x5CC5v/gYqz/fENLQITAWXidNtVL0NNbw=="
+        }
+      }
+    },
    "@mapbox/jsonlint-lines-primitives": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ=="
    },
    "@mapbox/mapbox-gl-draw": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-draw/-/mapbox-gl-draw-1.4.2.tgz",
-      "integrity": "sha512-Zvl5YN+tIuYZlzPmuzOgkoJsZX6sHMQsnFI+O3ox8EwYkpLO2w0U2FvVhQuVnq1Yys12x6UnF+0IPoEdBy2UfA==",
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-draw/-/mapbox-gl-draw-1.4.3.tgz",
+      "integrity": "sha512-03qIJgyGmm0IoTZbV/cfODru9jRGogi4LcQ3maxIJDKccq1gY3ofgt2UYPkeU143ElxitZahEythNQv1NpsLhg==",
      "requires": {
        "@mapbox/geojson-area": "^0.2.2",
        "@mapbox/geojson-extent": "^1.0.1",
@ -3968,6 +3987,11 @@
        }
      }
    },
+    "@types/unist": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.8.tgz",
+      "integrity": "sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw=="
+    },
    "@types/webpack": {
      "version": "4.41.30",
      "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.30.tgz",
@ -4736,6 +4760,11 @@
      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
    },
+    "JSV": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/JSV/-/JSV-4.0.2.tgz",
+      "integrity": "sha512-ZJ6wx9xaKJ3yFUhq5/sk82PJMuUyLk277I8mQeyDgCTjGdjWJIvPfaU5LIXaMuaN2UO1X3kZH4+lgphublZUHw=="
+    },
    "abab": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
@ -10753,6 +10782,11 @@
        }
      }
    },
+    "has-color": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/has-color/-/has-color-0.1.7.tgz",
+      "integrity": "sha512-kaNz5OTAYYmt646Hkqw50/qyxP2vFnTVu5AQ1Zmk22Kk5+4Qx6BpO8+u7IKsML5fOsFk0ZT0AcCJNYwcvaLBvw=="
+    },
    "has-cors": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
@ -12739,6 +12773,15 @@
        "graceful-fs": "^4.1.6"
      }
    },
+    "jsonlint-lines": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/jsonlint-lines/-/jsonlint-lines-1.7.1.tgz",
+      "integrity": "sha512-Xp9w20GzfOiwabOqi3bH4Gnx85WFwpaWebmaspaDwX9fBISlEnKYoMtIR9bu6OGFIKzt50BRVyXLxRKDZXQ8Hg==",
+      "requires": {
+        "JSV": ">= 4.0.x",
+        "nomnom": ">= 1.5.x"
+      }
+    },
    "jsonwebtoken": {
      "version": "8.5.1",
      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz",
@ -13252,6 +13295,80 @@
        "vt-pbf": "^3.1.3"
      }
    },
+    "mapbox-gl-draw-circle": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/mapbox-gl-draw-circle/-/mapbox-gl-draw-circle-1.1.2.tgz",
+      "integrity": "sha512-IDtCGwxFD+DOWDIo+GBiL2yvb8fBeKcPJtY1QnyrbR9dPZrr8A5p7LVbAqPNzZ+nKZwfprKFsNlz4AzmRgyh2g==",
+      "requires": {
+        "@mapbox/mapbox-gl-draw": "1.1.1",
+        "@turf/along": "^6.0.1",
+        "@turf/circle": "^6.0.1",
+        "@turf/distance": "^6.0.1",
+        "@turf/helpers": "^6.1.4",
+        "@turf/length": "^6.0.2"
+      },
+      "dependencies": {
+        "@mapbox/geojson-coords": {
+          "version": "0.0.0",
+          "resolved": "https://registry.npmjs.org/@mapbox/geojson-coords/-/geojson-coords-0.0.0.tgz",
+          "integrity": "sha512-xCFWhmHWlfthXqZtgip0QqgERIPrwx2EdayDn4VQYYpICEdiIs92SdG/ojYZwaxXGa+fOgcVOuKvSxzdtu3rfA==",
+          "requires": {
+            "@mapbox/geojson-normalize": "0.0.1",
+            "geojson-flatten": "~0.2.1"
+          }
+        },
+        "@mapbox/geojson-extent": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/@mapbox/geojson-extent/-/geojson-extent-0.3.2.tgz",
+          "integrity": "sha512-Wl2al5bU7eYedc0c6SG2Pmfkj2iX3eVj2xUa8RAsR/0iFMiHX4n2j5aHus0EpJVc8T34jr8xWJSjWYVR1oNDMw==",
+          "requires": {
+            "@mapbox/extent": "0.4.0",
+            "@mapbox/geojson-coords": "0.0.0",
+            "rw": "~0.1.4",
+            "traverse": "~0.6.6"
+          }
+        },
+        "@mapbox/mapbox-gl-draw": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-draw/-/mapbox-gl-draw-1.1.1.tgz",
+          "integrity": "sha512-Xg+R0VUXKdXC7MaSSMiWfz96eLssJZa28/D6MxK/Xc19G5HvU6w/wytm8EeI28T7Sa2C7FII/0/XOwuAfJgDJw==",
+          "requires": {
+            "@mapbox/geojson-area": "^0.2.1",
+            "@mapbox/geojson-extent": "^0.3.2",
+            "@mapbox/geojson-normalize": "0.0.1",
+            "@mapbox/geojsonhint": "^2.0.0",
+            "@mapbox/point-geometry": "0.1.0",
+            "hat": "0.0.3",
+            "lodash.isequal": "^4.2.0",
+            "xtend": "^4.0.1"
+          }
+        },
+        "geojson-flatten": {
+          "version": "0.2.4",
+          "resolved": "https://registry.npmjs.org/geojson-flatten/-/geojson-flatten-0.2.4.tgz",
+          "integrity": "sha512-LiX6Jmot8adiIdZ/fthbcKKPOfWjTQchX/ggHnwMZ2e4b0I243N1ANUos0LvnzepTEsj0+D4fIJ5bKhBrWnAHA==",
+          "requires": {
+            "get-stdin": "^6.0.0",
+            "minimist": "1.2.0"
+          }
+        },
+        "get-stdin": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
+          "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g=="
+        },
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha512-7Wl+Jz+IGWuSdgsQEJ4JunV0si/iMhg42MnQQG6h1R6TNeVenp4U9x5CC5v/gYqz/fENLQITAWXidNtVL0NNbw=="
+        },
+        "rw": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/rw/-/rw-0.1.4.tgz",
+          "integrity": "sha512-vSj3D96kMcjNyqPcp65wBRIDImGSrUuMxngNNxvw8MQaO+aQ6llzRPH7XcJy5zrpb3wU++045+Uz/IDIM684iw=="
+        }
+      }
+    },
    "marker-clusterer-plus": {
      "version": "2.1.4",
      "resolved": "https://registry.npmjs.org/marker-clusterer-plus/-/marker-clusterer-plus-2.1.4.tgz",
@ -14039,6 +14156,37 @@
        }
      }
    },
+    "nomnom": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/nomnom/-/nomnom-1.8.1.tgz",
+      "integrity": "sha512-5s0JxqhDx9/rksG2BTMVN1enjWSvPidpoSgViZU4ZXULyTe+7jxcCRLB6f42Z0l1xYJpleCBtSyY6Lwg3uu5CQ==",
+      "requires": {
+        "chalk": "~0.4.0",
+        "underscore": "~1.6.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.0.0.tgz",
+          "integrity": "sha512-3iF4FIKdxaVYT3JqQuY3Wat/T2t7TRbbQ94Fu50ZUCbLy4TFbTzr90NOHQodQkNqmeEGCw8WbeP78WNi6SKYUA=="
+        },
+        "chalk": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.4.0.tgz",
+          "integrity": "sha512-sQfYDlfv2DGVtjdoQqxS0cEZDroyG8h6TamA6rvxwlrU5BaSLDx9xhatBYl2pxZ7gmpNaPFVwBtdGdu5rQ+tYQ==",
+          "requires": {
+            "ansi-styles": "~1.0.0",
+            "has-color": "~0.1.0",
+            "strip-ansi": "~0.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.1.1.tgz",
+          "integrity": "sha512-behete+3uqxecWlDAm5lmskaSaISA+ThQ4oNNBDTBJt0x2ppR6IPqfZNuj6BLaLJ/Sji4TPZlcRyOis8wXQTLg=="
+        }
+      }
+    },
    "nopt": {
      "version": "3.0.6",
      "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
@ -25421,6 +25569,11 @@
        "which-boxed-primitive": "^1.0.2"
      }
    },
+    "underscore": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
+      "integrity": "sha512-z4o1fvKUojIWh9XuaVLUDdf86RQiq13AC1dmHbTpoyuu+bquHms76v16CjycCbec87J7z0k//SiQVk0sMdFmpQ=="
+    },
    "unicode-canonical-property-names-ecmascript": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@ -25490,6 +25643,14 @@
        "crypto-random-string": "^1.0.0"
      }
    },
+    "unist-util-stringify-position": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+      "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+      "requires": {
+        "@types/unist": "^2.0.2"
+      }
+    },
    "universalify": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@ -25760,6 +25921,91 @@
        "extsprintf": "^1.2.0"
      }
    },
+    "vfile": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz",
+      "integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==",
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "is-buffer": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0",
+        "vfile-message": "^2.0.0"
+      }
+    },
+    "vfile-message": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
+      "integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0"
+      }
+    },
+    "vfile-reporter": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/vfile-reporter/-/vfile-reporter-5.1.2.tgz",
+      "integrity": "sha512-b15sTuss1wOPWVlyWOvu+n6wGJ/eTYngz3uqMLimQvxZ+Q5oFQGYZZP1o3dR9sk58G5+wej0UPCZSwQBX/mzrQ==",
+      "requires": {
+        "repeat-string": "^1.5.0",
+        "string-width": "^2.0.0",
+        "supports-color": "^5.0.0",
+        "unist-util-stringify-position": "^2.0.0",
+        "vfile-sort": "^2.1.2",
+        "vfile-statistics": "^1.1.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
+          "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw=="
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w=="
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "requires": {
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "vfile-sort": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/vfile-sort/-/vfile-sort-2.2.2.tgz",
+      "integrity": "sha512-tAyUqD2R1l/7Rn7ixdGkhXLD3zsg+XLAeUDUhXearjfIcpL1Hcsj5hHpCoy/gvfK/Ws61+e972fm0F7up7hfYA=="
+    },
+    "vfile-statistics": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/vfile-statistics/-/vfile-statistics-1.1.4.tgz",
+      "integrity": "sha512-lXhElVO0Rq3frgPvFBwahmed3X03vjPF8OcjKMy8+F1xU/3Q3QU3tKEDp743SFtb74PdF0UWpxPvtOP0GCLheA=="
+    },
    "vm-browserify": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
--- a/package.json
+++ b/package.json
@ -13,7 +13,7 @@
    "@fullcalendar/timegrid": "5.7.2",
    "@fullcalendar/timeline": "5.7.2",
    "@hookform/resolvers": "1.3.4",
-    "@mapbox/mapbox-gl-draw": "^1.4.2",
+    "@mapbox/mapbox-gl-draw": "1.4.3",
    "@mapbox/mapbox-gl-language": "1.0.1",
    "@stomp/stompjs": "^6.1.0",
    "@turf/buffer": "^6.5.0",
@ -58,6 +58,7 @@
    "jwt-decode": "^3.1.2",
    "leaflet": "1.6.0",
    "mapbox-gl": "^2.15.0",
+    "mapbox-gl-draw-circle": "1.1.2",
    "moment": "2.29.1",
    "nouislider": "14.6.2",
    "nouislider-react": "3.3.8",
--- a/src/views/laanc/FlightArea.js
+++ b/src/views/laanc/FlightArea.js
@ -3,6 +3,13 @@ import mapboxgl from 'mapbox-gl';
 import threebox from 'threebox-plugin';
 import * as turf from '@turf/turf';
 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 { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@ -50,6 +57,7 @@ export default function FlightArea({

  const mapContainer = useRef(null);
  const [mapObject, setMapObject] = useState();
+  const [drawObj, setDrawObj] = useState();
  const [isMapLoad, setIsMapLoad] = useState(false);
  const [previewLayer, setPreviewLayer] = useState();
  const [formModal, setFormModal] = useState(false);
@ -205,6 +213,20 @@ export default function FlightArea({
      attributionControl: false
    });

+    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
+      }
+    });
+
+    setDrawObj(draw);
    map.dragRotate.disable();

    const language = new MapboxLanguage();
@ -408,29 +430,45 @@ export default function FlightArea({
            <LaancAreaMap
              centeredModal={centeredModal}
              mapContainer={mapContainer}
+              drawObj={drawObj}
            />
          </ModalBody>
          <ModalFooter>
            <div className='laanc-map-btn'>
              <div className='laanc-point'>
-                <Button color='primary' onClick={() => handlerDrawType('LINE')}>
+                <Button
+                  color='primary'
+                  onClick={() => {
+                    // handlerDrawType('LINE');
+                    drawObj.changeMode('draw_line_string');
+                  }}
+                >
                  WayPoint
                </Button>
                <Button
                  color='primary'
-                  onClick={() => handlerDrawType('CIRCLE')}
+                  onClick={() => {
+                    // handlerDrawType('CIRCLE');
+                    drawObj.changeMode('drag_circle');
+                  }}
                >
                  Circle
                </Button>
                <Button
                  color='primary'
-                  onClick={() => handlerDrawType('POLYGON')}
+                  onClick={() => {
+                    // handlerDrawType('POLYGON');
+                    drawObj.changeMode('draw_polygon');
+                  }}
                >
                  Polygon
                </Button>
                <Button
                  color='primary'
-                  onClick={() => handlerDrawType('RESET')}
+                  onClick={() => {
+                    // handlerDrawType('RESET');
+                    drawObj.deleteAll();
+                  }}
                >
                  초기화
                </Button>
--- a/src/views/laanc/LaancAreaMap.js
+++ b/src/views/laanc/LaancAreaMap.js
@ -33,7 +33,7 @@ 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 }) {
+export default function LaancAreaMap({ centeredModal, mapContainer, drawObj }) {
  const dispatch = useDispatch();
  const mapControl = useSelector(state => state.controlMapReducer);
  const { areaCoordList } = useSelector(state => state.flightState);
@ -187,6 +187,7 @@ export default function LaancAreaMap({ centeredModal, mapContainer }) {

    const language = new MapboxLanguage();
    map.addControl(language);
+    map.addControl(drawObj);

    const tb = (window.tb = new threebox.Threebox(
      map,
@ -197,6 +198,19 @@ export default function LaancAreaMap({ centeredModal, mapContainer }) {
      }
    ));

+    // 사용자가 비행구역 설정 드로우 완성시 실행됨
+    map.on('draw.create', e => {
+      console.log(drawObj.getAll());
+    });
+    // 수정할때
+    map.on('draw.update', e => {
+      console.log(drawObj.getAll());
+    });
+    // 삭제할때
+    map.on('draw.delete', e => {
+      console.log(drawObj.getAll());
+    });
+
    map.on('contextmenu', function (e) {
      e.preventDefault();
    });