diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index 8483445..b44bdb6 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -414,6 +414,12 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon .tooltip-txt-list + .tooltip-txt-list{margin-top:4px;} .tooltip-box .arrow {position:absolute;bottom:-10px;left:50%;transform: translateX(-50%);display:block;width: 0px;height: 0px;border-top:10px solid #283046;border-bottom:10px solid none;border-right: 10px solid transparent;border-left: 10px solid transparent;} +/* 데이터블록 */ +.dblock-box{background:#283046;padding:10px;border-radius:6px;position:absolute;} +.dblock-box div{text-align:left;font-size:10px;color:#bbb;} +.dblock-ti span, .block-txt .ti{color:#f4f4f4;font-weight:500;display:block;} +.dblock-txt{padding-top:4px;} + /*회원가입*/ .pal-register .auth-wrapper.auth-v1 .auth-inner{max-width:1200px;} .pal-register .content-header .sub-txt{display:block;margin-bottom:1rem;} diff --git a/src/components/map/naver/dron/DronMarker.js b/src/components/map/naver/dron/DronMarker.js index 6733b78..522f20e 100644 --- a/src/components/map/naver/dron/DronMarker.js +++ b/src/components/map/naver/dron/DronMarker.js @@ -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 = $(` -
-
- ${marker.id} -
-
-
- 속도: ${gps.speed}${gps.speedType} -
-
- 고도: ${gps.elev}${gps.elevType} -
-
- 헤딩방향: ${gps.heading} -
+
+
+ ${marker?.id} + ${gps?.speed}${gps?.speedType} | ${gps?.elev}${gps?.elevType} | ${gps?.heading}
-
`) + + // this._element = $(` + //
+ //
+ // ${marker?.id} + //
+ //
+ //
+ // 속도: ${gps?.speed}${gps?.speedType} + //
+ //
+ // 고도: ${gps?.elev}${gps?.elevType} + //
+ //
+ // 헤딩방향: ${gps?.heading} + //
+ //
+ //
+ //
+ // `) 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]); }