pav
/
pav-fe-kac
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

관제 - 데이터 블록 수정

pull/2/head
junh_eee 2 years ago
parent
2a2e3e1e55
commit
177b895294
2 changed files with 122 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/assets/css/custom.css
  2. 140
      src/components/map/naver/dron/DronMarker.js

8
src/assets/css/custom.css
Unescape View File

@ -415,10 +415,12 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon
.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-box{background:#283046;padding:10px;border-radius:6px;position:absolute;max-width: 250px;}
.dblock-box div{text-align:left;font-size:13px;color:#bbb;}
.dblock-ti{border-bottom:1px solid #bbb;padding-bottom:4px;}
.dblock-ti span, .dblock-txt .ti{color:#f4f4f4;font-weight:500;display:block;}
.dblock-txt{padding-top:4px;}
.dblock-txt-list + .dblock-txt-list{margin-top:4px;}
/*회원가입*/
.pal-register .auth-wrapper.auth-v1 .auth-inner{max-width:1200px;}

140
src/components/map/naver/dron/DronMarker.js
Unescape View File

@ -16,15 +16,73 @@ export const DronMarker = props => {
const { objectId, isClickObject } = useSelector(state => state.controlMapReducer);
const [arrMarkers, setArrMarkers] = useState([]);
const [arrInfos, setArrInfos] = useState([]);
// const [arrInfos, setArrInfos] = useState([]);
let naver = props.naver;
let map = props.map;
let CustomOverlay;
useEffect(() => {
if(arrMarkers.length != 0) markerInfo();
}, [arrMarkers])
let infoWindow;
const infowindowOpen = (data) => {
const content = `
<div class="dblock-box">
<div class="dblock-ti">
<span>${data?.id}</span>
</div>
<div class="dblock-txt>
<div class="dblock-txt-list">
<div>
<span style="width: 250px; display: inline-block;">${data?.speed}${data?.speedType} | ${data?.elev}${data?.elevType} | ${data?.heading}</span>
<span style="width: 250px; display: inline-block;">${data?.coord._lat} | ${data?.coord._lng}</span>
</div>
</div>
</div>
</div>
`;
// <div class="dblock-box">
// <div class="dblock-ti">
// <span>${data?.id}</span>
// </div>
// <div class="dblock-txt>
// <div class="dblock-txt-list">
// <div>
// <span style="width: 120px; display: inline-block;">속도: ${data?.speed}${data?.speedType}</span>
// </div>
// <div>
// <span style="width: 120px; display: inline-block;">고도: ${data?.elev}${data?.elevType}</span>
// </div>
// <div>
// <span style="width: 120px; display: inline-block;">헤딩방향: ${data?.heading}</span>
// </div>
// <div>
// <span style="width: 120px; display: inline-block;">위치: ${data?.coord._lat} | ${data?.coord._lng}</span>
// </div>
// </div>
// </div>
// </div>
infoWindow = new naver.maps.InfoWindow({
class: 'tooltip-dblock',
content: content,
maxWidth: 140,
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);
}
// useEffect(() => {
// if(arrMarkers.length != 0) markerInfo();
// }, [arrMarkers])
useEffect(() => {
@ -82,8 +140,9 @@ export const DronMarker = props => {
}, [objectId]);
//마커를 그린다.
const addMarkers = (position, id, controlId) => {
let marker = new naver.maps.Marker({
const addMarkers = (position, id, controlId, gps) => {
// console.log(gps, '>>>.')
const marker = new naver.maps.Marker({
position: position,
title: id,
id: id,
@ -97,19 +156,48 @@ export const DronMarker = props => {
// size: new naver.maps.Size(50, 50),
origin: new naver.maps.Point(0, 0),
anchor: new naver.maps.Point(15, 15),
}
},
gps: gps
});
marker.setMap(props.map);
// drone 정보 창
naver.maps.Event.addListener(marker, 'click', function (e) {
handlerDronClick(marker.controlId, marker.id);
});
naver.maps.Event.addListener(marker, 'mouseover', function(e) {
// // handlerDronMouseOver(marker);
const data = {};
data.id = marker.id;
// data.lat = marker.position._lat;
// data.lng = marker.position._lng;
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) {
infoWindow.close();
}
})
setArrMarkers(m => [...m, marker]);
// markerInfo(marker, position, id);
};
const handlerDronMouseOver = (marker) => {
}
const handlerDronClick = (controlId, idntfNum) => {
// const idntfNum = marker.id;
// const contorlId = marker.controlId;
@ -166,20 +254,20 @@ export const DronMarker = props => {
}
});
arrInfos.map(info => {
const isExists = arrMarkers.find(
marker => marker.id === info._id
);
if (!isExists) {
removeInfos(info);
const arrData = arrInfos.filter(
item => item.id != info._id
);
removeArrInfos(arrData);
// dispatch(objectUnClickAction());
}
});
// arrInfos.map(info => {
// const isExists = arrMarkers.find(
// marker => marker.id === info._id
// );
// if (!isExists) {
// removeInfos(info);
// const arrData = arrInfos.filter(
// item => item.id != info._id
// );
// removeArrInfos(arrData);
// // dispatch(objectUnClickAction());
// }
// });
}
};
@ -193,15 +281,15 @@ export const DronMarker = props => {
if (arrMarkers) {
const isExists = arrMarkers.find( ele => ele.id === item.objectId );
const isInfos = arrInfos.find( info => info._id === item.objectId )
// const isInfos = arrInfos.find( info => info._id === item.objectId )
if (isExists) {
moveMarkers(isExists, position);
moveInfos(isInfos, position);
// moveInfos(isInfos, position);
} else {
addMarkers(position, item.objectId, item.controlId);
addMarkers(position, item.objectId, item.controlId, item);
}
} else {
addMarkers(position, item.objectId, item.controlId);
addMarkers(position, item.objectId, item.controlId, item);
}
});
}
@ -319,7 +407,7 @@ export const DronMarker = props => {
const markerInfo = () => {
arrMarkers.forEach((marker, idx) => {
infoInit(marker, controlGpList[idx], idx);
// infoInit(marker, controlGpList[idx], idx);
if(controlGpList.length != 0) {
const info = new CustomOverlay({

Write Preview
Loading…
Cancel
Save