드론교통관리 시스템 Marker click, unclick 색상 변경 및 줌 레벨 변경

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

@@ -51,6 +51,14 @@ export const DronMarker = props => {
   //   dispatch(controlGroupAuthAction.request());
   // }, [controlGpList]);
 
+  useEffect(() => {
+    dispatch(
+      JOIN_LIST.request({
+        cstmrSno: user?.cstmrSno
+      })
+    );
+  }, []);
+
   useEffect(() => {
     if (count.drone.length > 0 || count.flight.length > 0) {
       dispatch(
@@ -71,14 +79,6 @@ export const DronMarker = props => {
     }
   }, [count]);
 
-  useEffect(() => {
-    dispatch(
-      JOIN_LIST.request({
-        cstmrSno: user?.cstmrSno
-      })
-    );
-  }, []);
-
   useEffect(() => {
     if (arrMarkers.length != 0) {
       markerInfo(arrMarkers);
@@ -89,6 +89,31 @@ export const DronMarker = props => {
     markerInit();
   }, [controlGpList]);
 
+  // Marker Click, UnClick 색상 변경 및 줌 변경
+  useEffect(() => {
+    if (isClickObject) {
+      const clickMarker = arrMarkers.filter(i => i.controlId === objectId)[0];
+      const el = document.getElementById(clickMarker.id);
+      const { lng, lat } = clickMarker.position;
+      if (clickMarker.type === 'DRONE') {
+        el.src = DronDetailIcon;
+      } else {
+        el.src = FlightDetailIcon;
+      }
+      props.map.flyTo({ center: [lng, lat], zoom: 13 });
+    } else {
+      arrMarkers.map(i => {
+        const el = document.getElementById(i.id);
+        if (i.type === 'DRONE') {
+          el.src = DronIcon;
+        } else {
+          el.src = FlightIcon;
+        }
+      });
+      props.map.flyTo({ center: [127.85101412107547, 37.520357], zoom: 8.5 });
+    }
+  }, [isClickObject]);
+
   //   useEffect(() => {
   //     let imageUrl;
   //     arrMarkers.map(clickMarker => {
@@ -247,18 +272,13 @@ export const DronMarker = props => {
     marker.type = markerOption.type;
     marker.gps = gps;
     marker.position = position;
-    marker.icon = {
-      content: `<img id=${id} src="${markerOption.url}" alt="" style="transform: rotate(${gps.heading}deg);">`,
-      origin: markerOption.origin,
-      anchor: markerOption.anchor
-    };
 
     dispatch(controlGpFlightPlanAction.request(marker.id)); //예상경로
     // dispatch(controlGpHisAction.request({ id: marker.controlId })); //진행경로;
 
     /** drone 상세보기 */
     marker.getElement().addEventListener('click', function (e) {
-      handlerDronClick(marker.controlId, marker.id);
+      handlerDronClick(marker);
     });
 
     if (markerOption.url) {
@@ -266,10 +286,9 @@ export const DronMarker = props => {
     }
   };
 
-  const handlerDronClick = (controlId, idntfNum) => {
-    // get detail, history, flight-plan
-    dispatch(objectClickAction(controlId));
-    dispatch(controlGpDtlAction.request(controlId));
+  const handlerDronClick = marker => {
+    dispatch(objectClickAction(marker.controlId));
+    dispatch(controlGpDtlAction.request(marker.controlId));
     // dispatch(controlGpFlightPlanAction.request(idntfNum));
   };