Merge branch 'master' of http://gitea.palntour.com/pav/pav-home

2 years ago · dd3a3c5193
5 changed files with 334 additions and 159 deletions
--- a/.env.development
+++ b/.env.development
@ -1,5 +1,5 @@
-REACT_APP_HOST = http://localhost:8080/
-REACT_APP_WS_HOST = ws://localhost:8081/ws
+REACT_APP_HOST = http://192.168.0.34:8080/
+REACT_APP_WS_HOST = ws://192.168.0.34:8081/ws
 REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/

 # Naver Search API HOST
--- a/src/components/map/geojson/airArea.json
+++ b/src/components/map/geojson/airArea.json
@ -2702,48 +2702,187 @@
        "type": "Polygon",
        "coordinates": [
          [
-            [126.404371, 37.380504, 0],
-            [126.422041, 37.376657, 0],
-            [126.440282, 37.375304, 0],
-            [126.458541, 37.376486, 0],
-            [126.476267, 37.380167, 0],
-            [126.48476, 37.382913, 0],
-            [126.492921, 37.386235, 0],
-            [126.507999, 37.394508, 0],
-            [126.521044, 37.404733, 0],
-            [126.526677, 37.410483, 0],
-            [126.535951, 37.423041, 0],
-            [126.539521, 37.429753, 0],
-            [126.54439, 37.443789, 0],
-            [126.545652, 37.451006, 0],
-            [126.545781, 37.465564, 0],
-            [126.544646, 37.472794, 0],
-            [126.540022, 37.486882, 0],
-            [126.536567, 37.493633, 0],
-            [126.527501, 37.506291, 0],
-            [126.521959, 37.512101, 0],
-            [126.515799, 37.517506, 0],
-            [126.501816, 37.526938, 0],
-            [126.485978, 37.534299, 0],
-            [126.468765, 37.539364, 0],
-            [126.450703, 37.54198, 0],
-            [126.432343, 37.542066, 0],
-            [126.414243, 37.53962, 0],
-            [126.396956, 37.534716, 0],
-            [126.381009, 37.527505, 0],
-            [126.366886, 37.518205, 0],
-            [126.355017, 37.5071, 0],
-            [126.345763, 37.494528, 0],
-            [126.339404, 37.480872, 0],
-            [126.336132, 37.466547, 0],
-            [126.336044, 37.451989, 0],
-            [126.339141, 37.43764, 0],
-            [126.345328, 37.423935, 0],
-            [126.354414, 37.411291, 0],
-            [126.366124, 37.400092, 0],
-            [126.372854, 37.395142, 0],
-            [126.387808, 37.386729, 0],
-            [126.404371, 37.380504, 0]
+            [126.44094280000002, 37.54235382142311, 0],
+            [126.44461994135273, 37.54230287215076, 0],
+            [126.44829258762837, 37.54215008661631, 0],
+            [126.45195624930022, 37.541895651590615, 0],
+            [126.45560644793481, 37.541539878102256, 0],
+            [126.45923872172105, 37.54108320105341, 0],
+            [126.4628486309776, 37.54052617868294, 0],
+            [126.46643176363217, 37.53986949187721, 0],
+            [126.46998374066511, 37.539113943329525, 0],
+            [126.47350022151095, 37.538260456549324, 0],
+            [126.47697690941023, 37.53731007472238, 0],
+            [126.48040955670568, 37.53626395942344, 0],
+            [126.48379397007506, 37.53512338918297, 0],
+            [126.4871260156948, 37.53388975790994, 0],
+            [126.49040162432739, 37.53256457317236, 0],
+            [126.49361679632621, 37.53114945433823, 0],
+            [126.49676760655159, 37.52964613057885, 0],
+            [126.4998502091916, 37.52805643873729, 0],
+            [126.50286084248206, 37.52638232106468, 0],
+            [126.505795833319, 37.524625822827126, 0],
+            [126.50865160175876, 37.522789089786436, 0],
+            [126.51142466539942, 37.52087436555773, 0],
+            [126.51411164363836, 37.51888398884744, 0],
+            [126.51670926180095, 37.51682039057498, 0],
+            [126.51921435513479, 37.514686090882016, 0],
+            [126.52162387266492, 37.51248369603286, 0],
+            [126.5239348809054, 37.51021589521011, 0],
+            [126.52614456742265, 37.50788545720947, 0],
+            [126.52825024424588, 37.50549522703788, 0],
+            [126.53024935112154, 37.503048122419465, 0],
+            [126.53213945860658, 37.50054713021332, 0],
+            [126.53391827099826, 37.49799530274809, 0],
+            [126.53558362909591, 37.49539575407745, 0],
+            [126.53713351279227, 37.49275165616162, 0],
+            [126.53856604349106, 37.490066234979395, 0],
+            [126.5398794863481, 37.48734276657561, 0],
+            [126.54107225233366, 37.484584573049, 0],
+            [126.54214290011332, 37.48179501848551, 0],
+            [126.5430901377462, 37.47897750484189, 0],
+            [126.54391282419758, 37.47613546778491, 0],
+            [126.54460997066552, 37.47327237249113, 0],
+            [126.54518074171949, 37.47039170941269, 0],
+            [126.54562445624995, 37.467496990013956, 0],
+            [126.54594058822855, 37.46459174248467, 0],
+            [126.54612876727788, 37.46167950743456, 0],
+            [126.54618877905054, 37.458763833574814, 0],
+            [126.54612056541758, 37.45584827339179, 0],
+            [126.54592422446628, 37.45293637881798, 0],
+            [126.54560001030777, 37.45003169690585, 0],
+            [126.5451483326948, 37.447137765509524, 0],
+            [126.54456975645077, 37.444258108979696, 0],
+            [126.54386500071111, 37.441396233876986, 0],
+            [126.54303493797774, 37.43855562470892, 0],
+            [126.54208059298897, 37.435739739695606, 0],
+            [126.54100314140564, 37.43295200656935, 0],
+            [126.53980390831609, 37.430195818413104, 0],
+            [126.5384843665616, 37.42747452954293, 0],
+            [126.53704613488523, 37.42479145143916, 0],
+            [126.53549097590567, 37.422149848731486, 0],
+            [126.53382079391994, 37.41955293524234, 0],
+            [126.53203763253687, 37.417003870093694, 0],
+            [126.53014367214507, 37.41450575388156, 0],
+            [126.52814122721848, 37.41206162492309, 0],
+            [126.5260327434629, 37.40967445558032, 0],
+            [126.52382079480729, 37.407347148665366, 0],
+            [126.52150808024346, 37.40508253393088, 0],
+            [126.51909742051836, 37.40288336465029, 0],
+            [126.51659175468285, 37.40075231429156, 0],
+            [126.5139941365013, 37.39869197328861, 0],
+            [126.51130773072649, 37.396704845913995, 0],
+            [126.50853580924435, 37.39479334725669, 0],
+            [126.5056817470933, 37.39295980030843, 0],
+            [126.5027490183626, 37.391206433162004, 0],
+            [126.49974119197545, 37.389535376324815, 0],
+            [126.49666192736099, 37.38794866015083, 0],
+            [126.49351497002117, 37.38644821239399, 0],
+            [126.49030414699712, 37.38503585588566, 0],
+            [126.4870333622409, 37.38371330633935, 0],
+            [126.48370659189776, 37.382482170284575, 0],
+            [126.48032787950466, 37.38134394313284, 0],
+            [126.47690133111058, 37.38030000737772, 0],
+            [126.47343111032448, 37.3793516309311, 0],
+            [126.46992143329652, 37.378499965597655, 0],
+            [126.46637656363843, 37.377746045689165, 0],
+            [126.4628008072892, 37.37709078678045, 0],
+            [126.45919850733164, 37.37653498460818, 0],
+            [126.45557403876613, 37.37607931411399, 0],
+            [126.45193180324753, 37.37572432863285, 0],
+            [126.44827622379123, 37.37547045922783, 0],
+            [126.4446117394546, 37.37531801417182, 0],
+            [126.44094280000002, 37.375267178576884, 0],
+            [126.43727386054543, 37.37531801417182, 0],
+            [126.4336093762088, 37.37547045922783, 0],
+            [126.4299537967525, 37.37572432863285, 0],
+            [126.4263115612339, 37.37607931411399, 0],
+            [126.4226870926684, 37.37653498460818, 0],
+            [126.41908479271083, 37.37709078678045, 0],
+            [126.4155090363616, 37.377746045689165, 0],
+            [126.41196416670351, 37.378499965597655, 0],
+            [126.40845448967555, 37.3793516309311, 0],
+            [126.40498426888945, 37.38030000737772, 0],
+            [126.40155772049538, 37.38134394313284, 0],
+            [126.39817900810228, 37.382482170284575, 0],
+            [126.39485223775914, 37.38371330633935, 0],
+            [126.39158145300291, 37.38503585588566, 0],
+            [126.38837062997887, 37.38644821239399, 0],
+            [126.38522367263904, 37.38794866015083, 0],
+            [126.38214440802459, 37.389535376324815, 0],
+            [126.37913658163743, 37.391206433162004, 0],
+            [126.37620385290673, 37.39295980030843, 0],
+            [126.37334979075567, 37.39479334725669, 0],
+            [126.37057786927355, 37.396704845913995, 0],
+            [126.36789146349874, 37.39869197328861, 0],
+            [126.36529384531718, 37.40075231429156, 0],
+            [126.36278817948165, 37.40288336465029, 0],
+            [126.36037751975657, 37.40508253393088, 0],
+            [126.35806480519274, 37.407347148665366, 0],
+            [126.35585285653713, 37.40967445558032, 0],
+            [126.35374437278153, 37.41206162492309, 0],
+            [126.35174192785496, 37.41450575388156, 0],
+            [126.34984796746316, 37.417003870093694, 0],
+            [126.34806480608009, 37.41955293524234, 0],
+            [126.34639462409436, 37.422149848731486, 0],
+            [126.3448394651148, 37.42479145143916, 0],
+            [126.34340123343843, 37.42747452954293, 0],
+            [126.34208169168394, 37.430195818413104, 0],
+            [126.3408824585944, 37.43295200656935, 0],
+            [126.33980500701105, 37.435739739695606, 0],
+            [126.3388506620223, 37.43855562470892, 0],
+            [126.33802059928892, 37.441396233876986, 0],
+            [126.33731584354925, 37.444258108979696, 0],
+            [126.33673726730524, 37.447137765509524, 0],
+            [126.33628558969227, 37.45003169690585, 0],
+            [126.33596137553376, 37.45293637881798, 0],
+            [126.33576503458245, 37.45584827339179, 0],
+            [126.3356968209495, 37.458763833574814, 0],
+            [126.33575683272215, 37.46167950743456, 0],
+            [126.33594501177149, 37.46459174248467, 0],
+            [126.33626114375008, 37.467496990013956, 0],
+            [126.33670485828054, 37.47039170941269, 0],
+            [126.33727562933451, 37.47327237249113, 0],
+            [126.33797277580246, 37.47613546778491, 0],
+            [126.33879546225383, 37.47897750484189, 0],
+            [126.33974269988671, 37.48179501848551, 0],
+            [126.34081334766637, 37.484584573049, 0],
+            [126.34200611365193, 37.48734276657561, 0],
+            [126.34331955650897, 37.490066234979395, 0],
+            [126.34475208720777, 37.49275165616162, 0],
+            [126.34630197090412, 37.49539575407745, 0],
+            [126.34796732900178, 37.49799530274809, 0],
+            [126.34974614139345, 37.50054713021332, 0],
+            [126.35163624887849, 37.503048122419465, 0],
+            [126.35363535575415, 37.50549522703788, 0],
+            [126.35574103257738, 37.50788545720947, 0],
+            [126.35795071909462, 37.51021589521011, 0],
+            [126.36026172733511, 37.51248369603286, 0],
+            [126.36267124486524, 37.514686090882016, 0],
+            [126.36517633819908, 37.51682039057498, 0],
+            [126.36777395636167, 37.51888398884744, 0],
+            [126.37046093460062, 37.52087436555773, 0],
+            [126.37323399824128, 37.522789089786436, 0],
+            [126.37608976668103, 37.524625822827126, 0],
+            [126.37902475751795, 37.52638232106468, 0],
+            [126.38203539080843, 37.52805643873729, 0],
+            [126.38511799344845, 37.52964613057885, 0],
+            [126.38826880367382, 37.53114945433823, 0],
+            [126.39148397567264, 37.53256457317236, 0],
+            [126.39475958430523, 37.53388975790994, 0],
+            [126.39809162992496, 37.53512338918297, 0],
+            [126.40147604329435, 37.53626395942344, 0],
+            [126.4049086905898, 37.53731007472238, 0],
+            [126.40838537848909, 37.538260456549324, 0],
+            [126.41190185933492, 37.539113943329525, 0],
+            [126.41545383636786, 37.53986949187721, 0],
+            [126.41903696902243, 37.54052617868294, 0],
+            [126.42264687827898, 37.54108320105341, 0],
+            [126.4262791520652, 37.541539878102256, 0],
+            [126.42992935069981, 37.541895651590615, 0],
+            [126.43359301237165, 37.54215008661631, 0],
+            [126.4372656586473, 37.54230287215076, 0],
+            [126.44094280000002, 37.54235382142311, 0]
          ]
        ]
      },
