|
|
|
@ -1,9 +1,9 @@
|
|
|
|
|
import { useEffect } from 'react'; |
|
|
|
|
import { useEffect, useState } from 'react'; |
|
|
|
|
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 } from '../../../../modules/control/gp'; |
|
|
|
|
import { controlGpDtlAction, controlGpHisAction, controlDbHisAction } from '../../../../modules/control/gp'; |
|
|
|
|
import { objectClickAction } from '../../../../modules/control/map/actions/controlMapActions'; |
|
|
|
|
|
|
|
|
|
export const DronMarker = props => { |
|
|
|
@ -21,14 +21,14 @@ export const DronMarker = props => {
|
|
|
|
|
content: contentString |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const [arrMarkers, setArrMarkers] = useState([]); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
markerInit(); |
|
|
|
|
}, [controlGpList]); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
console.log('>>>>>>>>>>>>>>>>', objectId, isClickObject); |
|
|
|
|
|
|
|
|
|
props.arrMarkers.map(clickMarker => { |
|
|
|
|
arrMarkers.map(clickMarker => { |
|
|
|
|
if (objectId === clickMarker.id && isClickObject) { |
|
|
|
|
// clickMarker.setIcon(DronIconPulple);
|
|
|
|
|
clickMarker.setIcon({ |
|
|
|
@ -36,26 +36,20 @@ export const DronMarker = props => {
|
|
|
|
|
origin: new naver.maps.Point(0, 0), |
|
|
|
|
anchor: new naver.maps.Point(15, 15), |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
// clickMarker.setIcon(DronIcon);
|
|
|
|
|
} else {
|
|
|
|
|
clickMarker.setIcon({ |
|
|
|
|
url: DronIcon, |
|
|
|
|
origin: new naver.maps.Point(0, 0), |
|
|
|
|
anchor: new naver.maps.Point(15, 15), |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
// }else{
|
|
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
});
|
|
|
|
|
}, [objectId, isClickObject]); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
props.arrMarkers.map(clickMarker => { |
|
|
|
|
if (objectId === clickMarker.id) { |
|
|
|
|
console.log(clickMarker); |
|
|
|
|
props.map.setCenter(clickMarker.getPosition()); |
|
|
|
|
// $('#btn_modal').click();
|
|
|
|
|
arrMarkers.map(clickMarker => { |
|
|
|
|
if (objectId === clickMarker.id) {
|
|
|
|
|
props.map.setCenter(clickMarker.getPosition());
|
|
|
|
|
props.map.setZoom(13, true); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
@ -84,30 +78,18 @@ export const DronMarker = props => {
|
|
|
|
|
|
|
|
|
|
naver.maps.Event.addListener(marker, 'click', function (e) { |
|
|
|
|
handlerDronClick(marker); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
props.arrMarkers.push(marker); |
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
setArrMarkers(m => [...m, marker]); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlerDronClick = marker => { |
|
|
|
|
if (marker.getAnimation() != null) { |
|
|
|
|
// marker.setAnimation(null);
|
|
|
|
|
// infowindow.close();
|
|
|
|
|
// dispatch(Actions.controlGpHisAction.request(controlGpList));
|
|
|
|
|
} else { |
|
|
|
|
// infowindow.open(props.map, marker);
|
|
|
|
|
// marker.setAnimation(naver.maps.Animation.BOUNCE);
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// marker.setIcon(DronIconPulple);
|
|
|
|
|
// console.log(marker.id);
|
|
|
|
|
const markerId = marker.id; |
|
|
|
|
const contorlId = marker.controlId; |
|
|
|
|
console.log('contorlId ::::::::::< ', marker.controlId); |
|
|
|
|
//히스토리 불러오기
|
|
|
|
|
const handlerDronClick = marker => {
|
|
|
|
|
// const markerId = marker.id;
|
|
|
|
|
const contorlId = marker.controlId;
|
|
|
|
|
|
|
|
|
|
dispatch(objectClickAction(markerId)); |
|
|
|
|
dispatch(controlGpDtlAction.request(contorlId)); |
|
|
|
|
//히스토리 불러오기
|
|
|
|
|
dispatch(objectClickAction(contorlId)); |
|
|
|
|
dispatch(controlGpDtlAction.request(contorlId));
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
//마커를 삭제 한다.
|
|
|
|
@ -116,52 +98,54 @@ export const DronMarker = props => {
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
//마커에 위치를 이동한다.
|
|
|
|
|
const moveMarkers = (marker, position) => { |
|
|
|
|
// console.log(marker);
|
|
|
|
|
const moveMarkers = (marker, position) => {
|
|
|
|
|
marker.setPosition(position); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
//데이터가 없는 마커를 모두 삭제 한다.
|
|
|
|
|
const allRemoveMarkers = () => { |
|
|
|
|
if (props.arrMarkers && controlGpList) { |
|
|
|
|
props.arrMarkers.map(marker => { |
|
|
|
|
if (arrMarkers && controlGpList) { |
|
|
|
|
arrMarkers.map(marker => { |
|
|
|
|
const isExists = controlGpList.find( |
|
|
|
|
item => item.objectId === marker.id |
|
|
|
|
); |
|
|
|
|
if (!isExists) { |
|
|
|
|
removeMarkers(marker); |
|
|
|
|
const arrData = props.arrMarkers.filter( |
|
|
|
|
item => item.objectId != marker.id |
|
|
|
|
const arrData = arrMarkers.filter( |
|
|
|
|
item => item.id != marker.id |
|
|
|
|
); |
|
|
|
|
props.removeArrMarkers(arrData); |
|
|
|
|
removeArrMarkers(arrData); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
//마커를 셋팅 한다.
|
|
|
|
|
const markerInit = () => { |
|
|
|
|
if (controlGpList) { |
|
|
|
|
allRemoveMarkers(); |
|
|
|
|
allRemoveMarkers();
|
|
|
|
|
controlGpList.map(item => { |
|
|
|
|
const position = new naver.maps.LatLng(item.lat, item.lng); |
|
|
|
|
if (props.arrMarkers) { |
|
|
|
|
const isExists = props.arrMarkers.find( |
|
|
|
|
|
|
|
|
|
if (arrMarkers) {
|
|
|
|
|
const isExists = arrMarkers.find( |
|
|
|
|
ele => ele.id === item.objectId |
|
|
|
|
); |
|
|
|
|
if (isExists) { |
|
|
|
|
if (isExists) {
|
|
|
|
|
moveMarkers(isExists, position); |
|
|
|
|
} else { |
|
|
|
|
// console.log(' ADD >>>', props.arrMarkers);
|
|
|
|
|
addMarkers(position, item.objectId, item.controlId); |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
} else {
|
|
|
|
|
addMarkers(position, item.objectId, item.controlId); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const removeArrMarkers = arrData => {
|
|
|
|
|
setArrMarkers(arrData); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return null; |
|
|
|
|
}; |
|
|
|
|