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

Merge branch 'master' of http://gitea.palntour.com/pav/pav-home

ctrlDraw
이준희 2 years ago
parent
ba0745970e 4ecf185a1c
commit
60eb9c4a7c
4 changed files with 2808 additions and 739 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. 3353
      src/assets/css/custom.css
  3. 166
      src/components/map/naver/dron/DronMarker.js
  4. 24
      src/views/design/DesignMain.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

3353
src/assets/css/custom.css
View File

File diff suppressed because it is too large Load Diff

166
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)
});
infoWindow.open(props.map, data.coord);
};
// 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)
// });
// 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,24 @@ export const DronMarker = props => {
}
});
// naver.maps.Event.addListener(map, 'zoom_changed', function (zoom) {
// const a = document.getElementsByClassName('dblock-box');
// for (let i = 0; i < a.length; i++) {
// if (zoom <= 9) {
// a[i].style.display = 'none';
// } else {
// a[i].style.display = 'block';
// 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 +307,26 @@ 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">
<span>${item?.elev}M</span>
<span>${item?.speed}km</span>
<span>${(item?.lat).toFixed(6)} ${(item?.lng).toFixed(6)}</span>
</div>
</div>
`);
}
};
@ -328,7 +362,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 +370,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 +385,18 @@ export const DronMarker = props => {
const infoInit = (marker, gps, idx) => {
CustomOverlay = function (options) {
this._element = $(`
<div class="dblock-box" style="width: 140px;">
<div class="dblock-ti">
<span>${marker?.id}</span>
<span>${gps?.speed}${gps?.speedType} | ${gps?.elev}${gps?.elevType} | ${gps?.heading}</span>
</div>
<div class="dblock-box">
<div class="dblock-ti">
<span>${marker?.id}</span>
</div>
<div class="dblock-txt">
<div class="dblock-txt-list">
<span>${gps?.elev}M</span>
<span>${gps?.speed}km</span>
<span>${(gps?.lat).toFixed(6)} ${(gps?.lng).toFixed(6)}</span>
</div>
</div>
</div>
`);
// this._element = $(`
@ -421,6 +461,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 +505,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(

24
src/views/design/DesignMain.js
Unescape View File

@ -1111,21 +1111,33 @@ const DesignMain = () => {
<span className='line-test04'>
</span>
<div className='tooltip-test'>
<div className='tooltip-box'>
{/* <div className='tooltip-ti'><span>로봇타워로봇타워로봇타워로봇타워로봇타워로봇타워로봇타워</span></div> */}
<div className='dblock-box'>
<div class="dblock-ti">
<span>KAL1154</span>
</div>
<div className='dblock-txt'>
<div class="dblock-txt-list">
<span>2667.4M(고도)</span>
<span>450km(속도)</span>
<span>123.121.123123(좌표)</span>
</div>
</div>
</div>
{/* <div className='tooltip-box'>
<div className='tooltip-ti'><span>로봇타워로봇타워로봇타워로봇타워로봇타워로봇타워로봇타워</span></div>
<div className='tooltip-txt'>
<div className='tooltip-txt-list'>
<span className='ti'>KAL1154</span>
<span className='ti'>2667.4M37.123456123.121.123123</span>
<span className='ti'>123.121.123123</span>
</div>
{/* <div className='tooltip-txt-list'>
<div className='tooltip-txt-list'>
<span className='ti'>좌표정보</span>
<span>35.232600, 127.650225</span>
</div> */}
</div>
</div>
{/* <span class="arrow"></span> */}
</div>
<span class="arrow"></span>
</div> */}
</div>
</div>

Write Preview
Loading…
Cancel
Save