|
|
|
@ -23,7 +23,7 @@ export const DronMarker = props => {
|
|
|
|
|
let CustomOverlay; |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if(arrMarkers.length != 0) markerInfo(arrMarkers); |
|
|
|
|
if(arrMarkers.length != 0) markerInfo(); |
|
|
|
|
}, [arrMarkers]) |
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -99,7 +99,6 @@ export const DronMarker = props => {
|
|
|
|
|
anchor: new naver.maps.Point(15, 15), |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
marker.setMap(props.map); |
|
|
|
|
|
|
|
|
|
// drone 정보 창
|
|
|
|
@ -151,23 +150,25 @@ export const DronMarker = props => {
|
|
|
|
|
//데이터가 없는 마커를 모두 삭제 한다.
|
|
|
|
|
const allRemoveMarkers = () => { |
|
|
|
|
if (arrMarkers && controlGpList) { |
|
|
|
|
|
|
|
|
|
arrMarkers.map(marker => { |
|
|
|
|
const isExists = controlGpList.find( |
|
|
|
|
item => item.objectId === marker.id |
|
|
|
|
const isExists = controlGpList.find( |
|
|
|
|
item => item.objectId === marker.id |
|
|
|
|
); |
|
|
|
|
if (!isExists) { |
|
|
|
|
removeMarkers(marker); |
|
|
|
|
const arrData = arrMarkers.filter( |
|
|
|
|
item => item.id != marker.id |
|
|
|
|
); |
|
|
|
|
if (!isExists) { |
|
|
|
|
removeMarkers(marker); |
|
|
|
|
const arrData = arrMarkers.filter( |
|
|
|
|
item => item.id != marker.id |
|
|
|
|
); |
|
|
|
|
removeArrMarkers(arrData); |
|
|
|
|
|
|
|
|
|
dispatch(objectUnClickAction()); |
|
|
|
|
} |
|
|
|
|
removeArrMarkers(arrData); |
|
|
|
|
|
|
|
|
|
dispatch(objectUnClickAction()); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
arrInfos.map(info => { |
|
|
|
|
const isExists = controlGpList.find( |
|
|
|
|
item => item.objectId === info._id |
|
|
|
|
const isExists = arrMarkers.find( |
|
|
|
|
marker => marker.id === info._id |
|
|
|
|
); |
|
|
|
|
if (!isExists) { |
|
|
|
|
removeInfos(info); |
|
|
|
@ -176,9 +177,10 @@ export const DronMarker = props => {
|
|
|
|
|
); |
|
|
|
|
removeArrInfos(arrData); |
|
|
|
|
|
|
|
|
|
dispatch(objectUnClickAction()); |
|
|
|
|
// dispatch(objectUnClickAction());
|
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
@ -209,25 +211,34 @@ export const DronMarker = props => {
|
|
|
|
|
const infoInit = (marker, gps, idx) => { |
|
|
|
|
CustomOverlay = function(options) { |
|
|
|
|
this._element = $(` |
|
|
|
|
<div class="tooltip-box" style="width: 150px;"> |
|
|
|
|
<div class="tooltip-ti"> |
|
|
|
|
<span>${marker.id}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="tooltip-txt> |
|
|
|
|
<div class="tooltip-txt-list"> |
|
|
|
|
<div> |
|
|
|
|
<span style="width: 120px; display: inline-block;">속도: ${gps.speed}${gps.speedType}</span> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<span style="width: 120px; display: inline-block;">고도: ${gps.elev}${gps.elevType}</span> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<span style="width: 120px; display: inline-block;">헤딩방향: ${gps.heading}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="dblock-box" style="width: 140px;"> |
|
|
|
|
<div class="dblock-ti"> |
|
|
|
|
<span>${marker?.id}</span> |
|
|
|
|
<span>${gps?.speed}${gps?.speedType} | ${gps?.elev}${gps?.elevType} | ${gps?.heading}</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
`)
|
|
|
|
|
|
|
|
|
|
// this._element = $(`
|
|
|
|
|
// <div class="tooltip-box" style="width: 150px;">
|
|
|
|
|
// <div class="tooltip-ti">
|
|
|
|
|
// <span>${marker?.id}</span>
|
|
|
|
|
// </div>
|
|
|
|
|
// <div class="tooltip-txt>
|
|
|
|
|
// <div class="tooltip-txt-list">
|
|
|
|
|
// <div>
|
|
|
|
|
// <span style="width: 120px; display: inline-block;">속도: ${gps?.speed}${gps?.speedType}</span>
|
|
|
|
|
// </div>
|
|
|
|
|
// <div>
|
|
|
|
|
// <span style="width: 120px; display: inline-block;">고도: ${gps?.elev}${gps?.elevType}</span>
|
|
|
|
|
// </div>
|
|
|
|
|
// <div>
|
|
|
|
|
// <span style="width: 120px; display: inline-block;">헤딩방향: ${gps?.heading}</span>
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
// `)
|
|
|
|
|
|
|
|
|
|
this.setPosition(options.position, idx); |
|
|
|
|
this.setMap(options.map || null); |
|
|
|
@ -255,15 +266,13 @@ export const DronMarker = props => {
|
|
|
|
|
position = this.getPosition(), |
|
|
|
|
pixelPosition = projection.fromCoordToOffset(position); |
|
|
|
|
|
|
|
|
|
let cnt = 0; |
|
|
|
|
|
|
|
|
|
if(idx) { |
|
|
|
|
let index = idx._idx; |
|
|
|
|
cnt = index * 100; |
|
|
|
|
this._element.css('left', pixelPosition.x) |
|
|
|
|
this._element.css('top', pixelPosition.y + -cnt) |
|
|
|
|
// let cnt = 0;
|
|
|
|
|
// let index = idx?._idx;
|
|
|
|
|
// cnt = index * 98;
|
|
|
|
|
this._element.css('left', pixelPosition.x) |
|
|
|
|
this._element.css('top', pixelPosition.y) |
|
|
|
|
// this._element.css('top', pixelPosition.y + -cnt)
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
CustomOverlay.prototype.onRemove = function() { |
|
|
|
@ -308,16 +317,18 @@ export const DronMarker = props => {
|
|
|
|
|
setArrInfos(arrData); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const markerInfo = (arrMarkers) => { |
|
|
|
|
const markerInfo = () => { |
|
|
|
|
arrMarkers.forEach((marker, 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, |
|
|
|
|
position: new naver.maps.LatLng(controlGpList[idx]?.lat, controlGpList[idx]?.lng), |
|
|
|
|
// map: map,
|
|
|
|
|
id: marker.id, |
|
|
|
|
idx: idx |
|
|
|
|
}); |
|
|
|
|
info.setMap(map); |
|
|
|
|
// console.log(info)
|
|
|
|
|
setArrInfos(m => [...m, info]); |
|
|
|
|
} |
|
|
|
|