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

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

pull/2/head
junh_eee(이준희) 1 year ago
parent
963b561e6c 8bb4181095
commit
bf7d43920b
5 changed files with 90 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. 7
      src/assets/css/custom.css
  2. 29
      src/components/analysis/simulation/AnalysisSimulatorSlider.js
  3. 4
      src/components/map/MapControl.js
  4. 60
      src/components/map/mapbox/MapBoxMap.js
  5. 50
      src/components/map/mapbox/dron/DronMarker.js

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

@ -406,13 +406,14 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon
.tooltip-test{position:absolute;left:500px;top:500px;}
.tooltip-box{background:#283046;padding:10px;border-radius:6px;position:relative;max-width:150px;word-break: break-all;}
/* .tooltip-box div{text-align:left;font-size:13px;} */
.tooltip-ti{border-bottom:1px solid #bbb;padding-bottom:4px;}
.tooltip-ti{border-bottom:1px solid #bbb;padding-bottom:3px;font-size:0.875rem;color:#f4f4f4;}
/* .tooltip-ti span, .tooltip-txt .ti{color:#f4f4f4;font-weight:400;} */
.tooltip-txt{color:#f4f4f4;font-weight:400;font-size:12px}
.tooltip-txt{font-weight:400;font-size:12px;padding-top:6px}
.tooltip-txt-list + .tooltip-txt-list{margin-top:4px;}
.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;}
.tooltip-txt-list .ti:before{content:'/';margin:0 2px;}
.tooltip-txt-list .ti:first-child::before{display:none;}
/* 데이터블록 */
.dblock-box{background:#283046;padding:6px 8px;border-radius:6px;width:150px;word-break: break-all;position:absolute}
.dblock-box div{text-align:left;font-size:11px;color:#bbb;}
@ -843,3 +844,5 @@ background-size: 75% auto;
.layer-weather-address{display:flex;align-items:center;justify-content:space-between;}
.box_4n{display:flex;flex-wrap: wrap;}
.box_4n div{width:50%;height:50vh;}
.mapboxgl-popup-content {padding: 0 !important;border-radius:6px !important;}
.mapboxgl-popup-tip {display: none!important;}

29
src/components/analysis/simulation/AnalysisSimulatorSlider.js
Unescape View File

@ -7,6 +7,22 @@ const AnalysisSimulatorSlider = ({
playCount,
setSliderCount
}) => {
// hh:mm 형식으로 바꿔주는 코드
function convertToTimeFormat(number) {
// 시간과 분 계산
const hours = Math.floor(number / 60);
const minutes = Math.floor(number % 60);
// 2자리 숫자로 포맷팅
const formattedHours = String(hours).padStart(2, '0');
const formattedMinutes = String(minutes).padStart(2, '0');
// 시간 문자열 생성
const timeString = `${formattedHours}:${formattedMinutes}`;
return timeString;
}
const colorOptions = {
start: [playCount ? playCount : 0],
// connect: true,
@ -20,9 +36,10 @@ const AnalysisSimulatorSlider = ({
format: {
// 'to' the formatted value. Receives a number.
to: function (value) {
return Math.round(value);
return convertToTimeFormat(value);
},
// 'from' the formatted value.
// // 'from' the formatted value.
// Receives a string, should return a number.
from: function (value) {
return Math.round(value);
@ -34,7 +51,13 @@ const AnalysisSimulatorSlider = ({
density: 3
},
onChange: e => {
setSliderCount(e);
function timeStringToMinutes(timeString) {
const [hours, minutes] = timeString.split(':').map(Number);
const totalMinutes = hours * 60 + minutes;
return totalMinutes.toString();
}
setSliderCount(e.map(timeStringToMinutes));
},
direction
};

4
src/components/map/MapControl.js
Unescape View File

@ -5,8 +5,8 @@ import MapBoxMap from './mapbox/MapBoxMap';
export const MapControl = props => {
return (
<>{props.mapType === 'google' ? <GoogleCustomMap /> : <NaverCustomMap />}</>
// <>{props.mapType === 'google' ? <GoogleCustomMap /> : <NaverCustomMap />}</>
// <NaverCustomMap />
// <MapBoxMap />
<MapBoxMap />
);
};

60
src/components/map/mapbox/MapBoxMap.js
Unescape View File

@ -314,38 +314,38 @@ export default function MapBoxMap() {
type: 'raster-dem',
url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
tileSize: 512,
maxZoom: 16
maxZoom: 14
});
map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 });
map.addLayer({
id: 'contour-labels',
type: 'symbol',
source: {
type: 'vector',
url: 'mapbox://mapbox.mapbox-terrain-v2'
},
'source-layer': 'contour',
layout: {
visibility: 'visible',
'symbol-placement': 'line',
'text-field': ['concat', ['to-string', ['get', 'ele']], 'm']
},
paint: {
'icon-color': '#877b59',
'icon-halo-width': 1,
'text-color': '#877b59',
'text-halo-width': 1
}
});
map.addLayer({
id: 'sky',
type: 'sky',
paint: {
'sky-type': 'atmosphere',
'sky-atmosphere-sun': [0.0, 90.0],
'sky-atmosphere-sun-intensity': 15
}
});
// map.addLayer({
// id: 'contour-labels',
// type: 'symbol',
// source: {
// type: 'vector',
// url: 'mapbox://mapbox.mapbox-terrain-v2'
// },
// 'source-layer': 'contour',
// layout: {
// visibility: 'visible',
// 'symbol-placement': 'line',
// 'text-field': ['concat', ['to-string', ['get', 'ele']], 'm']
// },
// paint: {
// 'icon-color': '#877b59',
// 'icon-halo-width': 1,
// 'text-color': '#877b59',
// 'text-halo-width': 1
// }
// });
// map.addLayer({
// id: 'sky',
// type: 'sky',
// paint: {
// 'sky-type': 'atmosphere',
// 'sky-atmosphere-sun': [0.0, 90.0],
// 'sky-atmosphere-sun-intensity': 15
// }
// });
// 지형 3d end
// 등고선 start
map.addLayer({

50
src/components/map/mapbox/dron/DronMarker.js
Unescape View File

@ -370,32 +370,33 @@ export const DronMarker = props => {
// anchor: getIcon.anchor
// });
};
//
const moveInfos = (info, position, item, idx) => {
if (info) {
info.setLngLat([position.lng, position.lat]);
// 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>
// ${
// typeof item?.lat === 'number' && typeof item?.lng === 'number'
// ? `
// <span>
// ${(item?.lat).toFixed(6)} ${(item?.lng).toFixed(6)}
// </span>`
// : ''
// }
// </div>
// </div>
// `);
info.setHTML(
`
<div class="dblock-box">
<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>
${
typeof item?.lat === 'number' && typeof item?.lng === 'number'
? `
<span>
${(item?.lat).toFixed(6)} ${(item?.lng).toFixed(6)}
</span>`
: ''
}
</div>
</div>
</div>
`
);
}
};
@ -602,7 +603,8 @@ export const DronMarker = props => {
const info = new props.mapboxgl.Popup({
closeButton: false,
closeOnClick: false
closeOnClick: false,
offset: new props.mapboxgl.Point(5, -60)
})
.setLngLat([marker.position.lng, marker.position.lat])
.setHTML(

Write Preview
Loading…
Cancel
Save