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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      .env.development
  2. 170
      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_HOST = http://192.168.0.34:8080/
REACT_APP_WS_HOST = ws://localhost:8081/ws REACT_APP_WS_HOST = ws://192.168.0.34:8081/ws
REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/ REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/
# Naver Search API HOST # Naver Search API HOST

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

@ -43,45 +43,45 @@ export const DronMarker = props => {
let map = props.map; let map = props.map;
let CustomOverlay; let CustomOverlay;
let infoWindow; let infoWindow;
const infowindowOpen = data => { // const infowindowOpen = data => {
const content = ` // const content = `
<div class="dblock-box"> // <div class="dblock-box">
<div class="dblock-ti"> // <div class="dblock-ti">
<span>${data?.id}</span> // <span>${data?.id}</span>
</div> // </div>
<div class="dblock-txt> // <div class="dblock-txt>
<div class="dblock-txt-list"> // <div class="dblock-txt-list">
<div> // <div>
<span style="width: 250px; display: inline-block;">${ // <span style="width: 250px; display: inline-block;">${
data?.speed // data?.speed
}${data?.speedType} | ${data?.elev}${data?.elevType} | ${ // }${data?.speedType} | ${data?.elev}${data?.elevType} | ${
data?.heading // data?.heading
}</span> // }</span>
<span style="width: 250px; display: inline-block;">${(data?.coord._lat).toFixed( // <span style="width: 250px; display: inline-block;">${(data?.coord._lat).toFixed(
6 // 6
)} | ${(data?.coord._lng).toFixed(6)}</span> // )} | ${(data?.coord._lng).toFixed(6)}</span>
</div> // </div>
</div> // </div>
</div> // </div>
</div> // </div>
`; // `;
infoWindow = new naver.maps.InfoWindow({ // infoWindow = new naver.maps.InfoWindow({
class: 'tooltip-dblock', // class: 'tooltip-dblock',
content: content, // content: content,
maxWidth: 160, // maxWidth: 160,
backgroundColor: '#283046', //박스안쪽영역 컬러 // backgroundColor: '#283046', //박스안쪽영역 컬러
// borderColor: '#333', //테두리컬러 // // borderColor: '#333', //테두리컬러
// borderWidth: 3, //테두리 굵기 // // borderWidth: 3, //테두리 굵기
// anchorSize: new naver.maps.Size(30, -10), // // anchorSize: new naver.maps.Size(30, -10),
anchorSkew: false, // anchorSkew: false,
anchorColor: '#283046', // anchorColor: '#283046',
pixelOffset: new naver.maps.Point(20, -20) // pixelOffset: new naver.maps.Point(20, -20)
}); // });
infoWindow.open(props.map, data.coord); // infoWindow.open(props.map, data.coord);
}; // };
// useLayoutEffect(() => { // useLayoutEffect(() => {
// dispatch(controlGroupAuthAction.request()); // dispatch(controlGroupAuthAction.request());
@ -149,7 +149,6 @@ export const DronMarker = props => {
markerOption.type = 'DRONE'; markerOption.type = 'DRONE';
} else { } else {
if (user.authId === 'SUPER' || user.authId === 'ADMIN') { if (user.authId === 'SUPER' || user.authId === 'ADMIN') {
console.log('super, admin');
markerOption.url = FlightIcon; markerOption.url = FlightIcon;
markerOption.type = 'FLIGHT'; markerOption.type = 'FLIGHT';
} else { } else {
@ -213,18 +212,18 @@ export const DronMarker = props => {
handlerDronClick(marker.controlId, marker.id); handlerDronClick(marker.controlId, marker.id);
}); });
naver.maps.Event.addListener(marker, 'mouseover', function (e) { // naver.maps.Event.addListener(marker, 'mouseover', function (e) {
const data = {}; // const data = {};
data.id = marker.id; // data.id = marker.id;
data.speed = marker.gps?.speed; // data.speed = marker.gps?.speed;
data.speedType = marker.gps?.speedType; // data.speedType = marker.gps?.speedType;
data.elev = marker.gps?.elev; // data.elev = marker.gps?.elev;
data.elevType = marker.gps?.elevType; // data.elevType = marker.gps?.elevType;
data.heading = marker.gps?.heading; // data.heading = marker.gps?.heading;
data.coord = marker.position; // data.coord = marker.position;
infowindowOpen(data); // infowindowOpen(data);
}); // });
naver.maps.Event.addListener(marker, 'mouseout', function (e) { naver.maps.Event.addListener(marker, 'mouseout', function (e) {
if (infoWindow) { 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]); setArrMarkers(m => [...m, marker]);
}; };
@ -290,9 +303,28 @@ export const DronMarker = props => {
}); });
}; };
const moveInfos = (info, position) => { const moveInfos = (info, position, item, idx) => {
if (info) { if (info) {
info.setPosition(position, 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 = () => { const markerInit = () => {
if (controlGpList) { if (controlGpList) {
allRemoveMarkers(); allRemoveMarkers();
controlGpList.map(item => { controlGpList.map((item, idx) => {
let position = new naver.maps.LatLng(item.lat, item.lng); let position = new naver.maps.LatLng(item.lat, item.lng);
if (arrMarkers) { if (arrMarkers) {
@ -336,7 +368,7 @@ export const DronMarker = props => {
const isInfos = arrInfos.find(info => info._id === item.objectId); const isInfos = arrInfos.find(info => info._id === item.objectId);
if (isExists) { if (isExists) {
moveMarkers(isExists, position, item); moveMarkers(isExists, position, item);
moveInfos(isInfos, position); moveInfos(isInfos, position, item, idx);
} else { } else {
addMarkers(position, item.objectId, item.controlId, item); addMarkers(position, item.objectId, item.controlId, item);
} }
@ -351,12 +383,24 @@ export const DronMarker = props => {
const infoInit = (marker, gps, idx) => { const infoInit = (marker, gps, idx) => {
CustomOverlay = function (options) { CustomOverlay = function (options) {
this._element = $(` this._element = $(`
<div class="dblock-box" style="width: 140px;">
<div class="dblock-ti"> <div class="dblock-box" style="width:160px;font-size: 14px;">
<span>${marker?.id}</span> <div class="dblock-ti">
<span>${gps?.speed}${gps?.speedType} | ${gps?.elev}${gps?.elevType} | ${gps?.heading}</span> <span>${marker?.id}</span>
</div> </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>
</div>
`); `);
// this._element = $(` // this._element = $(`
@ -421,6 +465,11 @@ export const DronMarker = props => {
this._element.off(); this._element.off();
}; };
CustomOverlay.prototype.setElement = function (element, idx) {
this._element = element;
this.draw(idx);
};
//속성 //속성
CustomOverlay.prototype.setPosition = function (position, idx) { CustomOverlay.prototype.setPosition = function (position, idx) {
this._position = position; this._position = position;
@ -460,6 +509,7 @@ export const DronMarker = props => {
arrMarkers.forEach((marker, idx) => { arrMarkers.forEach((marker, idx) => {
infoInit(marker, controlGpList[idx], idx); infoInit(marker, controlGpList[idx], idx);
if (arrInfos.filter(i => i._idx === idx).length > 0) return;
if (controlGpList.length != 0) { if (controlGpList.length != 0) {
const info = new CustomOverlay({ const info = new CustomOverlay({
position: new naver.maps.LatLng( position: new naver.maps.LatLng(

Write Preview
Loading…
Cancel
Save