|
|
@ -51,6 +51,14 @@ export const DronMarker = props => { |
|
|
|
// dispatch(controlGroupAuthAction.request());
|
|
|
|
// dispatch(controlGroupAuthAction.request());
|
|
|
|
// }, [controlGpList]);
|
|
|
|
// }, [controlGpList]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
dispatch( |
|
|
|
|
|
|
|
JOIN_LIST.request({ |
|
|
|
|
|
|
|
cstmrSno: user?.cstmrSno |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (count.drone.length > 0 || count.flight.length > 0) { |
|
|
|
if (count.drone.length > 0 || count.flight.length > 0) { |
|
|
|
dispatch( |
|
|
|
dispatch( |
|
|
@ -71,14 +79,6 @@ export const DronMarker = props => { |
|
|
|
} |
|
|
|
} |
|
|
|
}, [count]); |
|
|
|
}, [count]); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
dispatch( |
|
|
|
|
|
|
|
JOIN_LIST.request({ |
|
|
|
|
|
|
|
cstmrSno: user?.cstmrSno |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (arrMarkers.length != 0) { |
|
|
|
if (arrMarkers.length != 0) { |
|
|
|
markerInfo(arrMarkers); |
|
|
|
markerInfo(arrMarkers); |
|
|
@ -89,6 +89,31 @@ export const DronMarker = props => { |
|
|
|
markerInit(); |
|
|
|
markerInit(); |
|
|
|
}, [controlGpList]); |
|
|
|
}, [controlGpList]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Marker Click, UnClick 색상 변경 및 줌 변경
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
if (isClickObject) { |
|
|
|
|
|
|
|
const clickMarker = arrMarkers.filter(i => i.controlId === objectId)[0]; |
|
|
|
|
|
|
|
const el = document.getElementById(clickMarker.id); |
|
|
|
|
|
|
|
const { lng, lat } = clickMarker.position; |
|
|
|
|
|
|
|
if (clickMarker.type === 'DRONE') { |
|
|
|
|
|
|
|
el.src = DronDetailIcon; |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
el.src = FlightDetailIcon; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
props.map.flyTo({ center: [lng, lat], zoom: 13 }); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
arrMarkers.map(i => { |
|
|
|
|
|
|
|
const el = document.getElementById(i.id); |
|
|
|
|
|
|
|
if (i.type === 'DRONE') { |
|
|
|
|
|
|
|
el.src = DronIcon; |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
el.src = FlightIcon; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
props.map.flyTo({ center: [127.85101412107547, 37.520357], zoom: 8.5 }); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, [isClickObject]); |
|
|
|
|
|
|
|
|
|
|
|
// useEffect(() => {
|
|
|
|
// useEffect(() => {
|
|
|
|
// let imageUrl;
|
|
|
|
// let imageUrl;
|
|
|
|
// arrMarkers.map(clickMarker => {
|
|
|
|
// arrMarkers.map(clickMarker => {
|
|
|
@ -247,18 +272,13 @@ export const DronMarker = props => { |
|
|
|
marker.type = markerOption.type; |
|
|
|
marker.type = markerOption.type; |
|
|
|
marker.gps = gps; |
|
|
|
marker.gps = gps; |
|
|
|
marker.position = position; |
|
|
|
marker.position = position; |
|
|
|
marker.icon = { |
|
|
|
|
|
|
|
content: `<img id=${id} src="${markerOption.url}" alt="" style="transform: rotate(${gps.heading}deg);">`, |
|
|
|
|
|
|
|
origin: markerOption.origin, |
|
|
|
|
|
|
|
anchor: markerOption.anchor |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
dispatch(controlGpFlightPlanAction.request(marker.id)); //예상경로
|
|
|
|
dispatch(controlGpFlightPlanAction.request(marker.id)); //예상경로
|
|
|
|
// dispatch(controlGpHisAction.request({ id: marker.controlId })); //진행경로;
|
|
|
|
// dispatch(controlGpHisAction.request({ id: marker.controlId })); //진행경로;
|
|
|
|
|
|
|
|
|
|
|
|
/** drone 상세보기 */ |
|
|
|
/** drone 상세보기 */ |
|
|
|
marker.getElement().addEventListener('click', function (e) { |
|
|
|
marker.getElement().addEventListener('click', function (e) { |
|
|
|
handlerDronClick(marker.controlId, marker.id); |
|
|
|
handlerDronClick(marker); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
if (markerOption.url) { |
|
|
|
if (markerOption.url) { |
|
|
@ -266,10 +286,9 @@ export const DronMarker = props => { |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handlerDronClick = (controlId, idntfNum) => { |
|
|
|
const handlerDronClick = marker => { |
|
|
|
// get detail, history, flight-plan
|
|
|
|
dispatch(objectClickAction(marker.controlId)); |
|
|
|
dispatch(objectClickAction(controlId)); |
|
|
|
dispatch(controlGpDtlAction.request(marker.controlId)); |
|
|
|
dispatch(controlGpDtlAction.request(controlId)); |
|
|
|
|
|
|
|
// dispatch(controlGpFlightPlanAction.request(idntfNum));
|
|
|
|
// dispatch(controlGpFlightPlanAction.request(idntfNum));
|
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|