--- a/src/components/map/naver/NaverMap.js
+++ b/src/components/map/naver/NaverMap.js
@ -19,11 +19,26 @@ export const NaverCustomMap = () => {

  const [poly, setPoly] = useState([]);

+  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]
+    }
+  ];
+
  let features = geoJson.features;

  useEffect(() => {
    NaverMapInit();
-    polyArea();
+    airPort?.map(air => polyArea(air));
  }, []);

  const NaverMapInit = () => {
@ -48,11 +63,11 @@ export const NaverCustomMap = () => {
    setArrPolyline([...arrPolyline, line]);
  };

-  const polyArea = () => {
+  const polyArea = air => {
    //격자 공역
    const polyArr = [];
-    const SENSOR_RADIUS = 9300;
-    const position = new naver.maps.LatLng(37.558522, 126.793722);
+    const radius = air.buffer;
+    const position = air.center;
    const color = '#000';
    const opacity = 0.7;

@ -72,41 +87,23 @@ export const NaverCustomMap = () => {
        );

        let reduce = 0;
-        if (j === 0) {
-          // reduce = 218.6;
-          reduce = 54.4;
-        } else if (j === 1) {
-          // reduce = 905.4;
-          reduce = 218.6;
-        } else if (j === 2) {
-          // reduce = 2195;
-          reduce = 500;
-        } else if (j === 3) {
-          // reduce = 4560.2;
-          reduce = 905.4;
-        } else if (j === 4) {
-          reduce = 1459.8;
-        } else if (j === 5) {
-          reduce = 2195;
-        } else if (j === 6) {
-          reduce = 3173.5;
-        } else if (j === 7) {
-          reduce = 4552.5;
-        } else if (j === 8) {
-          reduce = 6952.5;
-        }
+        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,
-                SENSOR_RADIUS - reduce
+                radius - reduce
              ),
              new naver.maps.EPSG3857.getDestinationCoord(
                coord,
                270,
-                SENSOR_RADIUS - reduce
+                radius - reduce
              )
            ],
            strokeWeight: 0.8,
@ -121,12 +118,12 @@ export const NaverCustomMap = () => {
              new naver.maps.EPSG3857.getDestinationCoord(
                coord,
                0,
-                SENSOR_RADIUS - reduce
+                radius - reduce
              ),
              new naver.maps.EPSG3857.getDestinationCoord(
                coord,
                180,
-                SENSOR_RADIUS - reduce
+                radius - reduce
              )
            ],
            strokeWeight: 0.8,
@ -140,12 +137,8 @@ export const NaverCustomMap = () => {
    }
    const NS = new naver.maps.Polyline({
      path: [
-        new naver.maps.EPSG3857.getDestinationCoord(position, 0, SENSOR_RADIUS),
-        new naver.maps.EPSG3857.getDestinationCoord(
-          position,
-          180,
-          SENSOR_RADIUS
-        )
+        new naver.maps.EPSG3857.getDestinationCoord(position, 0, radius),
+        new naver.maps.EPSG3857.getDestinationCoord(position, 180, radius)
      ],
      strokeWeight: 0.8,
      strokeOpacity: opacity,
@ -155,16 +148,8 @@ export const NaverCustomMap = () => {
    polyArr.push(NS);
    const EW = new naver.maps.Polyline({
      path: [
-        new naver.maps.EPSG3857.getDestinationCoord(
-          position,
-          90,
-          SENSOR_RADIUS
-        ),
-        new naver.maps.EPSG3857.getDestinationCoord(
-          position,
-          270,
-          SENSOR_RADIUS
-        )
+        new naver.maps.EPSG3857.getDestinationCoord(position, 90, radius),
+        new naver.maps.EPSG3857.getDestinationCoord(position, 270, radius)
      ],
      strokeWeight: 0.8,
      strokeOpacity: opacity,
@ -172,7 +157,8 @@ export const NaverCustomMap = () => {
      // map: props.map
    });
    polyArr.push(EW);
-    setPoly(polyArr);
+
+    setPoly(m => [...m, polyArr]);
  };

  return (
--- a/src/components/map/naver/dron/DronMarker.js
+++ b/src/components/map/naver/dron/DronMarker.js
@ -43,45 +43,45 @@ export const DronMarker = props => {
  let map = props.map;
  let CustomOverlay;
  let infoWindow;
-  const infowindowOpen = data => {
-    const content = `
-        <div class="dblock-box">
-          <div class="dblock-ti">
-            <span>${data?.id}</span>
-          </div>
-          <div class="dblock-txt>
-            <div class="dblock-txt-list">
-              <div>
-                <span style="width: 250px; display: inline-block;">${
-                  data?.speed
-                }${data?.speedType} | ${data?.elev}${data?.elevType} | ${
-      data?.heading
-    }</span>
-                <span style="width: 250px; display: inline-block;">${(data?.coord._lat).toFixed(
-                  6
-                )} | ${(data?.coord._lng).toFixed(6)}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      `;
-
-    infoWindow = new naver.maps.InfoWindow({
-      class: 'tooltip-dblock',
-      content: content,
-      maxWidth: 160,
-      backgroundColor: '#283046', //박스안쪽영역 컬러
-      // borderColor: '#333', //테두리컬러
-      // borderWidth: 3, //테두리 굵기
-      // anchorSize: new naver.maps.Size(30, -10),
-      anchorSkew: false,
-      anchorColor: '#283046',
-
-      pixelOffset: new naver.maps.Point(20, -20)
-    });
-
-    infoWindow.open(props.map, data.coord);
-  };
+  // const infowindowOpen = data => {
+  //   const content = `
+  //       <div class="dblock-box">
+  //         <div class="dblock-ti">
+  //           <span>${data?.id}</span>
+  //         </div>
+  //         <div class="dblock-txt>
+  //           <div class="dblock-txt-list">
+  //             <div>
+  //               <span style="width: 250px; display: inline-block;">${
+  //                 data?.speed
+  //               }${data?.speedType} | ${data?.elev}${data?.elevType} | ${
+  //     data?.heading
+  //   }</span>
+  //               <span style="width: 250px; display: inline-block;">${(data?.coord._lat).toFixed(
+  //                 6
+  //               )} | ${(data?.coord._lng).toFixed(6)}</span>
+  //             </div>
+  //           </div>
+  //         </div>
+  //       </div>
+  //     `;
+
+  //   infoWindow = new naver.maps.InfoWindow({
+  //     class: 'tooltip-dblock',
+  //     content: content,
+  //     maxWidth: 160,
+  //     backgroundColor: '#283046', //박스안쪽영역 컬러
+  //     // borderColor: '#333', //테두리컬러
+  //     // borderWidth: 3, //테두리 굵기
+  //     // anchorSize: new naver.maps.Size(30, -10),
+  //     anchorSkew: false,
+  //     anchorColor: '#283046',
+
+  //     pixelOffset: new naver.maps.Point(20, -20)
+  //   });
+
+  //   infoWindow.open(props.map, data.coord);
+  // };

  // useLayoutEffect(() => {
  //   dispatch(controlGroupAuthAction.request());
@ -149,7 +149,6 @@ export const DronMarker = props => {
        markerOption.type = 'DRONE';
      } else {
        if (user.authId === 'SUPER' || user.authId === 'ADMIN') {
-          console.log('super, admin');
          markerOption.url = FlightIcon;
          markerOption.type = 'FLIGHT';
        } else {
@ -213,18 +212,18 @@ export const DronMarker = props => {
      handlerDronClick(marker.controlId, marker.id);
    });

-    naver.maps.Event.addListener(marker, 'mouseover', function (e) {
-      const data = {};
-      data.id = marker.id;
-      data.speed = marker.gps?.speed;
-      data.speedType = marker.gps?.speedType;
-      data.elev = marker.gps?.elev;
-      data.elevType = marker.gps?.elevType;
-      data.heading = marker.gps?.heading;
-      data.coord = marker.position;
-
-      infowindowOpen(data);
-    });
+    // naver.maps.Event.addListener(marker, 'mouseover', function (e) {
+    //   const data = {};
+    //   data.id = marker.id;
+    //   data.speed = marker.gps?.speed;
+    //   data.speedType = marker.gps?.speedType;
+    //   data.elev = marker.gps?.elev;
+    //   data.elevType = marker.gps?.elevType;
+    //   data.heading = marker.gps?.heading;
+    //   data.coord = marker.position;
+
+    //   infowindowOpen(data);
+    // });

    naver.maps.Event.addListener(marker, 'mouseout', function (e) {
      if (infoWindow) {
@ -232,6 +231,20 @@ export const DronMarker = props => {
      }
    });

+    // naver.maps.Event.addListener(map, 'zoom_changed', function (zoom) {
+    //   const a = document.getElementsByClassName('dblock-box');
+    //   console.log(zoom * 10);
+    //   console.log(zoom);
+    //   for (let i = 0; i < a.length; i++) {
+    //     a[i].style.width = `${zoom * 10 + 20}px`;
+    //     a[i].style.fontSize = `${zoom}px`;
+    //   }
+    //   // console.log(document.getElementsByClassName('dblock-box'));
+    //   // document.querySelector('.dblock-box').style.width = `${zoom * 10}px`;
+    //   // document.querySelector('.dblock-box').style.fontSize = `${zoom}px`;
+    //   // document.querySelector('.dblock-ti').style.fontSize = `${zoom}px`;
+    // });
+
    setArrMarkers(m => [...m, marker]);
  };

@ -290,9 +303,28 @@ export const DronMarker = props => {
    });
  };

-  const moveInfos = (info, position) => {
+  const moveInfos = (info, position, item, idx) => {
    if (info) {
      info.setPosition(position, info);
+      // info._element.html(`<div class="dblock-ti"><span>${info?._id}</span>
+      // <span>${item?.speed}${item?.speedType} | ${item?.elev}${item?.elevType} | ${item?.heading}</span></div>`);
+      info._element.html(` 
+      <div class="dblock-ti">
+        <span>${info?._id}</span>
+      </div>
+      <div class="dblock-txt>
+        <div class="dblock-txt-list">
+          <div>
+            <span style="width: 250px; display: inline-block;">${item?.speed}${
+        item?.speedType
+      } | ${item?.elev}${item?.elevType} | ${item?.heading}</span>
+            <span style="width: 250px; display: inline-block;">${(item?.lat).toFixed(
+              6
+            )} | ${(item?.lng).toFixed(6)}</span>
+          </div>
+        </div>
+      </div>
+    `);
    }
  };

@ -328,7 +360,7 @@ export const DronMarker = props => {
  const markerInit = () => {
    if (controlGpList) {
      allRemoveMarkers();
-      controlGpList.map(item => {
+      controlGpList.map((item, idx) => {
        let position = new naver.maps.LatLng(item.lat, item.lng);

        if (arrMarkers) {
@ -336,7 +368,7 @@ export const DronMarker = props => {
          const isInfos = arrInfos.find(info => info._id === item.objectId);
          if (isExists) {
            moveMarkers(isExists, position, item);
-            moveInfos(isInfos, position);
+            moveInfos(isInfos, position, item, idx);
          } else {
            addMarkers(position, item.objectId, item.controlId, item);
          }
@ -351,12 +383,24 @@ export const DronMarker = props => {
  const infoInit = (marker, gps, idx) => {
    CustomOverlay = function (options) {
      this._element = $(`
-            <div class="dblock-box" style="width: 140px;">
-              <div class="dblock-ti">
-                <span>${marker?.id}</span>
-                <span>${gps?.speed}${gps?.speedType} | ${gps?.elev}${gps?.elevType} | ${gps?.heading}</span>
-              </div>
+      
+      <div class="dblock-box" style="width:160px;font-size: 14px;">
+      <div class="dblock-ti">
+        <span>${marker?.id}</span>
+      </div>
+      <div class="dblock-txt>
+        <div class="dblock-txt-list">
+          <div>
+            <span style="width: 250px; display: inline-block;">${gps?.speed}${
+        gps?.speedType
+      } | ${gps?.elev}${gps?.elevType} | ${gps?.heading}</span>
+            <span style="width: 250px; display: inline-block;">${(gps?.lat).toFixed(
+              6
+            )} | ${(gps?.lng).toFixed(6)}</span>
          </div>
+        </div>
+      </div>
+    </div>
        `);

      // this._element = $(`
@ -421,6 +465,11 @@ export const DronMarker = props => {
      this._element.off();
    };

+    CustomOverlay.prototype.setElement = function (element, idx) {
+      this._element = element;
+      this.draw(idx);
+    };
+
    //속성
    CustomOverlay.prototype.setPosition = function (position, idx) {
      this._position = position;
@ -460,6 +509,7 @@ export const DronMarker = props => {
    arrMarkers.forEach((marker, idx) => {
      infoInit(marker, controlGpList[idx], idx);

+      if (arrInfos.filter(i => i._idx === idx).length > 0) return;
      if (controlGpList.length != 0) {
        const info = new CustomOverlay({
          position: new naver.maps.LatLng(
--- a/src/components/map/naver/feature/FeatureAirZone.js
+++ b/src/components/map/naver/feature/FeatureAirZone.js
@ -12,10 +12,12 @@ export const FeatureAirZone = props => {
  }, [mapControl]);

  useEffect(() => {
-    props.poly?.map(prev => {
-      prev.setMap(props.map);
+    props.poly?.map(air => {
+      air?.map(a => {
+        a.setMap(props.map);
+      });
    });
-  }, []);
+  }, [props.poly]);

  const infowindowOpen = data => {
    const content =
@ -120,12 +122,10 @@ export const FeatureAirZone = props => {
    });

    // const coordzip = [];
-    // let tt = 140;
+    // let tt = 0;
    // for (let i = 0; i <= 180; i++) {
-    //   const diff = tt;
-
    //   const coord1 = new naver.maps.EPSG3857.getDestinationCoord(
-    //     new naver.maps.LatLng(37.558522, 126.793722),
+    //     new naver.maps.LatLng(37.4588105, 126.4409428),
    //     tt,
    //     9300
    //   );