From 44c76043d4fe42f84b3159b2a25ab5d47f490a91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kimjh=28=EA=B9=80=EC=9E=A5=ED=98=84=29?= Date: Thu, 17 Nov 2022 15:57:51 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B4=80=EC=A0=9C=20->=20=EA=B8=B0=EC=B2=B4=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=EB=B8=94=EB=A1=9D(=EA=B3=84?= =?UTF-8?q?=EC=86=8D=EC=9C=A0=EC=A7=80)=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 4 +- src/components/map/naver/dron/DronMarker.js | 170 +++++++++++++------- 2 files changed, 112 insertions(+), 62 deletions(-) diff --git a/.env.development b/.env.development index 0f7bbd6e..846d104e 100644 --- a/.env.development +++ b/.env.development @@ -1,5 +1,5 @@ -REACT_APP_HOST = http://localhost:8080/ -REACT_APP_WS_HOST = ws://localhost:8081/ws +REACT_APP_HOST = http://192.168.0.34:8080/ +REACT_APP_WS_HOST = ws://192.168.0.34:8081/ws REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/ # Naver Search API HOST diff --git a/src/components/map/naver/dron/DronMarker.js b/src/components/map/naver/dron/DronMarker.js index ad4e9e1a..fc9e80ae 100644 --- a/src/components/map/naver/dron/DronMarker.js +++ b/src/components/map/naver/dron/DronMarker.js @@ -43,45 +43,45 @@ export const DronMarker = props => { let map = props.map; let CustomOverlay; let infoWindow; - const infowindowOpen = data => { - const content = ` -
-
- ${data?.id} -
-
-
- ${ - data?.speed - }${data?.speedType} | ${data?.elev}${data?.elevType} | ${ - data?.heading - } - ${(data?.coord._lat).toFixed( - 6 - )} | ${(data?.coord._lng).toFixed(6)} -
-
-
- - `; - - infoWindow = new naver.maps.InfoWindow({ - class: 'tooltip-dblock', - content: content, - maxWidth: 160, - backgroundColor: '#283046', //박스안쪽영역 컬러 - // borderColor: '#333', //테두리컬러 - // borderWidth: 3, //테두리 굵기 - // anchorSize: new naver.maps.Size(30, -10), - anchorSkew: false, - anchorColor: '#283046', - - pixelOffset: new naver.maps.Point(20, -20) - }); - - infoWindow.open(props.map, data.coord); - }; + // const infowindowOpen = data => { + // const content = ` + //
+ //
+ // ${data?.id} + //
+ //
+ //
+ // ${ + // data?.speed + // }${data?.speedType} | ${data?.elev}${data?.elevType} | ${ + // data?.heading + // } + // ${(data?.coord._lat).toFixed( + // 6 + // )} | ${(data?.coord._lng).toFixed(6)} + //
+ //
+ //
+ // + // `; + + // infoWindow = new naver.maps.InfoWindow({ + // class: 'tooltip-dblock', + // content: content, + // maxWidth: 160, + // backgroundColor: '#283046', //박스안쪽영역 컬러 + // // borderColor: '#333', //테두리컬러 + // // borderWidth: 3, //테두리 굵기 + // // anchorSize: new naver.maps.Size(30, -10), + // anchorSkew: false, + // anchorColor: '#283046', + + // pixelOffset: new naver.maps.Point(20, -20) + // }); + + // infoWindow.open(props.map, data.coord); + // }; // useLayoutEffect(() => { // dispatch(controlGroupAuthAction.request()); @@ -149,7 +149,6 @@ export const DronMarker = props => { markerOption.type = 'DRONE'; } else { if (user.authId === 'SUPER' || user.authId === 'ADMIN') { - console.log('super, admin'); markerOption.url = FlightIcon; markerOption.type = 'FLIGHT'; } else { @@ -213,18 +212,18 @@ export const DronMarker = props => { handlerDronClick(marker.controlId, marker.id); }); - naver.maps.Event.addListener(marker, 'mouseover', function (e) { - const data = {}; - data.id = marker.id; - data.speed = marker.gps?.speed; - data.speedType = marker.gps?.speedType; - data.elev = marker.gps?.elev; - data.elevType = marker.gps?.elevType; - data.heading = marker.gps?.heading; - data.coord = marker.position; - - infowindowOpen(data); - }); + // naver.maps.Event.addListener(marker, 'mouseover', function (e) { + // const data = {}; + // data.id = marker.id; + // data.speed = marker.gps?.speed; + // data.speedType = marker.gps?.speedType; + // data.elev = marker.gps?.elev; + // data.elevType = marker.gps?.elevType; + // data.heading = marker.gps?.heading; + // data.coord = marker.position; + + // infowindowOpen(data); + // }); naver.maps.Event.addListener(marker, 'mouseout', function (e) { 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]); }; @@ -290,9 +303,28 @@ export const DronMarker = props => { }); }; - const moveInfos = (info, position) => { + const moveInfos = (info, position, item, idx) => { if (info) { info.setPosition(position, info); + // info._element.html(`
${info?._id} + // ${item?.speed}${item?.speedType} | ${item?.elev}${item?.elevType} | ${item?.heading}
`); + info._element.html(` +
+ ${info?._id} +
+
+
+ ${item?.speed}${ + item?.speedType + } | ${item?.elev}${item?.elevType} | ${item?.heading} + ${(item?.lat).toFixed( + 6 + )} | ${(item?.lng).toFixed(6)} +
+
+ + `); } }; @@ -328,7 +360,7 @@ export const DronMarker = props => { const markerInit = () => { if (controlGpList) { allRemoveMarkers(); - controlGpList.map(item => { + controlGpList.map((item, idx) => { let position = new naver.maps.LatLng(item.lat, item.lng); if (arrMarkers) { @@ -336,7 +368,7 @@ export const DronMarker = props => { const isInfos = arrInfos.find(info => info._id === item.objectId); if (isExists) { moveMarkers(isExists, position, item); - moveInfos(isInfos, position); + moveInfos(isInfos, position, item, idx); } else { addMarkers(position, item.objectId, item.controlId, item); } @@ -351,12 +383,24 @@ 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} + ${(gps?.lat).toFixed( + 6 + )} | ${(gps?.lng).toFixed(6)}
+
+
+
`); // this._element = $(` @@ -421,6 +465,11 @@ export const DronMarker = props => { this._element.off(); }; + CustomOverlay.prototype.setElement = function (element, idx) { + this._element = element; + this.draw(idx); + }; + //속성 CustomOverlay.prototype.setPosition = function (position, idx) { this._position = position; @@ -460,6 +509,7 @@ export const DronMarker = props => { arrMarkers.forEach((marker, idx) => { infoInit(marker, controlGpList[idx], idx); + if (arrInfos.filter(i => i._idx === idx).length > 0) return; if (controlGpList.length != 0) { const info = new CustomOverlay({ position: new naver.maps.LatLng(