From fac6000449b7c7074dc1751c159ddc63adb2e7db Mon Sep 17 00:00:00 2001 From: JANGHYUNn Date: Wed, 11 Oct 2023 11:19:08 +0900 Subject: [PATCH] laanc draw test code --- package-lock.json | 252 +++++++++++++++++++++++++++++++- package.json | 3 +- src/views/laanc/FlightArea.js | 46 +++++- src/views/laanc/LaancAreaMap.js | 16 +- 4 files changed, 308 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4318faf2..42465494 100644 --- 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", diff --git a/package.json b/package.json index 15e4b837..ad4920e8 100644 --- 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", diff --git a/src/views/laanc/FlightArea.js b/src/views/laanc/FlightArea.js index 1a8447d5..c377e678 100644 --- 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({
- diff --git a/src/views/laanc/LaancAreaMap.js b/src/views/laanc/LaancAreaMap.js index ed499718..f9cfb2ee 100644 --- 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(); });