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

관제 -> 기체 데이터블록(계속유지) 수정

pull/2/head
김장현 2 years ago
parent
5390b02ab0
commit
44c76043d4
2 changed files with 112 additions and 62 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. 4
      .env.development
  2. 162
      src/components/map/naver/dron/DronMarker.js

4
.env.development
Unescape View File

@ -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

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

@ -43,45 +43,45 @@ export const DronMarker = props => {
let map = props.map;
let CustomOverlay;
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).toFixed(
6
)} | ${(data?.coord._lng).toFixed(6)}</span>
</div>
</div>
</div>
</div>
`;
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)
});
// 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).toFixed(
// 6
// )} | ${(data?.coord._lng).toFixed(6)}</span>
// </div>
// </div>
// </div>
// </div>
// `;
infoWindow.open(props.map, data.coord);
};
// 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(`<div class="dblock-ti"><span>${info?._id}</span>
// <span>${item?.speed}${item?.speedType} | ${item?.elev}${item?.elevType} | ${item?.heading}</span></div>`);
info._element.html(`
<div class="dblock-ti">
<span>${info?._id}</span>
</div>
<div class="dblock-txt>
<div class="dblock-txt-list">
<div>
<span style="width: 250px; display: inline-block;">${item?.speed}${
item?.speedType
} | ${item?.elev}${item?.elevType} | ${item?.heading}</span>
<span style="width: 250px; display: inline-block;">${(item?.lat).toFixed(
6
)} | ${(item?.lng).toFixed(6)}</span>
</div>
</div>
</div>
`);
}
};
@ -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,10 +383,22 @@ export const DronMarker = props => {
const infoInit = (marker, gps, idx) => {
CustomOverlay = function (options) {
this._element = $(`
<div class="dblock-box" style="width: 140px;">
<div class="dblock-box" style="width:160px;font-size: 14px;">
<div class="dblock-ti">
<span>${marker?.id}</span>
<span>${gps?.speed}${gps?.speedType} | ${gps?.elev}${gps?.elevType} | ${gps?.heading}</span>
</div>
<div class="dblock-txt>
<div class="dblock-txt-list">
<div>
<span style="width: 250px; display: inline-block;">${gps?.speed}${
gps?.speedType
} | ${gps?.elev}${gps?.elevType} | ${gps?.heading}</span>
<span style="width: 250px; display: inline-block;">${(gps?.lat).toFixed(
6
)} | ${(gps?.lng).toFixed(6)}</span>
</div>
</div>
</div>
</div>
`);
@ -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(

Write Preview
Loading…
Cancel
Save