diff --git a/package-lock.json b/package-lock.json index d3cf2066..d0fff620 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1947,6 +1947,65 @@ "chalk": "^4.0.0" } }, + "@mapbox/geojson-rewind": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz", + "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==", + "requires": { + "get-stream": "^6.0.1", + "minimist": "^1.2.6" + }, + "dependencies": { + "get-stream": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz", + "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==" + }, + "minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==" + } + } + }, + "@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-supported": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz", + "integrity": "sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ==" + }, + "@mapbox/point-geometry": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz", + "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==" + }, + "@mapbox/tiny-sdf": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz", + "integrity": "sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA==" + }, + "@mapbox/unitbezier": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz", + "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==" + }, + "@mapbox/vector-tile": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz", + "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==", + "requires": { + "@mapbox/point-geometry": "~0.1.0" + } + }, + "@mapbox/whoots-js": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz", + "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==" + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -3817,6 +3876,14 @@ "@types/node": "*" } }, + "@types/supercluster": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-5.0.3.tgz", + "integrity": "sha512-XMSqQEr7YDuNtFwSgaHHOjsbi0ZGL62V9Js4CW45RBuRYlNWSW/KDqN+RFFE7HdHcGhJPtN0klKvw06r9Kg7rg==", + "requires": { + "@types/geojson": "*" + } + }, "@types/tapable": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz", @@ -7439,6 +7506,11 @@ "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz", "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==" }, + "csscolorparser": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz", + "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==" + }, "cssdb": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz", @@ -10351,6 +10423,11 @@ "rbush": "^3.0.1" } }, + "geojson-vt": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz", + "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==" + }, "get-caller-file": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", @@ -10409,6 +10486,11 @@ "assert-plus": "^1.0.0" } }, + "gl-matrix": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz", + "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==" + }, "glob": { "version": "7.1.7", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", @@ -10506,6 +10588,11 @@ "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz", "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==" }, + "grid-index": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz", + "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==" + }, "growly": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz", @@ -12667,6 +12754,11 @@ "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz", "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==" }, + "kdbush": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz", + "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==" + }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -13042,6 +13134,35 @@ "object-visit": "^1.0.0" } }, + "mapbox-gl": { + "version": "2.15.0", + "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.15.0.tgz", + "integrity": "sha512-fjv+aYrd5TIHiL7wRa+W7KjtUqKWziJMZUkK5hm8TvJ3OLeNPx4NmW/DgfYhd/jHej8wWL+QJBDbdMMAKvNC0A==", + "requires": { + "@mapbox/geojson-rewind": "^0.5.2", + "@mapbox/jsonlint-lines-primitives": "^2.0.2", + "@mapbox/mapbox-gl-supported": "^2.0.1", + "@mapbox/point-geometry": "^0.1.0", + "@mapbox/tiny-sdf": "^2.0.6", + "@mapbox/unitbezier": "^0.0.1", + "@mapbox/vector-tile": "^1.3.1", + "@mapbox/whoots-js": "^3.1.0", + "csscolorparser": "~1.0.3", + "earcut": "^2.2.4", + "geojson-vt": "^3.2.1", + "gl-matrix": "^3.4.3", + "grid-index": "^1.1.0", + "kdbush": "^4.0.1", + "murmurhash-js": "^1.0.0", + "pbf": "^3.2.1", + "potpack": "^2.0.0", + "quickselect": "^2.0.0", + "rw": "^1.3.3", + "supercluster": "^8.0.0", + "tinyqueue": "^2.0.3", + "vt-pbf": "^3.1.3" + } + }, "marker-clusterer-plus": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/marker-clusterer-plus/-/marker-clusterer-plus-2.1.4.tgz", @@ -13490,6 +13611,11 @@ "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz", "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=" }, + "murmurhash-js": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz", + "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==" + }, "namespace-emitter": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/namespace-emitter/-/namespace-emitter-2.0.1.tgz", @@ -14364,6 +14490,15 @@ "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==" }, + "pbf": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz", + "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==", + "requires": { + "ieee754": "^1.1.12", + "resolve-protobuf-schema": "^2.1.0" + } + }, "pbkdf2": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz", @@ -20167,6 +20302,11 @@ "uniq": "^1.0.1" } }, + "potpack": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz", + "integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw==" + }, "preact": { "version": "10.5.14", "resolved": "https://registry.npmjs.org/preact/-/preact-10.5.14.tgz", @@ -20319,6 +20459,11 @@ "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.4.tgz", "integrity": "sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg==" }, + "protocol-buffers-schema": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz", + "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==" + }, "proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -21123,6 +21268,56 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-mapbox-gl": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/react-mapbox-gl/-/react-mapbox-gl-5.1.1.tgz", + "integrity": "sha512-8vGldFQf7pW8T5ZV2OOhwXoaBvfigB2F7dnhzaZ/bD5/KJzP9zprMbn0xMX95W3eqbKzGGHnwyD5DyTTwR6wGw==", + "requires": { + "@turf/bbox": "4.7.3", + "@turf/helpers": "4.7.3", + "@types/supercluster": "^5.0.1", + "deep-equal": "1.0.1", + "supercluster": "^7.0.0" + }, + "dependencies": { + "@turf/bbox": { + "version": "4.7.3", + "resolved": "https://registry.npmjs.org/@turf/bbox/-/bbox-4.7.3.tgz", + "integrity": "sha512-78lSzSQuLHq0363sVlmkX9uxBejeWGyZhQBAh7oc1ucnsYsem1m4ynjDXG8/hKP4nG/yUFWPdV9xklezKdvzKw==", + "requires": { + "@turf/meta": "^4.7.3" + } + }, + "@turf/helpers": { + "version": "4.7.3", + "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-4.7.3.tgz", + "integrity": "sha512-hk5ANVazb80zK6tjJYAG76oCRTWMQo6SAFu5E1dVnlb2kT3FHLoPcOB9P11duwDafMwywz24KZ+FUorB5e728w==" + }, + "@turf/meta": { + "version": "4.7.4", + "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-4.7.4.tgz", + "integrity": "sha512-cvwz4EI9BjrgRHxmJ3Z3HKxq6k/fj/V95kwNZ8uWNLncCvrb7x1jUBDkQUo1tShnYdZ8eBgA+a2bvJmAM+MJ0A==" + }, + "deep-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz", + "integrity": "sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw==" + }, + "kdbush": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz", + "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==" + }, + "supercluster": { + "version": "7.1.5", + "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.5.tgz", + "integrity": "sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==", + "requires": { + "kdbush": "^3.0.0" + } + } + } + }, "react-onclickoutside": { "version": "6.11.2", "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.11.2.tgz", @@ -22421,6 +22616,14 @@ "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" }, + "resolve-protobuf-schema": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz", + "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==", + "requires": { + "protocol-buffers-schema": "^3.3.1" + } + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -22775,6 +22978,11 @@ "aproba": "^1.1.1" } }, + "rw": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz", + "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==" + }, "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", @@ -23877,9 +24085,9 @@ } }, "splaytree": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/splaytree/-/splaytree-3.1.1.tgz", - "integrity": "sha512-9FaQ18FF0+sZc/ieEeXHt+Jw2eSpUgUtTLDYB/HXKWvhYVyOc7h1hzkn5MMO3GPib9MmXG1go8+OsBBzs/NMww==" + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/splaytree/-/splaytree-3.1.2.tgz", + "integrity": "sha512-4OM2BJgC5UzrhVnnJA4BkHKGtjXNzzUfpQjCO8I05xYPsfS/VuQDwjCGGMi8rYQilHEV4j8NBqTFbls/PZEE7A==" }, "split-string": { "version": "3.1.0", @@ -24295,6 +24503,14 @@ "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz", "integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==" }, + "supercluster": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz", + "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==", + "requires": { + "kdbush": "^4.0.2" + } + }, "supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -25417,6 +25633,16 @@ "resolved": "https://registry.npmjs.org/voc/-/voc-1.2.0.tgz", "integrity": "sha512-BOuDjFFYvJdZO6e/N65AlaDItXo2TgyLjeyRYcqgAPkXpp5yTJcvkL2n+syO1r9Qc5g96tfBD2tuiMhYDmaGcA==" }, + "vt-pbf": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz", + "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==", + "requires": { + "@mapbox/point-geometry": "0.1.0", + "@mapbox/vector-tile": "^1.3.1", + "pbf": "^3.2.1" + } + }, "w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", diff --git a/package.json b/package.json index 7b2acee2..95f2a30e 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "@hookform/resolvers": "1.3.4", "@stomp/stompjs": "^6.1.0", "@turf/buffer": "^6.5.0", - "@turf/turf": "^6.5.0", + "@turf/turf": "6.5.0", "@types/googlemaps": "^3.43.3", "@types/history": "^4.7.8", "@types/jest": "^26.0.23", diff --git a/src/components/map/MapControl.js b/src/components/map/MapControl.js index 8d792adf..993c7138 100644 --- a/src/components/map/MapControl.js +++ b/src/components/map/MapControl.js @@ -1,12 +1,12 @@ import React from 'react'; import { GoogleCustomMap } from './google/GoogleMap'; import { NaverCustomMap } from './naver/NaverMap'; -import MapBoxTest from './naver/MapBoxTest'; +import MapBoxMap from './mapbox/MapBoxMap'; export const MapControl = props => { return ( // <>{props.mapType === 'google' ? : } // - + ); }; diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js new file mode 100644 index 00000000..1100437f --- /dev/null +++ b/src/components/map/mapbox/MapBoxMap.js @@ -0,0 +1,622 @@ +import { MAPBOX_TOKEN } from '../../../configs/constants'; +import { useEffect, useState, useRef } from 'react'; +import { useSelector, useDispatch } from 'react-redux'; +// import { DronMarker } from './dron/DronMarker'; +// import { DronHistory } from './dron/DronHistory'; +// import NaverMapControl from './NaverMapControl'; +// import { NaverMapSearch } from './search/NaverMapSearch'; +import { FeatureAirZone } from './feature/FeatureAirZone'; +// import DronPlan from './dron/DronPlan'; +// import NewDronPlan from './dron/NewDronPlan'; +// import { NewDronHistory } from './dron/NewDronHistroy'; +// import DronToast from './dron/DronToast'; +// import SensorZone from './sensor/SensorZone'; +import 'mapbox-gl/dist/mapbox-gl.css'; +import mapboxgl from 'mapbox-gl'; + +// mapboxgl.accessToken = MAPBOX_TOKEN; +export default function MapBoxMap() { + // const mapContainer = useRef(null); + // const map = useRef(null); + // useEffect(() => { + // if (map.current) return; + // map.current = new mapboxgl.Map({ + // container: mapContainer.current, + // style: 'mapbox://styles/mapbox/streets-v12', + // center: [126.793722, 37.558522], + // zoom: 9 + // }); + // }); + + // return ( + //
+ //
+ //
+ // ); + const dispatch = useDispatch(); + const naver = window.naver; + + const [mapObject, setMapObject] = useState(null); + const [isMapLoaded, setMapLoaded] = useState(false); + const [arrPolyline, setArrPolyline] = useState([]); + const mapContainer = useRef(null); + + const uamPosition = { + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + properties: { + name: 'V1', + background: '#ffffff', + border: '#15298A', + spanColor: '#000000' + }, + geometry: { + type: 'Point', + coordinates: [126.540668, 37.4797865] + } + }, + { + type: 'Feature', + properties: { + name: 'V2', + background: '#ffffff', + border: '#15298A', + spanColor: '#000000' + }, + geometry: { + type: 'Point', + coordinates: [126.6107763, 37.521245] + } + }, + { + type: 'Feature', + properties: { + name: 'V3', + background: '#ffffff', + border: '#15298A', + spanColor: '#000000' + }, + geometry: { + type: 'Point', + coordinates: [126.6243464, 37.5642352] + } + }, + { + type: 'Feature', + properties: { + name: 'V4', + background: '#ffffff', + border: '#15298A', + spanColor: '#000000' + }, + geometry: { + type: 'Point', + coordinates: [126.6650669, 37.3658236] + } + }, + { + type: 'Feature', + properties: { + name: 'V5', + background: '#ffffff', + border: '#15298A', + spanColor: '#000000' + }, + geometry: { + type: 'Point', + coordinates: [126.7074861, 37.4520753] + } + }, + { + type: 'Feature', + properties: { + name: 'R1', + background: '#429629', + border: '#ffffff', + spanColor: '#ffffff' + }, + geometry: { + type: 'Point', + coordinates: [126.5801572, 37.492581] + } + }, + { + type: 'Feature', + properties: { + name: 'R2', + background: '#429629', + border: '#ffffff', + spanColor: '#ffffff' + }, + geometry: { + type: 'Point', + coordinates: [126.6036588, 37.542031] + } + }, + { + type: 'Feature', + properties: { + name: 'R3', + background: '#429629', + border: '#ffffff', + spanColor: '#ffffff' + }, + geometry: { + type: 'Point', + coordinates: [126.6005224, 37.5764269] + } + }, + { + type: 'Feature', + properties: { + name: 'R4', + background: '#429629', + border: '#ffffff', + spanColor: '#ffffff' + }, + geometry: { + type: 'Point', + coordinates: [126.6600404, 37.5790407] + } + }, + { + type: 'Feature', + properties: { + name: 'R5', + background: '#429629', + border: '#ffffff', + spanColor: '#ffffff' + }, + geometry: { + type: 'Point', + coordinates: [126.649562, 37.524016] + } + }, + { + type: 'Feature', + properties: { + name: 'R6', + background: '#429629', + border: '#ffffff', + spanColor: '#ffffff' + }, + geometry: { + type: 'Point', + coordinates: [126.693722, 37.5506488] + } + }, + { + type: 'Feature', + properties: { + name: 'R7', + background: '#429629', + border: '#ffffff', + spanColor: '#ffffff' + }, + geometry: { + type: 'Point', + coordinates: [126.6023981, 37.4712333] + } + }, + { + type: 'Feature', + properties: { + name: 'R8', + background: '#429629', + border: '#ffffff', + spanColor: '#ffffff' + }, + geometry: { + type: 'Point', + coordinates: [126.6202759, 37.4046495] + } + }, + { + type: 'Feature', + properties: { + name: 'R9', + background: '#429629', + border: '#ffffff', + spanColor: '#ffffff' + }, + geometry: { + type: 'Point', + coordinates: [126.6296542, 37.3450207] + } + } + ] + }; + + useEffect(() => { + NaverMapInit(); + }, []); + + useEffect(() => { + if (mapObject) { + uamPosition.features.map(uam => { + const el = document.createElement('div'); + const elChild = document.createElement('span'); + elChild.innerText = uam.properties.name; + elChild.style.color = uam.properties.spanColor; + el.className = 'marker'; + el.style.background = uam.properties.background; + el.style.borderRadius = '50%'; + el.style.border = `4px solid ${uam.properties.border}`; + el.style.padding = '5px'; + el.style.width = '40px'; + el.style.height = '40px'; + el.style.textAlign = 'center'; + el.appendChild(elChild); + + new mapboxgl.Marker(el) + .setLngLat(uam.geometry.coordinates) + .addTo(mapObject); + }); + } + }, [mapObject]); + let popup; + const NaverMapInit = () => { + mapboxgl.accessToken = MAPBOX_TOKEN; + // const mapOptions = { + // center: new naver.maps.LatLng(37.520357, 126.610166), + // // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547), + // // zoom: 10, + // zoom: 14, + // zoomControl: true, + // mapTypeId: naver.maps.MapTypeId.NORMAR, + // zoomControlOptions: { + // position: naver.maps.Position.TOP_LEFT, + + // style: naver.maps.ZoomControlStyle.SMALL + // } + // }; + const map = new mapboxgl.Map({ + container: 'map', // container ID + style: 'mapbox://styles/mapbox/streets-v12', // style URL + center: [127.85101412107547, 37.520357], // starting position [lng, lat] + zoom: 9 // starting zoom + }); + + map.on('load', () => { + const layers = map.getStyle().layers; + map.setLayoutProperty('country-label', 'text-field', ['get', `name_kr`]); + const labelLayerId = layers.find( + layer => layer.type === 'symbol' && layer.layout['text-field'] + ).id; + + // 지형 3d start + map.addSource('mapbox-dem', { + type: 'raster-dem', + url: 'mapbox://mapbox.mapbox-terrain-dem-v1', + tileSize: 512, + maxZoom: 16 + }); + map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 }); + map.addLayer({ + id: 'contour-labels', + type: 'symbol', + source: { + type: 'vector', + url: 'mapbox://mapbox.mapbox-terrain-v2' + }, + 'source-layer': 'contour', + layout: { + visibility: 'visible', + 'symbol-placement': 'line', + 'text-field': ['concat', ['to-string', ['get', 'ele']], 'm'] + }, + paint: { + 'icon-color': '#877b59', + 'icon-halo-width': 1, + 'text-color': '#877b59', + 'text-halo-width': 1 + } + }); + map.addLayer({ + id: 'sky', + type: 'sky', + paint: { + 'sky-type': 'atmosphere', + 'sky-atmosphere-sun': [0.0, 90.0], + 'sky-atmosphere-sun-intensity': 15 + } + }); + // 지형 3d end + // 등고선 start + map.addLayer({ + id: 'contours', + type: 'line', + source: { + type: 'vector', + url: 'mapbox://mapbox.mapbox-terrain-v2' + }, + 'source-layer': 'contour', + layout: { + visibility: 'visible', + 'line-join': 'round', + 'line-cap': 'round' + }, + paint: { + 'line-color': '#877b59', + 'line-width': 1 + } + }); + // 등고선 end + // 3d building + map.addLayer( + { + id: 'add-3d-buildings', + source: 'composite', + 'source-layer': 'building', + filter: ['==', 'extrude', 'true'], + type: 'fill-extrusion', + minzoom: 15, + paint: { + 'fill-extrusion-color': '#aaa', + + // Use an 'interpolate' expression to + // add a smooth transition effect to + // the buildings as the user zooms in. + 'fill-extrusion-height': [ + 'interpolate', + ['linear'], + ['zoom'], + 15, + 0, + 15.05, + ['get', 'height'] + ], + 'fill-extrusion-base': [ + 'interpolate', + ['linear'], + ['zoom'], + 15, + 0, + 15.05, + ['get', 'min_height'] + ], + 'fill-extrusion-opacity': 0.6 + } + }, + labelLayerId + ); + // 3d building + setMapObject(map); + setMapLoaded(true); + }); + map.on('mouseover', 'maine', e => { + const feature = e.features[0]; + const properties = feature.properties; + + // Remove the existing popup if it exists + if (popup) { + popup.remove(); + } + + // Create a new popup with the feature's properties + popup = new mapboxgl.Popup() + .setLngLat(e.lngLat) + .setHTML( + Object.entries(properties) + .map(([key, value]) => `${key}: ${value}`) + .join('
') + ) + .addTo(map); + }); + + map.on('mouseout', 'maine', () => { + if (popup) { + popup.remove(); + } + }); + // airPort?.map(air => polyArea(air, map)); + }; + + const createUamArea = uam => { + const title = uam.title; + const position = new naver.maps.LatLng(uam.lat, uam.lon); + + const circle = new naver.maps.Circle({ + strokeColor: '#283046', + strokeOpacity: 1, + fillColor: '#7367F0', + fillOpacity: 0.1, + center: position, + // map: mapObject, + radius: 100, + clickable: true + }); + + // circle.setMap(mapObject); + }; + + const handleHistoryInit = line => { + setArrPolyline([...arrPolyline, line]); + }; + + // const polyArea = air => { + // const polyArr = []; + // const radius = air.buffer; + // const position = air.center; + // const color = '#000'; + // const opacity = 0.7; + + // let angle = 0; + // for (let i = 0; i < 4; i++) { + // angle += 90; + // let buffer = 0; + // for (let j = 0; j < 9; j++) { + // buffer += 1000; + + // const coord = turf.destination( + // turf.point([position[0], position[1]]), + // buffer / 1000, + // angle, + // { units: 'kilometers' } + // ).geometry.coordinates; + + // let reduce = 0; + // reduce = air.reduce[j]; + + // if (angle % 180 === 0) { + // const polyEW = { + // type: 'Feature', + // geometry: { + // type: 'LineString', + // coordinates: [ + // turf.destination( + // turf.point([coord[0], coord[1]]), + // (radius - reduce) / 1000, + // 90, + // { units: 'kilometers' } + // ).geometry.coordinates, + // turf.destination( + // turf.point([coord[0], coord[1]]), + // (radius - reduce) / 1000, + // 270, + // { units: 'kilometers' } + // ).geometry.coordinates + // ] + // }, + // properties: { + // stroke: color, + // 'stroke-width': 0.8, + // 'stroke-opacity': opacity + // } + // }; + // polyArr.push(polyEW); + // } else { + // const polyNS = { + // type: 'Feature', + // geometry: { + // type: 'LineString', + // coordinates: [ + // turf.destination( + // turf.point([coord[0], coord[1]]), + // (radius - reduce) / 1000, + // 0, + // { units: 'kilometers' } + // ).geometry.coordinates, + // turf.destination( + // turf.point([coord[0], coord[1]]), + // (radius - reduce) / 1000, + // 180, + // { units: 'kilometers' } + // ).geometry.coordinates + // ] + // }, + // properties: { + // stroke: color, + // 'stroke-width': 0.8, + // 'stroke-opacity': opacity + // } + // }; + // polyArr.push(polyNS); + // } + // } + // } + + // const NS = { + // type: 'Feature', + // geometry: { + // type: 'LineString', + // coordinates: [ + // turf.destination( + // turf.point([position[0], position[1]]), + // radius / 1000, + // 0, + // { units: 'kilometers' } + // ).geometry.coordinates, + // turf.destination( + // turf.point([position[0], position[1]]), + // radius / 1000, + // 180, + // { units: 'kilometers' } + // ).geometry.coordinates + // ] + // }, + // properties: { + // stroke: color, + // 'stroke-width': 0.8, + // 'stroke-opacity': opacity + // } + // }; + // polyArr.push(NS); + + // const EW = { + // type: 'Feature', + // geometry: { + // type: 'LineString', + // coordinates: [ + // turf.destination( + // turf.point([position[0], position[1]]), + // radius / 1000, + // 90, + // { units: 'kilometers' } + // ).geometry.coordinates, + // turf.destination( + // turf.point([position[0], position[1]]), + // radius / 1000, + // 270, + // { units: 'kilometers' } + // ).geometry.coordinates + // ] + // }, + // properties: { + // stroke: color, + // 'stroke-width': 0.8, + // 'stroke-opacity': opacity + // } + // }; + // polyArr.push(EW); + + // setPoly(m => [...m, polyArr]); + // }; + + return ( + <> +
+ {isMapLoaded && mapObject ? ( + <> + {/* */} + + {/* + + + */} + + {/* */} + {/* */} + + {/* */} + + + {/* */} + {/* */} + + ) : null} + + {/* */} + + ); +} diff --git a/src/components/map/mapbox/feature/FeatureAirZone.js b/src/components/map/mapbox/feature/FeatureAirZone.js new file mode 100644 index 00000000..ad09a1a0 --- /dev/null +++ b/src/components/map/mapbox/feature/FeatureAirZone.js @@ -0,0 +1,405 @@ +import { useEffect, useState } from 'react'; +import { useSelector } from 'react-redux'; +import * as turf from '@turf/turf'; +import geoJson from '../../../../components/map/geojson/airArea.json'; +import gimPo from '../../../../components/map/geojson/airportAirArea.json'; +import '../../../../assets/css/custom.css'; + +const airPort = [ + { + title: '김포공항', + buffer: 9300, + center: [126.793722, 37.558522], + reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5] + }, + { + title: '인천공항', + buffer: 9300, + center: [126.4409428, 37.4588105], + reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5] + }, + { + title: '제주공항', + buffer: 9300, + center: [126.4930205, 33.506848], + reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5] + }, + { + title: '정석비행장', + buffer: 9300, + center: [126.7142598, 33.3943517], + reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5] + } +]; + +export const FeatureAirZone = props => { + const mapControl = useSelector(state => state.controlMapReducer); + let infoWindow; + + useEffect(() => { + featureAirZoneInit(); + // featureAirEvent(); + }, [mapControl]); + + // useEffect(() => { + // const addLayers = () => { + // props.poly.forEach((layer, idx) => { + // // console.log(layer); + // props.map.addSource(`line${idx}`, { + // type: 'geojson', + // data: { + // layer + // } + // }); + // props.map.addLayer(layer); + // }); + // }; + + // addLayers(); + + // // return () => { + // // props.map.remove(); + // // }; + // }, [props.poly]); + + const infowindowOpen = data => { + const content = + '
' + + '
' + + '' + + data.title + + '' + + '
' + + '
' + + '
' + + // '설명' + + '' + + data.description + + '' + + '
' + + // '
' + + // '좌표정보' + + // ''+data.coord+'' + + // '
' + + '
' + + // '' + + '
'; + + infoWindow = new props.naver.maps.InfoWindow({ + class: 'tooltip-test', + content: content, + maxWidth: 200, + backgroundColor: '#283046', //박스안쪽영역 컬러 + // borderColor: '#333', //테두리컬러 + // borderWidth: 3, //테두리 굵기 + anchorSize: new props.naver.maps.Size(30, -10), + anchorSkew: false, + anchorColor: '#283046', + + pixelOffset: new props.naver.maps.Point(20, -20) + }); + + infoWindow.open(props.map, data.coord); + }; + + const featureAirZoneInit = () => { + let arrGeoJson = []; + // props.map.data.removeGeoJson(props.geoJson); + // let geoJson = originGeoJson; + const useGeoJson = { + ...geoJson, + features: [...geoJson.features, ...gimPo.features] + }; + + // props.map.data.removeGeoJson(useGeoJson); + // props.map.removeLayer('maine'); + + useGeoJson.features.map(item => { + if (item.properties.type === '0001' && mapControl.area0001) { + arrGeoJson.push({ + ...item, + properties: { ...item.properties, color: '#FF3648' } + }); + } else if (item.properties.type === '0002' && mapControl.area0002) { + arrGeoJson.push({ + ...item, + properties: { ...item.properties, color: '#FFA1AA' } + }); + } else if (item.properties.type === '0003' && mapControl.area0003) { + arrGeoJson.push({ + ...item, + properties: { ...item.properties, color: '#FFA800' } + }); + } else if (item.properties.type === '0004' && mapControl.area0004) { + arrGeoJson.push({ + ...item, + properties: { ...item.properties, color: '#A16B00' } + }); + } else if (item.properties.type === '0005' && mapControl.area0005) { + arrGeoJson.push({ + ...item, + properties: { ...item.properties, color: '#AB40FF' } + }); + } else if (item.properties.type === '0006' && mapControl.area0006) { + arrGeoJson.push({ + ...item, + properties: { ...item.properties, color: '#009cad' } + }); + } + }); + useGeoJson.features = arrGeoJson; + + props.map.addSource('maine', { + type: 'geojson', + data: { + ...useGeoJson + } + }); + props.map.addLayer({ + id: 'maine', + type: 'fill', + source: 'maine', // reference the data source + layout: {}, + paint: { + 'fill-color': ['get', 'color'], + 'fill-opacity': 0.5 + } + }); + + airPort.map(air => polyArea(air)); + + // useGeoJson.features = arrGeoJson; + // props.map.data.addGeoJson(useGeoJson); + + // props.map.data.setStyle(feature => { + // var color; + + // //0001 비행금지구역 #FF3648 + // //0002 비행제한구역 #FFA1AA + // //0003 관제권(공항) #FFA800 + // //0004 비행장(군사) #A16B00 + // //0005 이착륙장(RC비행장) #AB40FF + // //0006 초경량비행장치 #009cad + + // // 공역 색상 변경 + // const type = feature.getProperty('type'); + // if (type === '0001') { + // color = '#FF3648'; + // } else if (type === '0002') { + // color = '#FFA1AA'; + // } else if (type === '0003') { + // color = '#FFA800'; + // } else if (type === '0004') { + // color = '#A16B00'; + // } else if (type === '0005') { + // color = '#AB40FF'; + // } else if (type === '0006') { + // color = '#009cad'; + // } + + // return { + // fillColor: color, + // strokeColor: color, + // strokeWeight: 0.7, + // icon: null + // }; + // }); + }; + + const featureAirEvent = () => { + props.map.data.addListener('click', function (e) { + // e.feature.setProperty('isColorful', true); + }); + + props.map.data.addListener('mouseover', function (e) { + const data = {}; + data.coord = e.coord; + data.title = e.feature.property_name; + data.description = e.feature.property_description; + props.map.data.overrideStyle(e.feature, { + strokeWeight: 3 + // icon: HOME_PATH +'/img/example/pin_spot.png' + }); + + infowindowOpen(data); + }); + + props.map.data.addListener('mouseout', function (e) { + props.map.data.revertStyle(); + + if (infoWindow) { + infoWindow.close(); + } + }); + }; + + const polyArea = air => { + const polyArr = []; + const radius = air.buffer; + const position = air.center; + const color = '#000'; + const opacity = 0.7; + + let angle = 0; + let layerId = 1; + for (let i = 0; i < 4; i++) { + angle += 90; + let buffer = 0; + for (let j = 0; j < 9; j++) { + buffer += 1000; + + const coord = turf.destination( + turf.point([position[0], position[1]]), + buffer / 1000, + angle, + { units: 'kilometers' } + ).geometry.coordinates; + + let reduce = 0; + reduce = air.reduce[j]; + + if (angle % 180 === 0) { + const polyEW = { + id: layerId++, + type: 'Feature', + geometry: { + type: 'LineString', + coordinates: [ + turf.destination( + turf.point([coord[0], coord[1]]), + (radius - reduce) / 1000, + 90, + { units: 'kilometers' } + ).geometry.coordinates, + turf.destination( + turf.point([coord[0], coord[1]]), + (radius - reduce) / 1000, + 270, + { units: 'kilometers' } + ).geometry.coordinates + ] + }, + properties: { + stroke: color, + 'stroke-width': 0.8, + 'stroke-opacity': opacity + } + }; + polyArr.push(polyEW); + } else { + const polyNS = { + id: layerId++, + type: 'Feature', + geometry: { + type: 'LineString', + coordinates: [ + turf.destination( + turf.point([coord[0], coord[1]]), + (radius - reduce) / 1000, + 0, + { units: 'kilometers' } + ).geometry.coordinates, + turf.destination( + turf.point([coord[0], coord[1]]), + (radius - reduce) / 1000, + 180, + { units: 'kilometers' } + ).geometry.coordinates + ] + }, + properties: { + stroke: color, + 'stroke-width': 0.8, + 'stroke-opacity': opacity + } + }; + polyArr.push(polyNS); + } + } + } + + const NS = { + id: layerId++, + type: 'Feature', + geometry: { + type: 'LineString', + coordinates: [ + turf.destination( + turf.point([position[0], position[1]]), + radius / 1000, + 0, + { units: 'kilometers' } + ).geometry.coordinates, + turf.destination( + turf.point([position[0], position[1]]), + radius / 1000, + 180, + { units: 'kilometers' } + ).geometry.coordinates + ] + }, + properties: { + stroke: color, + 'stroke-width': 0.8, + 'stroke-opacity': opacity + } + }; + polyArr.push(NS); + + const EW = { + id: layerId++, + type: 'Feature', + geometry: { + type: 'LineString', + coordinates: [ + turf.destination( + turf.point([position[0], position[1]]), + radius / 1000, + 90, + { units: 'kilometers' } + ).geometry.coordinates, + turf.destination( + turf.point([position[0], position[1]]), + radius / 1000, + 270, + { units: 'kilometers' } + ).geometry.coordinates + ] + }, + properties: { + stroke: color, + 'stroke-width': 0.8, + 'stroke-opacity': opacity + } + }; + + polyArr.push(EW); + + props.map.addSource(air.title, { + type: 'geojson', + data: { + type: 'FeatureCollection', + features: polyArr + } + }); + + props.map.addLayer({ + id: air.title, + type: 'line', + source: air.title, + layout: { + 'line-join': 'round', + 'line-cap': 'round' + }, + paint: { + 'line-color': color, + 'line-width': 0.8, + 'line-opacity': opacity + } + }); + + // Grid area + }; + + return null; +}; diff --git a/src/components/map/naver/MapBoxTest.js b/src/components/map/naver/MapBoxTest.js deleted file mode 100644 index d4e2b60e..00000000 --- a/src/components/map/naver/MapBoxTest.js +++ /dev/null @@ -1,485 +0,0 @@ -import { MAPBOX_TOKEN } from '../../../configs/constants'; -import React, { useEffect, useState, useRef } from 'react'; -import { useSelector, useDispatch } from 'react-redux'; -import { DronMarker } from './dron/DronMarker'; -import { DronHistory } from './dron/DronHistory'; -import NaverMapControl from './NaverMapControl'; -import { NaverMapSearch } from './search/NaverMapSearch'; -import { FeatureAirZone } from './feature/FeatureAirZone'; -import geoJson from '../geojson/airArea.json'; -import DronPlan from './dron/DronPlan'; -import NewDronPlan from './dron/NewDronPlan'; -import { NewDronHistory } from './dron/NewDronHistroy'; -import DronToast from './dron/DronToast'; -import SensorZone from './sensor/SensorZone'; -import 'mapbox-gl/dist/mapbox-gl.css'; -import mapboxgl from 'mapbox-gl'; - -// mapboxgl.accessToken = MAPBOX_TOKEN; -export default function MapBoxTest() { - // const mapContainer = useRef(null); - // const map = useRef(null); - // useEffect(() => { - // if (map.current) return; - // map.current = new mapboxgl.Map({ - // container: mapContainer.current, - // style: 'mapbox://styles/mapbox/streets-v12', - // center: [126.793722, 37.558522], - // zoom: 9 - // }); - // }); - - // return ( - //
- //
- //
- // ); - const dispatch = useDispatch(); - const naver = window.naver; - - const [mapObject, setMapObject] = useState(null); - const [arrPolyline, setArrPolyline] = useState([]); - - const [poly, setPoly] = useState([]); - const mapContainer = useRef(null); - - const airPort = [ - { - title: '김포공항', - buffer: 9300, - center: new naver.maps.LatLng(37.558522, 126.793722), - reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5] - }, - { - title: '인천공항', - buffer: 9300, - center: new naver.maps.LatLng(37.4588105, 126.4409428), - reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5] - }, - { - title: '제주공항', - buffer: 9300, - center: new naver.maps.LatLng(33.506848, 126.4930205), - reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5] - }, - { - title: '정석비행장', - buffer: 9300, - center: new naver.maps.LatLng(33.3943517, 126.7142598), - reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5] - } - ]; - - const uamPosition = [ - { - name: 'V1', - lat: 37.4797865, - lon: 126.540668 - }, - { - name: 'V2', - - lat: 37.521245, - lon: 126.6107763 - }, - { - name: 'V3', - lat: 37.5642352, - lon: 126.6243464 - }, - { - name: 'V4', - lat: 37.3658236, - lon: 126.6650669 - }, - { - name: 'V5', - lat: 37.4520753, - lon: 126.7074861 - }, - { - name: 'R1', - lat: 37.492581, - lon: 126.5801572 - }, - { - name: 'R2', - lat: 37.542031, - lon: 126.6036588 - }, - { - name: 'R3', - lat: 37.5764269, - lon: 126.6005224 - }, - { - name: 'R4', - lat: 37.5790407, - lon: 126.6600404 - }, - { - name: 'R5', - lat: 37.524016, - lon: 126.649562 - }, - { - name: 'R6', - lat: 37.5506488, - lon: 126.693722 - }, - { - name: 'R7', - lat: 37.4712333, - lon: 126.6023981 - }, - { - name: 'R8', - lat: 37.4046495, - lon: 126.6202759 - }, - { - name: 'R9', - lat: 37.3450207, - lon: 126.6296542 - } - ]; - - let features = geoJson.features; - - useEffect(() => { - NaverMapInit(); - - // const map = new mapboxgl.Map({ - // container: mapContainer.current, - // style: 'mapbox://styles/mapbox/streets-v11', - // center: [-74.5, 40], - // zoom: 9 - // }); - airPort?.map(air => polyArea(air)); - }, []); - - useEffect(() => { - uamPosition.map(uam => { - const name = uam.name; - const position = new naver.maps.LatLng(uam.lat, uam.lon); - - const cont = - name.substr(0, 1) == 'R' - ? [ - '
', - `${name}`, - '
' - ] - : [ - '
', - `${name}`, - '
' - ]; - - const marker = new naver.maps.Marker({ - position: position, - map: mapObject, - icon: { - content: cont.join(''), - anchor: new naver.maps.Point(20, 20) - } - }); - }); - }, [mapObject]); - let popup; - const NaverMapInit = () => { - mapboxgl.accessToken = MAPBOX_TOKEN; - // const mapOptions = { - // center: new naver.maps.LatLng(37.520357, 126.610166), - // // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547), - // // zoom: 10, - // zoom: 14, - // zoomControl: true, - // mapTypeId: naver.maps.MapTypeId.NORMAR, - // zoomControlOptions: { - // position: naver.maps.Position.TOP_LEFT, - - // style: naver.maps.ZoomControlStyle.SMALL - // } - // }; - const map = new mapboxgl.Map({ - container: 'map', // container ID - style: 'mapbox://styles/mapbox/streets-v12', // style URL - center: [127.85101412107547, 37.520357], // starting position [lng, lat] - zoom: 10 // starting zoom - }); - setMapObject(map); - - map.on('load', () => { - const layers = map.getStyle().layers; - map.setLayoutProperty('country-label', 'text-field', ['get', `name_kr`]); - const labelLayerId = layers.find( - layer => layer.type === 'symbol' && layer.layout['text-field'] - ).id; - map.addSource('mapbox-dem', { - type: 'raster-dem', - url: 'mapbox://mapbox.mapbox-terrain-dem-v1', - tileSize: 512, - maxZoom: 16 - }); - map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 }); - map.addSource('maine', { - type: 'geojson', - data: { - ...geoJson - } - }); - map.addLayer({ - id: 'maine', - type: 'fill', - source: 'maine', // reference the data source - layout: {}, - paint: { - 'fill-color': '#0080ff', // blue color fill - 'fill-opacity': 0.5 - } - }); - map.addLayer({ - id: 'sky', - type: 'sky', - paint: { - 'sky-type': 'atmosphere', - 'sky-atmosphere-sun': [0.0, 90.0], - 'sky-atmosphere-sun-intensity': 15 - } - }); - map.addLayer( - { - id: 'add-3d-buildings', - source: 'composite', - 'source-layer': 'building', - filter: ['==', 'extrude', 'true'], - type: 'fill-extrusion', - minzoom: 15, - paint: { - 'fill-extrusion-color': '#aaa', - - // Use an 'interpolate' expression to - // add a smooth transition effect to - // the buildings as the user zooms in. - 'fill-extrusion-height': [ - 'interpolate', - ['linear'], - ['zoom'], - 15, - 0, - 15.05, - ['get', 'height'] - ], - 'fill-extrusion-base': [ - 'interpolate', - ['linear'], - ['zoom'], - 15, - 0, - 15.05, - ['get', 'min_height'] - ], - 'fill-extrusion-opacity': 0.6 - } - }, - labelLayerId - ); - }); - map.on('mouseenter', 'maine', e => { - const feature = e.features[0]; - const properties = feature.properties; - - // Remove the existing popup if it exists - if (popup) { - popup.remove(); - } - - // Create a new popup with the feature's properties - popup = new mapboxgl.Popup() - .setLngLat(e.lngLat) - .setHTML( - Object.entries(properties) - .map(([key, value]) => `${key}: ${value}`) - .join('
') - ) - .addTo(map); - }); - - map.on('mouseleave', 'maine', () => { - if (popup) { - popup.remove(); - } - }); - }; - - const createUamArea = uam => { - const title = uam.title; - const position = new naver.maps.LatLng(uam.lat, uam.lon); - - const circle = new naver.maps.Circle({ - strokeColor: '#283046', - strokeOpacity: 1, - fillColor: '#7367F0', - fillOpacity: 0.1, - center: position, - // map: mapObject, - radius: 100, - clickable: true - }); - - // circle.setMap(mapObject); - }; - - const handleHistoryInit = line => { - setArrPolyline([...arrPolyline, line]); - }; - - const polyArea = air => { - //격자 공역 - const polyArr = []; - const radius = air.buffer; - const position = air.center; - const color = '#000'; - const opacity = 0.7; - - let angle = 0; - for (let i = 0; i < 4; i++) { - angle += 90; - let buffer = 0; - // for (let j = 0; j < 4; j++) { - for (let j = 0; j < 9; j++) { - // buffer += 2000; - buffer += 1000; - - const coord = new naver.maps.EPSG3857.getDestinationCoord( - position, - angle, - buffer - ); - - let reduce = 0; - reduce = air.reduce[j]; - - // 2km reduce - // [218.6, 905.4, 2195, 4560.2] - - if (angle % 180 == 0) { - const polyEW = new naver.maps.Polyline({ - path: [ - new naver.maps.EPSG3857.getDestinationCoord( - coord, - 90, - radius - reduce - ), - new naver.maps.EPSG3857.getDestinationCoord( - coord, - 270, - radius - reduce - ) - ], - strokeWeight: 0.8, - strokeOpacity: opacity, - strokeColor: color - // map: map - }); - polyArr.push(polyEW); - } else { - const polyNS = new naver.maps.Polyline({ - path: [ - new naver.maps.EPSG3857.getDestinationCoord( - coord, - 0, - radius - reduce - ), - new naver.maps.EPSG3857.getDestinationCoord( - coord, - 180, - radius - reduce - ) - ], - strokeWeight: 0.8, - strokeOpacity: opacity, - strokeColor: color - // map: props.map - }); - polyArr.push(polyNS); - } - } - } - const NS = new naver.maps.Polyline({ - path: [ - new naver.maps.EPSG3857.getDestinationCoord(position, 0, radius), - new naver.maps.EPSG3857.getDestinationCoord(position, 180, radius) - ], - strokeWeight: 0.8, - strokeOpacity: opacity, - strokeColor: color - // map: props.map - }); - polyArr.push(NS); - const EW = new naver.maps.Polyline({ - path: [ - new naver.maps.EPSG3857.getDestinationCoord(position, 90, radius), - new naver.maps.EPSG3857.getDestinationCoord(position, 270, radius) - ], - strokeWeight: 0.8, - strokeOpacity: opacity, - strokeColor: color - // map: props.map - }); - polyArr.push(EW); - - setPoly(m => [...m, polyArr]); - }; - - return ( - <> -
- {mapObject != null ? ( - <> - - - {/* - - - */} - - {/* */} - {/* */} - - {/* - - */} - {/* */} - {/* */} - - ) : null} - - {/* */} - - ); -}