|
|
|
@ -16,15 +16,73 @@ export const DronMarker = props => {
|
|
|
|
|
const { objectId, isClickObject } = useSelector(state => state.controlMapReducer); |
|
|
|
|
|
|
|
|
|
const [arrMarkers, setArrMarkers] = useState([]); |
|
|
|
|
const [arrInfos, setArrInfos] = useState([]); |
|
|
|
|
// const [arrInfos, setArrInfos] = useState([]);
|
|
|
|
|
|
|
|
|
|
let naver = props.naver; |
|
|
|
|
let map = props.map; |
|
|
|
|
let CustomOverlay; |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if(arrMarkers.length != 0) markerInfo(); |
|
|
|
|
}, [arrMarkers]) |
|
|
|
|
let infoWindow; |
|
|
|
|
const infowindowOpen = (data) => { |
|
|
|
|
|
|
|
|
|
const content = ` |
|
|
|
|
<div class="dblock-box"> |
|
|
|
|
<div class="dblock-ti"> |
|
|
|
|
<span>${data?.id}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="dblock-txt> |
|
|
|
|
<div class="dblock-txt-list"> |
|
|
|
|
<div> |
|
|
|
|
<span style="width: 250px; display: inline-block;">${data?.speed}${data?.speedType} | ${data?.elev}${data?.elevType} | ${data?.heading}</span> |
|
|
|
|
<span style="width: 250px; display: inline-block;">${data?.coord._lat} | ${data?.coord._lng}</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
// <div class="dblock-box">
|
|
|
|
|
// <div class="dblock-ti">
|
|
|
|
|
// <span>${data?.id}</span>
|
|
|
|
|
// </div>
|
|
|
|
|
// <div class="dblock-txt>
|
|
|
|
|
// <div class="dblock-txt-list">
|
|
|
|
|
// <div>
|
|
|
|
|
// <span style="width: 120px; display: inline-block;">속도: ${data?.speed}${data?.speedType}</span>
|
|
|
|
|
// </div>
|
|
|
|
|
// <div>
|
|
|
|
|
// <span style="width: 120px; display: inline-block;">고도: ${data?.elev}${data?.elevType}</span>
|
|
|
|
|
// </div>
|
|
|
|
|
// <div>
|
|
|
|
|
// <span style="width: 120px; display: inline-block;">헤딩방향: ${data?.heading}</span>
|
|
|
|
|
// </div>
|
|
|
|
|
// <div>
|
|
|
|
|
// <span style="width: 120px; display: inline-block;">위치: ${data?.coord._lat} | ${data?.coord._lng}</span>
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
|
|
|
|
|
infoWindow = new naver.maps.InfoWindow({ |
|
|
|
|
class: 'tooltip-dblock', |
|
|
|
|
content: content, |
|
|
|
|
maxWidth: 140, |
|
|
|
|
backgroundColor: '#283046', //박스안쪽영역 컬러
|
|
|
|
|
// borderColor: '#333', //테두리컬러
|
|
|
|
|
// borderWidth: 3, //테두리 굵기
|
|
|
|
|
// anchorSize: new naver.maps.Size(30, -10),
|
|
|
|
|
anchorSkew: false, |
|
|
|
|
anchorColor: '#283046', |
|
|
|
|
|
|
|
|
|
pixelOffset: new naver.maps.Point(20, -20) |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
infoWindow.open(props.map, data.coord); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// useEffect(() => {
|
|
|
|
|
// if(arrMarkers.length != 0) markerInfo();
|
|
|
|
|
// }, [arrMarkers])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
@ -82,8 +140,9 @@ export const DronMarker = props => {
|
|
|
|
|
}, [objectId]); |
|
|
|
|
|
|
|
|
|
//마커를 그린다.
|
|
|
|
|
const addMarkers = (position, id, controlId) => { |
|
|
|
|
let marker = new naver.maps.Marker({ |
|
|
|
|
const addMarkers = (position, id, controlId, gps) => { |
|
|
|
|
// console.log(gps, '>>>.')
|
|
|
|
|
const marker = new naver.maps.Marker({ |
|
|
|
|
position: position, |
|
|
|
|
title: id, |
|
|
|
|
id: id, |
|
|
|
@ -97,19 +156,48 @@ export const DronMarker = props => {
|
|
|
|
|
// size: new naver.maps.Size(50, 50),
|
|
|
|
|
origin: new naver.maps.Point(0, 0), |
|
|
|
|
anchor: new naver.maps.Point(15, 15), |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
gps: gps |
|
|
|
|
}); |
|
|
|
|
marker.setMap(props.map); |
|
|
|
|
|
|
|
|
|
// drone 정보 창
|
|
|
|
|
naver.maps.Event.addListener(marker, 'click', function (e) { |
|
|
|
|
handlerDronClick(marker.controlId, marker.id); |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
naver.maps.Event.addListener(marker, 'mouseover', function(e) { |
|
|
|
|
// // handlerDronMouseOver(marker);
|
|
|
|
|
|
|
|
|
|
const data = {}; |
|
|
|
|
data.id = marker.id; |
|
|
|
|
// data.lat = marker.position._lat;
|
|
|
|
|
// data.lng = marker.position._lng;
|
|
|
|
|
data.speed = marker.gps?.speed; |
|
|
|
|
data.speedType = marker.gps?.speedType; |
|
|
|
|
data.elev = marker.gps?.elev; |
|
|
|
|
data.elevType = marker.gps?.elevType; |
|
|
|
|
data.heading = marker.gps?.heading; |
|
|
|
|
data.coord = marker.position; |
|
|
|
|
|
|
|
|
|
infowindowOpen(data); |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
naver.maps.Event.addListener(marker, 'mouseout', function(e) { |
|
|
|
|
if (infoWindow) { |
|
|
|
|
infoWindow.close(); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
setArrMarkers(m => [...m, marker]); |
|
|
|
|
// markerInfo(marker, position, id);
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlerDronMouseOver = (marker) => { |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const handlerDronClick = (controlId, idntfNum) => { |
|
|
|
|
// const idntfNum = marker.id;
|
|
|
|
|
// const contorlId = marker.controlId;
|
|
|
|
@ -141,9 +229,9 @@ export const DronMarker = props => {
|
|
|
|
|
marker.setPosition(position); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const moveInfos = (info, position) => { |
|
|
|
|
if(info) { |
|
|
|
|
info.setPosition(position, info); |
|
|
|
|
const moveInfos = (info, position) => { |
|
|
|
|
if(info) { |
|
|
|
|
info.setPosition(position, info); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
@ -166,20 +254,20 @@ export const DronMarker = props => {
|
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
arrInfos.map(info => { |
|
|
|
|
const isExists = arrMarkers.find( |
|
|
|
|
marker => marker.id === info._id |
|
|
|
|
); |
|
|
|
|
if (!isExists) { |
|
|
|
|
removeInfos(info); |
|
|
|
|
const arrData = arrInfos.filter( |
|
|
|
|
item => item.id != info._id |
|
|
|
|
); |
|
|
|
|
removeArrInfos(arrData); |
|
|
|
|
|
|
|
|
|
// dispatch(objectUnClickAction());
|
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
// arrInfos.map(info => {
|
|
|
|
|
// const isExists = arrMarkers.find(
|
|
|
|
|
// marker => marker.id === info._id
|
|
|
|
|
// );
|
|
|
|
|
// if (!isExists) {
|
|
|
|
|
// removeInfos(info);
|
|
|
|
|
// const arrData = arrInfos.filter(
|
|
|
|
|
// item => item.id != info._id
|
|
|
|
|
// );
|
|
|
|
|
// removeArrInfos(arrData);
|
|
|
|
|
|
|
|
|
|
// // dispatch(objectUnClickAction());
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
@ -193,15 +281,15 @@ export const DronMarker = props => {
|
|
|
|
|
|
|
|
|
|
if (arrMarkers) { |
|
|
|
|
const isExists = arrMarkers.find( ele => ele.id === item.objectId ); |
|
|
|
|
const isInfos = arrInfos.find( info => info._id === item.objectId ) |
|
|
|
|
// const isInfos = arrInfos.find( info => info._id === item.objectId )
|
|
|
|
|
if (isExists) { |
|
|
|
|
moveMarkers(isExists, position); |
|
|
|
|
moveInfos(isInfos, position); |
|
|
|
|
// moveInfos(isInfos, position);
|
|
|
|
|
} else { |
|
|
|
|
addMarkers(position, item.objectId, item.controlId); |
|
|
|
|
addMarkers(position, item.objectId, item.controlId, item); |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
addMarkers(position, item.objectId, item.controlId); |
|
|
|
|
addMarkers(position, item.objectId, item.controlId, item); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
@ -319,7 +407,7 @@ export const DronMarker = props => {
|
|
|
|
|
|
|
|
|
|
const markerInfo = () => { |
|
|
|
|
arrMarkers.forEach((marker, idx) => { |
|
|
|
|
infoInit(marker, controlGpList[idx], idx); |
|
|
|
|
// infoInit(marker, controlGpList[idx], idx);
|
|
|
|
|
|
|
|
|
|
if(controlGpList.length != 0) { |
|
|
|
|
const info = new CustomOverlay({ |
|
|
|
|