From 9ebc1da082642b80a767d2c847599e2464356262 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?=
 <junheee@palnet.co.kr>
Date: Tue, 16 May 2023 15:55:49 +0900
Subject: [PATCH] =?UTF-8?q?V1~V5,=20R1~R9=20=EA=B4=80=EC=A0=9C=EC=A7=80?=
 =?UTF-8?q?=EB=8F=84=20=ED=91=9C=EC=B6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/naver/NaverMap.js | 120 +++++++++++++++++++++++++++
 1 file changed, 120 insertions(+)

diff --git a/src/components/map/naver/NaverMap.js b/src/components/map/naver/NaverMap.js
index 24fd8cae..c26d7263 100644
--- a/src/components/map/naver/NaverMap.js
+++ b/src/components/map/naver/NaverMap.js
@@ -48,6 +48,80 @@ export const NaverCustomMap = () => {
     }
   ];
 
+  const uamPosition = [
+    {
+      name: 'V1',
+      lat: 37.4797865,
+      lon: 126.540668
+    },
+    {
+      name: 'V2',
+
+      lat: 37.521245,
+      lon: 126.6107763
+    },
+    {
+      name: 'V3',
+      lat: 37.5609465,
+      lon: 126.7414201
+    },
+    {
+      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.5699471,
+      lon: 126.7536302
+    },
+    {
+      name: 'R5',
+      lat: 37.524016,
+      lon: 126.649562
+    },
+    {
+      name: 'R6',
+      lat: 37.5319855,
+      lon: 126.745071
+    },
+    {
+      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(() => {
@@ -55,6 +129,34 @@ export const NaverCustomMap = () => {
     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'
+          ? [
+              '<div style="border-radius:50%; background:#429629; border: 4px solid #ffffff; padding:5px;">',
+              `<span style="color:#ffffff">${name}</span>`,
+              '</div>'
+            ]
+          : [
+              '<div style="border-radius:50%; background:#ffffff; border: 4px solid #15298A; padding:5px;">',
+              `<span style="color:#000000">${name}</span>`,
+              '</div>'
+            ];
+
+      const marker = new naver.maps.Marker({
+        position: position,
+        map: mapObject,
+        icon: {
+          content: cont.join('')
+        }
+      });
+    });
+  }, [mapObject]);
+
   const NaverMapInit = () => {
     const mapOptions = {
       center: new naver.maps.LatLng(37.520357, 126.610166),
@@ -73,6 +175,24 @@ export const NaverCustomMap = () => {
     setMapObject(new naver.maps.Map('map', mapOptions));
   };
 
+  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]);
   };