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

src/assets/css/custom.css

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

src/components/analysis/simulation/AnalysisSimulatorSlider.js

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

src/components/map/MapControl.js

@@ -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 />
   );
 };

src/components/map/mapbox/MapBoxMap.js

@@ -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({
+      // map.addLayer({
-        id: 'contour-labels',
+      //   id: 'contour-labels',
-        type: 'symbol',
+      //   type: 'symbol',
-        source: {
+      //   source: {
-          type: 'vector',
+      //     type: 'vector',
-          url: 'mapbox://mapbox.mapbox-terrain-v2'
+      //     url: 'mapbox://mapbox.mapbox-terrain-v2'
-        },
+      //   },
-        'source-layer': 'contour',
+      //   'source-layer': 'contour',
-        layout: {
+      //   layout: {
-          visibility: 'visible',
+      //     visibility: 'visible',
-          'symbol-placement': 'line',
+      //     'symbol-placement': 'line',
-          'text-field': ['concat', ['to-string', ['get', 'ele']], 'm']
+      //     'text-field': ['concat', ['to-string', ['get', 'ele']], 'm']
-        },
+      //   },
-        paint: {
+      //   paint: {
-          'icon-color': '#877b59',
+      //     'icon-color': '#877b59',
-          'icon-halo-width': 1,
+      //     'icon-halo-width': 1,
-          'text-color': '#877b59',
+      //     'text-color': '#877b59',
-          'text-halo-width': 1
+      //     'text-halo-width': 1
-        }
+      //   }
-      });
+      // });
-      map.addLayer({
+      // map.addLayer({
-        id: 'sky',
+      //   id: 'sky',
-        type: 'sky',
+      //   type: 'sky',
-        paint: {
+      //   paint: {
-          'sky-type': 'atmosphere',
+      //     'sky-type': 'atmosphere',
-          'sky-atmosphere-sun': [0.0, 90.0],
+      //     'sky-atmosphere-sun': [0.0, 90.0],
-          'sky-atmosphere-sun-intensity': 15
+      //     'sky-atmosphere-sun-intensity': 15
-        }
+      //   }
-      });
+      // });
       // 지형 3d end
       // 등고선 start
       map.addLayer({

src/components/map/mapbox/dron/DronMarker.js

@@ -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.setHTML(
-      //   // info._element.html(`<div class="dblock-ti"><span>${info?._id}</span>
+        `
-      //   // <span>${item?.speed}${item?.speedType} | ${item?.elev}${item?.elevType} | ${item?.heading}</span></div>`);
+      <div class="dblock-box">
-      //   info._element.html(`
+        <div class="dblock-ti">
-      //     <div class="dblock-ti">
+          <span>${info?._id}</span>
-      //       <span>${info?._id}</span>
+        </div>
-      //     </div>
+        <div class="dblock-txt">
-      //     <div class="dblock-txt">
+          <div class="dblock-txt-list">
-      //       <div class="dblock-txt-list">
+            <span>${item?.elev}M</span>
-      //           <span>${item?.elev}M</span>
+            <span>${item?.speed}km</span>
-      //           <span>${item?.speed}km</span>
+            ${
-      //           ${
+              typeof item?.lat === 'number' && typeof item?.lng === 'number'
-      //             typeof item?.lat === 'number' && typeof item?.lng === 'number'
+                ? `
-      //               ? `
+                <span>
-      //               <span>
+                  ${(item?.lat).toFixed(6)} ${(item?.lng).toFixed(6)}
-      //                 ${(item?.lat).toFixed(6)} ${(item?.lng).toFixed(6)}
+                </span>`
-      //               </span>`
+                : ''
-      //               : ''
+            }
-      //           }
+          </div>
-      //       </div>
+        </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(