드론 운항정보 표출

src/components/map/naver/NaverMap.js

@@ -1,26 +1,18 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import dronicon from '../../../assets/control/icon/drone.png';
 import { DronMarker } from './dron/DronMarker';
 import { DronHistory } from './dron/DronHistory';
-
 import NaverMapControl from './NaverMapControl';
 import { NaverMapSearch } from './search/NaverMapSearch';
 import { FeatureAirZone } from './feature/FeatureAirZone';
 import geoJson from '../geojson/airArea.json';
-import SensorZone from "./sensor/SensorZone";
 import { controlGroupAuthAction } from '../../../modules/control/gp';
 import DronPlan from './dron/DronPlan';
-import DronToast from './dron/DronToast';
-import { toast } from 'react-toastify';
 
 export const NaverCustomMap = () => {
     const dispatch = useDispatch();
     const naver = window.naver;    
     
-    // const { controlGpContains } = useSelector(state => state.controlGpFltPlanState);
-
-    const [isMapLoad, setIsMapLoad] = useState(false);
     const [mapObject, setMapObject] = useState(null);
     const [arrPolyline, setArrPolyline] = useState([]);
 
@@ -39,7 +31,7 @@ export const NaverCustomMap = () => {
             center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
             zoom: 10,
             zoomControl: true,
-            mapTypeId: naver.maps.MapTypeId.HYBRID,
+            mapTypeId: naver.maps.MapTypeId.NORMAR,
             zoomControlOptions: {
                 position: naver.maps.Position.TOP_LEFT,
 

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

@@ -105,6 +105,9 @@ export const DronMarker = props => {
 
         marker.setMap(props.map);
 
+        // drone 정보 창
+        markerInfoWindow(marker);
+
         naver.maps.Event.addListener(marker, 'click', function (e) {
             handlerDronClick(marker);
         });
@@ -182,5 +185,43 @@ export const DronMarker = props => {
         setArrMarkers(arrData);
     };
 
+    const markerInfoWindow = (marker) => {
+        controlGpList.forEach(gps => {
+            
+            const contents = [
+                `<div class="tooltip-box">`,
+                `   <div class="tooltip-ti">`,
+                `       <span>${marker.id}</span>`,
+                `   </div>`,
+                `   <div class="tooltip-txt">`,
+                `       <div class="tooltip-txt-list">`,                
+                `          <span>${gps.speed}${gps.speedType}</span>`,
+                `       </div>`,
+                `       <div class="tooltip-txt-list">`,
+                `          <span>${gps.elev}${gps.elevType}</span>`,
+                `       </div>`,
+                `       <div class="tooltip-txt-list">`,
+                `          <span>${gps.heading}</span>`,
+                `       </div>`,
+                `   </div>`,
+                `</div>`
+            ].join('');
+
+            const info = new naver.maps.InfoWindow({ 
+                id: marker.id,
+                content: contents,
+                backgroundColor: '#283046', //박스안쪽영역 컬러                
+                anchorSize: new props.naver.maps.Size(30, -10),
+                anchorSkew: false,
+                anchorColor: '#283046',
+                pixelOffset: new props.naver.maps.Point(20, -20)
+            });
+
+            console.log(info);
+
+            info.open(props.map, marker);
+        });
+    }
+
     return null;
 };

src/components/map/naver/dron/DronPlan.js

@@ -11,8 +11,6 @@ const DronPlan = ({ naver, map }) => {
     const { controlGpList } = useSelector(state => state.controlGpState);
     const { controlGpFltPlanList } = useSelector(state => state.controlGpFltPlanState);
     const { objectId, isClickObject } = useSelector(state => state.controlMapReducer);
-    const { controlGpContains } = useSelector(state => state.controlGpFltPlanState);
-
     
     const [area, setArea] = useState(); // 비행 구역 관리
     const [buffer, setBuffer] = useState(); // 버퍼 구역 관리

src/modules/control/map/reducers/controlMapReducer.ts

@@ -1,6 +1,6 @@
 // ** Initial State
 const initialState = {
-  mapType: 'HYBRID',
+  mapType: 'NORMAL',
   objectId: null,
   isClickObject: false,
   area0001: true, // 비행금지 구역