|
|
|
@ -1,3 +1,4 @@
|
|
|
|
|
import $ from 'jquery'; |
|
|
|
|
import { useEffect, useState } from 'react'; |
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
import '../../../../assets/css/custom.css'; |
|
|
|
@ -17,7 +18,12 @@ export const DronMarker = props => {
|
|
|
|
|
|
|
|
|
|
const [arrMarkers, setArrMarkers] = useState([]); |
|
|
|
|
|
|
|
|
|
const [arrInfos, setArrInfos] = useState([]); |
|
|
|
|
|
|
|
|
|
let naver = props.naver; |
|
|
|
|
let map = props.map; |
|
|
|
|
|
|
|
|
|
let CustomOverlay; |
|
|
|
|
|
|
|
|
|
var contentString = ['<div class="iw_inner"> dddd', '</div>'].join(''); |
|
|
|
|
var infowindow = new naver.maps.InfoWindow({ |
|
|
|
@ -106,7 +112,7 @@ export const DronMarker = props => {
|
|
|
|
|
marker.setMap(props.map); |
|
|
|
|
|
|
|
|
|
// drone 정보 창
|
|
|
|
|
markerInfoWindow(marker); |
|
|
|
|
markerInfo(marker); |
|
|
|
|
|
|
|
|
|
naver.maps.Event.addListener(marker, 'click', function (e) { |
|
|
|
|
handlerDronClick(marker); |
|
|
|
@ -133,11 +139,19 @@ export const DronMarker = props => {
|
|
|
|
|
marker.setMap(null); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const removeInfos = info => { |
|
|
|
|
info.setMap(null); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//마커에 위치를 이동한다.
|
|
|
|
|
const moveMarkers = (marker, position) => { |
|
|
|
|
marker.setPosition(position); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const moveInfos = (info, position) => { |
|
|
|
|
info.setPosition(position); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
//데이터가 없는 마커를 모두 삭제 한다.
|
|
|
|
|
const allRemoveMarkers = () => { |
|
|
|
|
if (arrMarkers && controlGpList) { |
|
|
|
@ -158,10 +172,28 @@ export const DronMarker = props => {
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const allRemoveInfos = () => { |
|
|
|
|
if (arrInfos && controlGpList) { |
|
|
|
|
arrInfos.map(info => { |
|
|
|
|
const isExists = controlGpList.find( |
|
|
|
|
item => item.objectId === window.id |
|
|
|
|
); |
|
|
|
|
if (!isExists) { |
|
|
|
|
removeInfos(info); |
|
|
|
|
const arrData = arrInfos.filter( |
|
|
|
|
item => item.id != info.id |
|
|
|
|
); |
|
|
|
|
removeArrInfos(arrData); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//마커를 셋팅 한다.
|
|
|
|
|
const markerInit = () => { |
|
|
|
|
if (controlGpList) { |
|
|
|
|
allRemoveMarkers(); |
|
|
|
|
allRemoveInfos(); |
|
|
|
|
controlGpList.map(item => { |
|
|
|
|
const position = new naver.maps.LatLng(item.lat, item.lng); |
|
|
|
|
|
|
|
|
@ -171,6 +203,7 @@ export const DronMarker = props => {
|
|
|
|
|
); |
|
|
|
|
if (isExists) { |
|
|
|
|
moveMarkers(isExists, position); |
|
|
|
|
moveInfos(isExists, position); |
|
|
|
|
} else { |
|
|
|
|
addMarkers(position, item.objectId, item.controlId); |
|
|
|
|
} |
|
|
|
@ -181,47 +214,142 @@ export const DronMarker = props => {
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
//운항정보 창 셋팅
|
|
|
|
|
const infoInit = (marker, gps) => { |
|
|
|
|
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> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
`)
|
|
|
|
|
|
|
|
|
|
this.setPosition(options.position); |
|
|
|
|
this.setMap(options.map || null); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
CustomOverlay.prototype = new naver.maps.OverlayView(); |
|
|
|
|
CustomOverlay.prototype.constructor = CustomOverlay; |
|
|
|
|
|
|
|
|
|
//메소드 재정의
|
|
|
|
|
|
|
|
|
|
//필수
|
|
|
|
|
CustomOverlay.prototype.onAdd = function() { |
|
|
|
|
var overlayLayer = this.getPanes().overlayLayer; |
|
|
|
|
|
|
|
|
|
this._element.appendTo(overlayLayer); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
CustomOverlay.prototype.draw = function() { |
|
|
|
|
if (!this.getMap()) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var projection = this.getProjection(), |
|
|
|
|
position = this.getPosition(), |
|
|
|
|
pixelPosition = projection.fromCoordToOffset(position); |
|
|
|
|
|
|
|
|
|
this._element.css('left', pixelPosition.x); |
|
|
|
|
this._element.css('top', pixelPosition.y); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
CustomOverlay.prototype.onRemove = function() { |
|
|
|
|
var overlayLayer = this.getPanes().overlayLayer; |
|
|
|
|
|
|
|
|
|
this._element.remove(); |
|
|
|
|
this._element.off(); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
//속성
|
|
|
|
|
CustomOverlay.prototype.setPosition = function(position) { |
|
|
|
|
this._position = position; |
|
|
|
|
this.draw(); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
CustomOverlay.prototype.getPosition = function() { |
|
|
|
|
return this._position; |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const removeArrMarkers = arrData => { |
|
|
|
|
setArrMarkers(arrData); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const markerInfoWindow = (marker) => { |
|
|
|
|
controlGpList.forEach(gps => { |
|
|
|
|
const removeArrInfos = arrData => { |
|
|
|
|
setArrInfos(arrData); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const contents = [ |
|
|
|
|
`<div class="tooltip-box">`, |
|
|
|
|
` <div class="tooltip-ti">`, |
|
|
|
|
` <span>${marker.id}</span>`, |
|
|
|
|
` </div>`, |
|
|
|
|
` <div class="tooltip-txt">`, |
|
|
|
|
` <div class="tooltip-txt-list">`,
|
|
|
|
|
` <span>${gps.speed}${gps.speedType}</span>`, |
|
|
|
|
` </div>`, |
|
|
|
|
` <div class="tooltip-txt-list">`, |
|
|
|
|
` <span>${gps.elev}${gps.elevType}</span>`, |
|
|
|
|
` </div>`, |
|
|
|
|
` <div class="tooltip-txt-list">`, |
|
|
|
|
` <span>${gps.heading}</span>`, |
|
|
|
|
` </div>`, |
|
|
|
|
` </div>`, |
|
|
|
|
`</div>` |
|
|
|
|
].join(''); |
|
|
|
|
|
|
|
|
|
const info = new naver.maps.InfoWindow({
|
|
|
|
|
id: marker.id, |
|
|
|
|
content: contents, |
|
|
|
|
backgroundColor: '#283046', //박스안쪽영역 컬러
|
|
|
|
|
anchorSize: new props.naver.maps.Size(30, -10), |
|
|
|
|
anchorSkew: false, |
|
|
|
|
anchorColor: '#283046', |
|
|
|
|
pixelOffset: new props.naver.maps.Point(20, -20) |
|
|
|
|
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>
|
|
|
|
|
// // `;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // var info = new naver.maps.InfoWindow({
|
|
|
|
|
// // id: marker.id,
|
|
|
|
|
// // content: contents,
|
|
|
|
|
// // backgroundColor: '#283046', //박스안쪽영역 컬러
|
|
|
|
|
// // anchorSize: new props.naver.maps.Size(30, -10),
|
|
|
|
|
// // anchorSkew: false,
|
|
|
|
|
// // anchorColor: '#283046',
|
|
|
|
|
// // pixelOffset: new props.naver.maps.Point(20, -20)
|
|
|
|
|
// // });
|
|
|
|
|
// // info.open(props.map, marker);
|
|
|
|
|
|
|
|
|
|
// // 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 |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
console.log(info); |
|
|
|
|
|
|
|
|
|
info.open(props.map, marker); |
|
|
|
|
}); |
|
|
|
|
console.log(marker.position, 'marker') |
|
|
|
|
console.log(overlay._position, 'over') |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return null; |
|
|
|
|
}; |
|
|
|
|