diff --git a/src/components/map/naver/dron/DronMarker.js b/src/components/map/naver/dron/DronMarker.js index c3441b9..539dcb1 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]);