|
|
@ -43,45 +43,45 @@ export const DronMarker = props => { |
|
|
|
let map = props.map; |
|
|
|
let map = props.map; |
|
|
|
let CustomOverlay; |
|
|
|
let CustomOverlay; |
|
|
|
let infoWindow; |
|
|
|
let infoWindow; |
|
|
|
const infowindowOpen = data => { |
|
|
|
// const infowindowOpen = data => {
|
|
|
|
const content = ` |
|
|
|
// const content = `
|
|
|
|
<div class="dblock-box"> |
|
|
|
// <div class="dblock-box">
|
|
|
|
<div class="dblock-ti"> |
|
|
|
// <div class="dblock-ti">
|
|
|
|
<span>${data?.id}</span> |
|
|
|
// <span>${data?.id}</span>
|
|
|
|
</div> |
|
|
|
// </div>
|
|
|
|
<div class="dblock-txt> |
|
|
|
// <div class="dblock-txt>
|
|
|
|
<div class="dblock-txt-list"> |
|
|
|
// <div class="dblock-txt-list">
|
|
|
|
<div> |
|
|
|
// <div>
|
|
|
|
<span style="width: 250px; display: inline-block;">${ |
|
|
|
// <span style="width: 250px; display: inline-block;">${
|
|
|
|
data?.speed |
|
|
|
// data?.speed
|
|
|
|
}${data?.speedType} | ${data?.elev}${data?.elevType} | ${ |
|
|
|
// }${data?.speedType} | ${data?.elev}${data?.elevType} | ${
|
|
|
|
data?.heading |
|
|
|
// data?.heading
|
|
|
|
}</span> |
|
|
|
// }</span>
|
|
|
|
<span style="width: 250px; display: inline-block;">${(data?.coord._lat).toFixed( |
|
|
|
// <span style="width: 250px; display: inline-block;">${(data?.coord._lat).toFixed(
|
|
|
|
6 |
|
|
|
// 6
|
|
|
|
)} | ${(data?.coord._lng).toFixed(6)}</span> |
|
|
|
// )} | ${(data?.coord._lng).toFixed(6)}</span>
|
|
|
|
</div> |
|
|
|
// </div>
|
|
|
|
</div> |
|
|
|
// </div>
|
|
|
|
</div> |
|
|
|
// </div>
|
|
|
|
</div> |
|
|
|
// </div>
|
|
|
|
`;
|
|
|
|
// `;
|
|
|
|
|
|
|
|
|
|
|
|
infoWindow = new naver.maps.InfoWindow({ |
|
|
|
// infoWindow = new naver.maps.InfoWindow({
|
|
|
|
class: 'tooltip-dblock', |
|
|
|
// class: 'tooltip-dblock',
|
|
|
|
content: content, |
|
|
|
// content: content,
|
|
|
|
maxWidth: 160, |
|
|
|
// maxWidth: 160,
|
|
|
|
backgroundColor: '#283046', //박스안쪽영역 컬러
|
|
|
|
// backgroundColor: '#283046', //박스안쪽영역 컬러
|
|
|
|
// borderColor: '#333', //테두리컬러
|
|
|
|
// // borderColor: '#333', //테두리컬러
|
|
|
|
// borderWidth: 3, //테두리 굵기
|
|
|
|
// // borderWidth: 3, //테두리 굵기
|
|
|
|
// anchorSize: new naver.maps.Size(30, -10),
|
|
|
|
// // anchorSize: new naver.maps.Size(30, -10),
|
|
|
|
anchorSkew: false, |
|
|
|
// anchorSkew: false,
|
|
|
|
anchorColor: '#283046', |
|
|
|
// anchorColor: '#283046',
|
|
|
|
|
|
|
|
|
|
|
|
pixelOffset: new naver.maps.Point(20, -20) |
|
|
|
// pixelOffset: new naver.maps.Point(20, -20)
|
|
|
|
}); |
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
|
|
infoWindow.open(props.map, data.coord); |
|
|
|
// infoWindow.open(props.map, data.coord);
|
|
|
|
}; |
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
|
|
// useLayoutEffect(() => {
|
|
|
|
// useLayoutEffect(() => {
|
|
|
|
// dispatch(controlGroupAuthAction.request());
|
|
|
|
// dispatch(controlGroupAuthAction.request());
|
|
|
@ -149,7 +149,6 @@ export const DronMarker = props => { |
|
|
|
markerOption.type = 'DRONE'; |
|
|
|
markerOption.type = 'DRONE'; |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
if (user.authId === 'SUPER' || user.authId === 'ADMIN') { |
|
|
|
if (user.authId === 'SUPER' || user.authId === 'ADMIN') { |
|
|
|
console.log('super, admin'); |
|
|
|
|
|
|
|
markerOption.url = FlightIcon; |
|
|
|
markerOption.url = FlightIcon; |
|
|
|
markerOption.type = 'FLIGHT'; |
|
|
|
markerOption.type = 'FLIGHT'; |
|
|
|
} else { |
|
|
|
} else { |
|
|
@ -213,18 +212,18 @@ export const DronMarker = props => { |
|
|
|
handlerDronClick(marker.controlId, marker.id); |
|
|
|
handlerDronClick(marker.controlId, marker.id); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
naver.maps.Event.addListener(marker, 'mouseover', function (e) { |
|
|
|
// naver.maps.Event.addListener(marker, 'mouseover', function (e) {
|
|
|
|
const data = {}; |
|
|
|
// const data = {};
|
|
|
|
data.id = marker.id; |
|
|
|
// data.id = marker.id;
|
|
|
|
data.speed = marker.gps?.speed; |
|
|
|
// data.speed = marker.gps?.speed;
|
|
|
|
data.speedType = marker.gps?.speedType; |
|
|
|
// data.speedType = marker.gps?.speedType;
|
|
|
|
data.elev = marker.gps?.elev; |
|
|
|
// data.elev = marker.gps?.elev;
|
|
|
|
data.elevType = marker.gps?.elevType; |
|
|
|
// data.elevType = marker.gps?.elevType;
|
|
|
|
data.heading = marker.gps?.heading; |
|
|
|
// data.heading = marker.gps?.heading;
|
|
|
|
data.coord = marker.position; |
|
|
|
// data.coord = marker.position;
|
|
|
|
|
|
|
|
|
|
|
|
infowindowOpen(data); |
|
|
|
// infowindowOpen(data);
|
|
|
|
}); |
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
|
|
naver.maps.Event.addListener(marker, 'mouseout', function (e) { |
|
|
|
naver.maps.Event.addListener(marker, 'mouseout', function (e) { |
|
|
|
if (infoWindow) { |
|
|
|
if (infoWindow) { |
|
|
@ -232,6 +231,20 @@ export const DronMarker = props => { |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// naver.maps.Event.addListener(map, 'zoom_changed', function (zoom) {
|
|
|
|
|
|
|
|
// const a = document.getElementsByClassName('dblock-box');
|
|
|
|
|
|
|
|
// console.log(zoom * 10);
|
|
|
|
|
|
|
|
// console.log(zoom);
|
|
|
|
|
|
|
|
// for (let i = 0; i < a.length; i++) {
|
|
|
|
|
|
|
|
// a[i].style.width = `${zoom * 10 + 20}px`;
|
|
|
|
|
|
|
|
// a[i].style.fontSize = `${zoom}px`;
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// // console.log(document.getElementsByClassName('dblock-box'));
|
|
|
|
|
|
|
|
// // document.querySelector('.dblock-box').style.width = `${zoom * 10}px`;
|
|
|
|
|
|
|
|
// // document.querySelector('.dblock-box').style.fontSize = `${zoom}px`;
|
|
|
|
|
|
|
|
// // document.querySelector('.dblock-ti').style.fontSize = `${zoom}px`;
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
|
|
setArrMarkers(m => [...m, marker]); |
|
|
|
setArrMarkers(m => [...m, marker]); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
@ -290,9 +303,28 @@ export const DronMarker = props => { |
|
|
|
}); |
|
|
|
}); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const moveInfos = (info, position) => { |
|
|
|
const moveInfos = (info, position, item, idx) => { |
|
|
|
if (info) { |
|
|
|
if (info) { |
|
|
|
info.setPosition(position, info); |
|
|
|
info.setPosition(position, info); |
|
|
|
|
|
|
|
// info._element.html(`<div class="dblock-ti"><span>${info?._id}</span>
|
|
|
|
|
|
|
|
// <span>${item?.speed}${item?.speedType} | ${item?.elev}${item?.elevType} | ${item?.heading}</span></div>`);
|
|
|
|
|
|
|
|
info._element.html(`
|
|
|
|
|
|
|
|
<div class="dblock-ti"> |
|
|
|
|
|
|
|
<span>${info?._id}</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="dblock-txt> |
|
|
|
|
|
|
|
<div class="dblock-txt-list"> |
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
<span style="width: 250px; display: inline-block;">${item?.speed}${ |
|
|
|
|
|
|
|
item?.speedType |
|
|
|
|
|
|
|
} | ${item?.elev}${item?.elevType} | ${item?.heading}</span> |
|
|
|
|
|
|
|
<span style="width: 250px; display: inline-block;">${(item?.lat).toFixed( |
|
|
|
|
|
|
|
6 |
|
|
|
|
|
|
|
)} | ${(item?.lng).toFixed(6)}</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
`);
|
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
@ -328,7 +360,7 @@ export const DronMarker = props => { |
|
|
|
const markerInit = () => { |
|
|
|
const markerInit = () => { |
|
|
|
if (controlGpList) { |
|
|
|
if (controlGpList) { |
|
|
|
allRemoveMarkers(); |
|
|
|
allRemoveMarkers(); |
|
|
|
controlGpList.map(item => { |
|
|
|
controlGpList.map((item, idx) => { |
|
|
|
let position = new naver.maps.LatLng(item.lat, item.lng); |
|
|
|
let position = new naver.maps.LatLng(item.lat, item.lng); |
|
|
|
|
|
|
|
|
|
|
|
if (arrMarkers) { |
|
|
|
if (arrMarkers) { |
|
|
@ -336,7 +368,7 @@ export const DronMarker = props => { |
|
|
|
const isInfos = arrInfos.find(info => info._id === item.objectId); |
|
|
|
const isInfos = arrInfos.find(info => info._id === item.objectId); |
|
|
|
if (isExists) { |
|
|
|
if (isExists) { |
|
|
|
moveMarkers(isExists, position, item); |
|
|
|
moveMarkers(isExists, position, item); |
|
|
|
moveInfos(isInfos, position); |
|
|
|
moveInfos(isInfos, position, item, idx); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
addMarkers(position, item.objectId, item.controlId, item); |
|
|
|
addMarkers(position, item.objectId, item.controlId, item); |
|
|
|
} |
|
|
|
} |
|
|
@ -351,12 +383,24 @@ export const DronMarker = props => { |
|
|
|
const infoInit = (marker, gps, idx) => { |
|
|
|
const infoInit = (marker, gps, idx) => { |
|
|
|
CustomOverlay = function (options) { |
|
|
|
CustomOverlay = function (options) { |
|
|
|
this._element = $(` |
|
|
|
this._element = $(` |
|
|
|
<div class="dblock-box" style="width: 140px;"> |
|
|
|
|
|
|
|
<div class="dblock-ti"> |
|
|
|
<div class="dblock-box" style="width:160px;font-size: 14px;"> |
|
|
|
<span>${marker?.id}</span> |
|
|
|
<div class="dblock-ti"> |
|
|
|
<span>${gps?.speed}${gps?.speedType} | ${gps?.elev}${gps?.elevType} | ${gps?.heading}</span> |
|
|
|
<span>${marker?.id}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="dblock-txt> |
|
|
|
|
|
|
|
<div class="dblock-txt-list"> |
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
<span style="width: 250px; display: inline-block;">${gps?.speed}${ |
|
|
|
|
|
|
|
gps?.speedType |
|
|
|
|
|
|
|
} | ${gps?.elev}${gps?.elevType} | ${gps?.heading}</span> |
|
|
|
|
|
|
|
<span style="width: 250px; display: inline-block;">${(gps?.lat).toFixed( |
|
|
|
|
|
|
|
6 |
|
|
|
|
|
|
|
)} | ${(gps?.lng).toFixed(6)}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
`);
|
|
|
|
`);
|
|
|
|
|
|
|
|
|
|
|
|
// this._element = $(`
|
|
|
|
// this._element = $(`
|
|
|
@ -421,6 +465,11 @@ export const DronMarker = props => { |
|
|
|
this._element.off(); |
|
|
|
this._element.off(); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
CustomOverlay.prototype.setElement = function (element, idx) { |
|
|
|
|
|
|
|
this._element = element; |
|
|
|
|
|
|
|
this.draw(idx); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
//속성
|
|
|
|
//속성
|
|
|
|
CustomOverlay.prototype.setPosition = function (position, idx) { |
|
|
|
CustomOverlay.prototype.setPosition = function (position, idx) { |
|
|
|
this._position = position; |
|
|
|
this._position = position; |
|
|
@ -460,6 +509,7 @@ export const DronMarker = props => { |
|
|
|
arrMarkers.forEach((marker, idx) => { |
|
|
|
arrMarkers.forEach((marker, idx) => { |
|
|
|
infoInit(marker, controlGpList[idx], idx); |
|
|
|
infoInit(marker, controlGpList[idx], idx); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (arrInfos.filter(i => i._idx === idx).length > 0) return; |
|
|
|
if (controlGpList.length != 0) { |
|
|
|
if (controlGpList.length != 0) { |
|
|
|
const info = new CustomOverlay({ |
|
|
|
const info = new CustomOverlay({ |
|
|
|
position: new naver.maps.LatLng( |
|
|
|
position: new naver.maps.LatLng( |
|
|
|