|
|
|
@ -1,12 +1,12 @@
|
|
|
|
|
import { useEffect } from 'react'; |
|
|
|
|
import { object } from 'prop-types'; |
|
|
|
|
import { useEffect, useState } from 'react'; |
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
import { controlGpHisAction } from '../../../../modules/control/gp'; |
|
|
|
|
|
|
|
|
|
export const DronHistory = props => { |
|
|
|
|
const { controlGpHistory } = useSelector(state => state.controlGpHisState); |
|
|
|
|
const { objectId, isClickObject } = useSelector( |
|
|
|
|
state => state.controlMapReducer |
|
|
|
|
); |
|
|
|
|
const { controlGpList } = useSelector(state => state.controlGpState); |
|
|
|
|
const { objectId, isClickObject } = useSelector(state => state.controlMapReducer);
|
|
|
|
|
|
|
|
|
|
let naver = props.naver; |
|
|
|
|
let polyline; |
|
|
|
@ -15,7 +15,25 @@ export const DronHistory = props => {
|
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
polylineInit(); |
|
|
|
|
if(objectId && isClickObject) {
|
|
|
|
|
const gps = controlGpList.find((gps) => gps.controlId === objectId)
|
|
|
|
|
|
|
|
|
|
if(gps) { |
|
|
|
|
const addHistory = { |
|
|
|
|
objectId: gps.objectId, |
|
|
|
|
lat: gps.lat, |
|
|
|
|
lng: gps.lng |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const history = [...controlGpHistory, addHistory];
|
|
|
|
|
|
|
|
|
|
polylineInit(history);
|
|
|
|
|
}
|
|
|
|
|
} |
|
|
|
|
}, [controlGpList]); |
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
polylineInit(controlGpHistory)
|
|
|
|
|
}, [controlGpHistory]); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
@ -27,15 +45,14 @@ export const DronHistory = props => {
|
|
|
|
|
}, [objectId, isClickObject]); |
|
|
|
|
|
|
|
|
|
const polylineRemove = () => {
|
|
|
|
|
// console.log(props.arrPolyline);
|
|
|
|
|
if (props.arrPolyline) { |
|
|
|
|
props.arrPolyline.map(item => { |
|
|
|
|
item.setMap(null); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
const polylineInit = () => { |
|
|
|
|
if (controlGpHistory) { |
|
|
|
|
const polylineInit = (history) => { |
|
|
|
|
if (history) { |
|
|
|
|
polyline = new naver.maps.Polyline({ |
|
|
|
|
clickable: false, |
|
|
|
|
strokeColor: '#ff4961', |
|
|
|
@ -44,12 +61,11 @@ export const DronHistory = props => {
|
|
|
|
|
strokeWeight: 1.5 |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
controlGpHistory.map(item => { |
|
|
|
|
history.map(item => { |
|
|
|
|
if (item.lat > 0 && item.lng > 0) { |
|
|
|
|
const position = new naver.maps.LatLng(item.lat, item.lng); |
|
|
|
|
polylinePath.push(position); |
|
|
|
|
}
|
|
|
|
|
// console.log('>>>>>>>>>>>', item);
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
polyline.setPath(polylinePath); |
|
|
|
|