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(