diff --git a/src/components/map/naver/dron/DronMarker.js b/src/components/map/naver/dron/DronMarker.js
index c3441b97..539dcb13 100644
--- a/src/components/map/naver/dron/DronMarker.js
+++ b/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 = ['
dddd', '
'].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) => {
- if(info) {
- info.setPosition(position);
+ };
+
+ const moveInfos = (info, position) => {
+ if(info) {
+ 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 = $(`
@@ -236,9 +229,10 @@ export const DronMarker = props => {
`)
- 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(),
- position = this.getPosition(),
- pixelPosition = projection.fromCoordToOffset(position);
-
- this._element.css('left', pixelPosition.x);
- this._element.css('top', pixelPosition.y);
+
+ let projection = this.getProjection(),
+ position = this.getPosition(),
+ pixelPosition = projection.fromCoordToOffset(position);
+
+ let cnt = 0;
+
+ 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]);