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 =
+ '';
+
+ 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}
-
- {/* */}
- >
- );
-}