관제 - 데이터블록 움직임 수정

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

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import '../../../../assets/css/custom.css';
 import DronIconPulple from '../../../../assets/images/drone-marker-icon-pulple.png';
 import DronIcon from '../../../../assets/images/drone-marker-icon.png';
-import { controlGpDtlAction, controlGpHisAction, controlDbHisAction, controlGpFlightPlanAction, controlGpLogAction } from '../../../../modules/control/gp';
+import { controlGpDtlAction, controlGpFlightPlanAction } from '../../../../modules/control/gp';
 import { objectClickAction, objectUnClickAction } from '../../../../modules/control/map/actions/controlMapActions';
 import { toast } from 'react-toastify';
 import DronToast from './DronToast';
@@ -13,7 +13,6 @@ export const DronMarker = props => {
     const dispatch = useDispatch();
 
     const { controlGpList } = useSelector(state => state.controlGpState);
-    const { controlGroupAuthInfo } = useSelector(state => state.controlGroupAuthState);
     const { objectId, isClickObject } = useSelector(state => state.controlMapReducer);
 
     const [arrMarkers, setArrMarkers] = useState([]);
@@ -21,16 +20,10 @@ export const DronMarker = props => {
 
     let naver = props.naver;
     let map = props.map;
-
     let CustomOverlay;
 
-    var contentString = ['<div class="iw_inner"> dddd', '</div>'].join('');
-    var infowindow = new naver.maps.InfoWindow({
-        content: contentString
-    });
-
     useEffect(() => {
-      if(arrMarkers.length != 0) markerInfo(arrMarkers)
+      if(arrMarkers.length != 0) markerInfo(arrMarkers);
     }, [arrMarkers])
 
 
@@ -147,11 +140,11 @@ export const DronMarker = props => {
     //마커에 위치를 이동한다.
     const moveMarkers = (marker, position) => {
         marker.setPosition(position);
-    };
+      };
-
+      
-    const moveInfos = (info, position) => {
+      const moveInfos = (info, position) => {
-      if(info) {
+        if(info) {
-        info.setPosition(position);
+          info.setPosition(position, info);
       }
     };
 
@@ -194,7 +187,7 @@ export const DronMarker = props => {
         if (controlGpList) {
             allRemoveMarkers();
             controlGpList.map(item => {
-                const position = new naver.maps.LatLng(item.lat, item.lng);
+                let position = new naver.maps.LatLng(item.lat, item.lng);
 
                 if (arrMarkers) {
                     const isExists = arrMarkers.find( ele => ele.id === item.objectId );
@@ -213,7 +206,7 @@ export const DronMarker = props => {
     };
 
     //운항정보 창 셋팅
-    const infoInit = (marker, gps) => {
+    const infoInit = (marker, gps, idx) => {
       CustomOverlay = function(options) {
         this._element = $(`
             <div class="tooltip-box" style="width: 150px;">
@@ -236,9 +229,10 @@ export const DronMarker = props => {
           </div>
         `)
     
-        this.setPosition(options.position);
+        this.setPosition(options.position, idx);
         this.setMap(options.map || null);
         this.setId(options.id);
+        this.setIdx(idx);
       };
     
       CustomOverlay.prototype = new naver.maps.OverlayView();
@@ -247,35 +241,46 @@ export const DronMarker = props => {
       //메소드 재정의
       //필수
       CustomOverlay.prototype.onAdd = function() {
-        var overlayLayer = this.getPanes().overlayLayer;
+        let overlayLayer = this.getPanes().overlayLayer;
     
         this._element.appendTo(overlayLayer);
       };
     
-      CustomOverlay.prototype.draw = function() {
+      CustomOverlay.prototype.draw = function(idx) {
         if (!this.getMap()) {
             return;
         }
-    
+        
-        var projection = this.getProjection(),
+        let projection = this.getProjection(),
-            position = this.getPosition(),
+        position = this.getPosition(),
-            pixelPosition = projection.fromCoordToOffset(position);
+        pixelPosition = projection.fromCoordToOffset(position);
-    
+        
-        this._element.css('left', pixelPosition.x);
+        let cnt = 0;
-        this._element.css('top', pixelPosition.y);
+        
+        if(idx) {
+          let index = idx._idx;
+          if(index) {
+            for(let i = index; i < index+1; i++) {
+              cnt = i * 100;
+            }
+          }
+          this._element.css('left', pixelPosition.x)
+          this._element.css('top', pixelPosition.y + -cnt)
+  
+        }
       };
     
       CustomOverlay.prototype.onRemove = function() {
-          var overlayLayer = this.getPanes().overlayLayer;
+          let overlayLayer = this.getPanes().overlayLayer;
     
           this._element.remove();
           this._element.off();
       };
     
       //속성
-      CustomOverlay.prototype.setPosition = function(position) {
+      CustomOverlay.prototype.setPosition = function(position, idx) {
           this._position = position;
-          this.draw();
+          this.draw(idx);
       };
     
       CustomOverlay.prototype.getPosition = function() {
@@ -286,9 +291,17 @@ export const DronMarker = props => {
         this._id = id;
       };
 
-      CustomOverlay.prototype.getId = function(id) {
+      CustomOverlay.prototype.getId = function() {
         return this._id;
       };
+
+      CustomOverlay.prototype.setIdx = function(idx) {
+        this._idx = idx;
+      };
+
+      CustomOverlay.prototype.getIdx = function() {
+        return this._idx;
+      };
     }
 
     const removeArrMarkers = arrData => {
@@ -301,12 +314,13 @@ export const DronMarker = props => {
 
     const markerInfo = (arrMarkers) => {
       arrMarkers.forEach((marker, idx) => {
-        infoInit(marker, controlGpList[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,
-            id: marker.id
+            id: marker.id,
+            idx: idx
           });
           // console.log(info)
           setArrInfos(m => [...m, info]);