|
|
|
@ -30,6 +30,10 @@ export const DronMarker = props => {
|
|
|
|
|
content: contentString |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if(arrMarkers.length != 0) markerInfo(arrMarkers) |
|
|
|
|
}, [arrMarkers]) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
markerInit(); |
|
|
|
@ -91,7 +95,7 @@ export const DronMarker = props => {
|
|
|
|
|
|
|
|
|
|
//마커를 그린다.
|
|
|
|
|
const addMarkers = (position, id, controlId) => { |
|
|
|
|
var marker = new naver.maps.Marker({ |
|
|
|
|
let marker = new naver.maps.Marker({ |
|
|
|
|
position: position, |
|
|
|
|
title: id, |
|
|
|
|
id: id, |
|
|
|
@ -111,13 +115,13 @@ export const DronMarker = props => {
|
|
|
|
|
marker.setMap(props.map); |
|
|
|
|
|
|
|
|
|
// drone 정보 창
|
|
|
|
|
markerInfo(marker); |
|
|
|
|
|
|
|
|
|
naver.maps.Event.addListener(marker, 'click', function (e) { |
|
|
|
|
handlerDronClick(marker); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
setArrMarkers(m => [...m, marker]); |
|
|
|
|
// markerInfo(marker, position, id);
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlerDronClick = marker => { |
|
|
|
@ -175,7 +179,7 @@ export const DronMarker = props => {
|
|
|
|
|
if (arrInfos && controlGpList) { |
|
|
|
|
arrInfos.map(info => { |
|
|
|
|
const isExists = controlGpList.find( |
|
|
|
|
item => item.objectId === window.id |
|
|
|
|
item => item.objectId === info.id |
|
|
|
|
); |
|
|
|
|
if (!isExists) { |
|
|
|
|
removeInfos(info); |
|
|
|
@ -192,7 +196,7 @@ export const DronMarker = props => {
|
|
|
|
|
const markerInit = () => { |
|
|
|
|
if (controlGpList) { |
|
|
|
|
allRemoveMarkers(); |
|
|
|
|
allRemoveInfos(); |
|
|
|
|
// allRemoveInfos();
|
|
|
|
|
controlGpList.map(item => { |
|
|
|
|
const position = new naver.maps.LatLng(item.lat, item.lng); |
|
|
|
|
|
|
|
|
@ -202,7 +206,7 @@ export const DronMarker = props => {
|
|
|
|
|
); |
|
|
|
|
if (isExists) { |
|
|
|
|
moveMarkers(isExists, position); |
|
|
|
|
moveInfos(isExists, position); |
|
|
|
|
// moveInfos(isExists, position);
|
|
|
|
|
} else { |
|
|
|
|
addMarkers(position, item.objectId, item.controlId); |
|
|
|
|
} |
|
|
|
@ -213,7 +217,7 @@ export const DronMarker = props => {
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
//운항정보 창 셋팅
|
|
|
|
|
// //운항정보 창 셋팅
|
|
|
|
|
const infoInit = (marker, gps) => { |
|
|
|
|
CustomOverlay = function(options) { |
|
|
|
|
this._element = $(` |
|
|
|
@ -239,6 +243,7 @@ export const DronMarker = props => {
|
|
|
|
|
|
|
|
|
|
this.setPosition(options.position); |
|
|
|
|
this.setMap(options.map || null); |
|
|
|
|
this.setId(options.id); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
CustomOverlay.prototype = new naver.maps.OverlayView(); |
|
|
|
@ -282,6 +287,14 @@ export const DronMarker = props => {
|
|
|
|
|
CustomOverlay.prototype.getPosition = function() { |
|
|
|
|
return this._position; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
CustomOverlay.prototype.setId = function(id) { |
|
|
|
|
this._id = id; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
CustomOverlay.prototype.getId = function(id) { |
|
|
|
|
return this._id; |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const removeArrMarkers = arrData => { |
|
|
|
@ -292,31 +305,9 @@ export const DronMarker = props => {
|
|
|
|
|
setArrInfos(arrData); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const markerInfo = (marker) => { |
|
|
|
|
console.log('ddd') |
|
|
|
|
// controlGpList.forEach(gps => {
|
|
|
|
|
|
|
|
|
|
// // const contents = `
|
|
|
|
|
// // <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>
|
|
|
|
|
// // `;
|
|
|
|
|
|
|
|
|
|
// const markerInfo = (marker, position, id) => {
|
|
|
|
|
const markerInfo = (arrMarkers) => { |
|
|
|
|
// controlGpList.forEach(gps =>
|
|
|
|
|
|
|
|
|
|
// // var info = new naver.maps.InfoWindow({
|
|
|
|
|
// // id: marker.id,
|
|
|
|
@ -331,22 +322,19 @@ export const DronMarker = props => {
|
|
|
|
|
|
|
|
|
|
// // setArrWindows(m => [...m, info]);
|
|
|
|
|
|
|
|
|
|
// infoInit(marker, gps);
|
|
|
|
|
|
|
|
|
|
// var overlay = new CustomOverlay({
|
|
|
|
|
// position: marker.position,
|
|
|
|
|
// map: map
|
|
|
|
|
// });
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
infoInit(marker, controlGpList[0]) |
|
|
|
|
var overlay = new CustomOverlay({ |
|
|
|
|
position: marker.position, |
|
|
|
|
map: map |
|
|
|
|
arrMarkers.forEach((marker, idx) => { |
|
|
|
|
infoInit(marker, controlGpList[idx]); |
|
|
|
|
if(controlGpList.length != 0) { |
|
|
|
|
const info = new CustomOverlay({ |
|
|
|
|
position: new naver.maps.LatLng(controlGpList[idx].lat, controlGpList[idx].lng), |
|
|
|
|
map: map, |
|
|
|
|
id: marker.id |
|
|
|
|
}); |
|
|
|
|
console.log(info) |
|
|
|
|
setArrInfos(m => [...m, info]); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
console.log(marker.position, 'marker') |
|
|
|
|
console.log(overlay._position, 'over') |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|