관제 - 데이터블록 css 변경

src/assets/css/custom.css

@@ -414,6 +414,12 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon
 .tooltip-txt-list + .tooltip-txt-list{margin-top:4px;}
 .tooltip-box .arrow {position:absolute;bottom:-10px;left:50%;transform: translateX(-50%);display:block;width: 0px;height: 0px;border-top:10px solid #283046;border-bottom:10px solid none;border-right: 10px solid transparent;border-left: 10px solid  transparent;}
 
+/* 데이터블록 */
+.dblock-box{background:#283046;padding:10px;border-radius:6px;position:absolute;}
+.dblock-box div{text-align:left;font-size:10px;color:#bbb;}
+.dblock-ti span, .block-txt .ti{color:#f4f4f4;font-weight:500;display:block;}
+.dblock-txt{padding-top:4px;}
+
 /*회원가입*/
 .pal-register .auth-wrapper.auth-v1 .auth-inner{max-width:1200px;}
 .pal-register .content-header .sub-txt{display:block;margin-bottom:1rem;}

src/components/map/naver/dron/DronMarker.js

@@ -23,7 +23,7 @@ export const DronMarker = props => {
     let CustomOverlay;
 
     useEffect(() => {
-      if(arrMarkers.length != 0) markerInfo(arrMarkers);
+      if(arrMarkers.length != 0) markerInfo();
     }, [arrMarkers])
 
 
@@ -99,7 +99,6 @@ export const DronMarker = props => {
                 anchor: new naver.maps.Point(15, 15),
             }
         });
-
         marker.setMap(props.map);
 
         // drone 정보 창
@@ -151,6 +150,7 @@ export const DronMarker = props => {
     //데이터가 없는 마커를 모두 삭제 한다.
     const allRemoveMarkers = () => {
         if (arrMarkers && controlGpList) {
+
             arrMarkers.map(marker => {
               const isExists = controlGpList.find(
                 item => item.objectId === marker.id
@@ -165,9 +165,10 @@ export const DronMarker = props => {
                 dispatch(objectUnClickAction());
               }
             });
+
             arrInfos.map(info => {
-              const isExists = controlGpList.find(
-                  item => item.objectId === info._id
+              const isExists = arrMarkers.find(
+                marker => marker.id === info._id
               );
               if (!isExists) {
                   removeInfos(info);
@@ -176,9 +177,10 @@ export const DronMarker = props => {
                   );
                   removeArrInfos(arrData);
 
-                  dispatch(objectUnClickAction());
+                  // dispatch(objectUnClickAction());
               }
           });
+          
         }
     };
 
@@ -209,26 +211,35 @@ export const DronMarker = props => {
     const infoInit = (marker, gps, idx) => {
       CustomOverlay = function(options) {
         this._element = $(`
-            <div class="tooltip-box" style="width: 150px;">
-            <div class="tooltip-ti">
-            <span>${marker.id}</span>
-            </div>
-            <div class="tooltip-txt>
-              <div class="tooltip-txt-list">
-                <div>
-                  <span style="width: 120px; display: inline-block;">속도: ${gps.speed}${gps.speedType}</span>
-                </div>
-                <div>
-                  <span style="width: 120px; display: inline-block;">고도: ${gps.elev}${gps.elevType}</span>
-                </div>
-                <div>
-                  <span style="width: 120px; display: inline-block;">헤딩방향: ${gps.heading}</span>
-                </div>
-              </div>
+            <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>
         `)
 
+        // this._element = $(`
+        //     <div class="tooltip-box" style="width: 150px;">
+        //     <div class="tooltip-ti">
+        //     <span>${marker?.id}</span>
+        //     </div>
+        //     <div class="tooltip-txt>
+        //       <div class="tooltip-txt-list">
+        //         <div>
+        //           <span style="width: 120px; display: inline-block;">속도: ${gps?.speed}${gps?.speedType}</span>
+        //         </div>
+        //         <div>
+        //           <span style="width: 120px; display: inline-block;">고도: ${gps?.elev}${gps?.elevType}</span>
+        //         </div>
+        //         <div>
+        //           <span style="width: 120px; display: inline-block;">헤딩방향: ${gps?.heading}</span>
+        //         </div>
+        //       </div>
+        //     </div>
+        //   </div>
+        // `)
+    
         this.setPosition(options.position, idx);
         this.setMap(options.map || null);
         this.setId(options.id);
@@ -255,15 +266,13 @@ export const DronMarker = props => {
         position = this.getPosition(),
         pixelPosition = projection.fromCoordToOffset(position);
         
-        let cnt = 0;
-        
-        if(idx) {
-          let index = idx._idx;
-          cnt = index * 100;
+        // let cnt = 0;
+        // let index = idx?._idx;
+        // cnt = index * 98;
         this._element.css('left', pixelPosition.x)
-          this._element.css('top', pixelPosition.y + -cnt)
+        this._element.css('top', pixelPosition.y)
+        // this._element.css('top', pixelPosition.y + -cnt)
   
-        }
       };
     
       CustomOverlay.prototype.onRemove = function() {
@@ -308,16 +317,18 @@ export const DronMarker = props => {
       setArrInfos(arrData);
     };
 
-    const markerInfo = (arrMarkers) => {
+    const markerInfo = () => {
       arrMarkers.forEach((marker, idx) => {
         infoInit(marker, controlGpList[idx], idx);
+
         if(controlGpList.length != 0) {
           const info = new CustomOverlay({
-            position: new naver.maps.LatLng(controlGpList[idx].lat, controlGpList[idx].lng),
-            map: map,
+            position: new naver.maps.LatLng(controlGpList[idx]?.lat, controlGpList[idx]?.lng),
+            // map: map,
             id: marker.id,
             idx: idx
           });
+          info.setMap(map);
           // console.log(info)
           setArrInfos(m => [...m, info]);
         }