V1~V5, R1~R9 관제지도 표출

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]);
   };