레이어 그룹 설정 기능 추가

plaredspear · plaredspear · commit fe150f5344b8 · 2021-05-18T17:24:29.000+09:00
setLayerGroupEnabled 함수 추가
android 는 command 로 동작할 수 있도록 추가했습니다.
diff --git a/README.md b/README.md
@@ -187,6 +187,7 @@ animateToCoordinates: (coords: Coord[], bounds?: {
 }) => void;
 animateToRegion: (region: Region) => void;
 setLocationTrackingMode: (mode: number) => void;
+setLayerGroupEnabled: (group: LayerGroup, enabled: boolean) => void;
 showsMyLocationButton: (show: boolean) => void;
 handleOnCameraChange: (event: React.SyntheticEvent<{}, {
     latitude: number;
@@ -313,6 +314,18 @@ export interface PolygonProps {
 }
 ```
 
+### `LayerGroup`
+```ts
+export declare enum LayerGroup {
+    LAYER_GROUP_BUILDING = "building",
+    LAYER_GROUP_TRANSIT = "transit",
+    LAYER_GROUP_BICYCLE = "bike",
+    LAYER_GROUP_TRAFFIC = "ctt",
+    LAYER_GROUP_CADASTRAL = "landparcel",
+    LAYER_GROUP_MOUNTAIN = "mountain"
+}
+```
+
 ## 참고
 
 - *react-navigation*의 스택 스크린 사용시 안드로이드에서 맵뷰가 겹쳐 보이는 현상이 있을 경우 `useTextureView` 옵션을 추가해 주세요. [#27](https://github.com/QuadFlask/react-native-naver-map/issues/27)
diff --git a/android/src/main/java/com/github/quadflask/react/navermap/RNNaverMapViewManager.java b/android/src/main/java/com/github/quadflask/react/navermap/RNNaverMapViewManager.java
@@ -38,6 +38,7 @@ public class RNNaverMapViewManager extends ViewGroupManager<RNNaverMapViewContai
     private static final int ANIMATE_TO_TWO_COORDINATES = 3;
     private static final int SET_LOCATION_TRACKING_MODE = 4;
     private static final int ANIMATE_TO_COORDINATES = 6;
+    private static final int SET_LAYER_GROUP_ENABLED = 7;
     private static final List<String> LAYER_GROUPS = Collections.unmodifiableList(Arrays.asList(
             NaverMap.LAYER_GROUP_BUILDING,
             NaverMap.LAYER_GROUP_TRANSIT,
@@ -294,6 +295,32 @@ public void receiveCommand(@NonNull RNNaverMapViewContainer mapView, int command
             case SET_LOCATION_TRACKING_MODE:
                 mapView.setLocationTrackingMode(args.getInt(0));
                 break;
+
+            case SET_LAYER_GROUP_ENABLED:
+                String group = args.getString(0);
+                Boolean enable = args.getBoolean(1);
+
+                switch (group) {
+                    case "building":
+                        mapView.setLayerGroupEnabled(NaverMap.LAYER_GROUP_BUILDING, enable);
+                        break;
+                    case "transit":
+                        mapView.setLayerGroupEnabled(NaverMap.LAYER_GROUP_TRANSIT, enable);
+                        break;
+                    case "bike":
+                        mapView.setLayerGroupEnabled(NaverMap.LAYER_GROUP_BICYCLE, enable);
+                        break;
+                    case "ctt":
+                        mapView.setLayerGroupEnabled(NaverMap.LAYER_GROUP_TRAFFIC, enable);
+                        break;
+                    case "landparcel":
+                        mapView.setLayerGroupEnabled(NaverMap.LAYER_GROUP_CADASTRAL, enable);
+                        break;
+                    case "mountain":
+                        mapView.setLayerGroupEnabled(NaverMap.LAYER_GROUP_MOUNTAIN, enable);
+                        break;
+                }
+                break;
         }
     }
 
@@ -305,6 +332,7 @@ public java.util.Map<String, Integer> getCommandsMap() {
                 .put("animateToTwoCoordinates", ANIMATE_TO_TWO_COORDINATES)
                 .put("setLocationTrackingMode", SET_LOCATION_TRACKING_MODE)
                 .put("animateToCoordinates", ANIMATE_TO_COORDINATES)
+                .put("setLayerGroupEnabled", SET_LAYER_GROUP_ENABLED)
                 .build();
     }
 
diff --git a/example/App.js b/example/App.js
@@ -1,10 +1,11 @@
 import 'react-native-gesture-handler';
-import React, {useEffect} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import NaverMapView, {Align, Circle, Marker, Path, Polygon, Polyline} from "./map";
 import {Image, ImageBackground, PermissionsAndroid, Platform, ScrollView, Text, TouchableOpacity, View} from "react-native";
 import {NavigationContainer} from '@react-navigation/native';
 import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
 import {createStackNavigator} from "@react-navigation/stack";
+import { LayerGroup } from './map/index';
 
 const P0 = {latitude: 37.564362, longitude: 126.977011};
 const P1 = {latitude: 37.565051, longitude: 126.978567};
@@ -35,19 +36,32 @@ const TextScreen = () => {
 }
 
 const MapViewScreen = ({navigation}) => {
+    const mapView = useRef(null);
+
     useEffect(() => {
         requestLocationPermission();
     }, []);
 
+    const [enableLayerGroup, setEnableLayerGroup] = useState(true);
+
     return <>
-        <NaverMapView style={{width: '100%', height: '100%'}}
+        <NaverMapView ref={mapView}
+                      style={{width: '100%', height: '100%'}}
                       showsMyLocationButton={true}
                       center={{...P0, zoom: 16}}
                       onTouch={e => console.warn('onTouch', JSON.stringify(e.nativeEvent))}
                       onCameraChange={e => console.warn('onCameraChange', JSON.stringify(e))}
                       onMapClick={e => console.warn('onMapClick', JSON.stringify(e))}
                       useTextureView>
-            <Marker coordinate={P0} onClick={() => console.warn('onClick! p0')} caption={{text: "test caption", align: Align.Left}}/>
+            <Marker coordinate={P0}
+                onClick={() => {
+                    console.warn('onClick! p0')
+                    mapView.current.setLayerGroupEnabled(LayerGroup.LAYER_GROUP_BICYCLE, enableLayerGroup);
+                    mapView.current.setLayerGroupEnabled(LayerGroup.LAYER_GROUP_TRANSIT, enableLayerGroup);
+                    setEnableLayerGroup(!enableLayerGroup)
+                }}
+                caption={{ text: "test caption", align: Align.Left }}
+            />
             <Marker coordinate={P1} pinColor="blue" zIndex={1000} onClick={() => console.warn('onClick! p1')}/>
             <Marker coordinate={P2} pinColor="red" zIndex={100} alpha={0.5} onClick={() => console.warn('onClick! p2')}/>
             <Marker coordinate={P4} onClick={() => console.warn('onClick! p4')} image={require("./marker.png")} width={48} height={48}/>
diff --git a/example/map/index.d.ts b/example/map/index.d.ts
@@ -116,6 +116,7 @@ export default class NaverMapView extends Component<NaverMapViewProps> {
     }) => void;
     animateToRegion: (region: Region) => void;
     setLocationTrackingMode: (mode: number) => void;
+    setLayerGroupEnabled: (group: LayerGroup, enabled: boolean) => void;
     showsMyLocationButton: (show: boolean) => void;
     private dispatchViewManagerCommand;
     handleOnCameraChange: (event: React.SyntheticEvent<{}, {
diff --git a/example/map/index.js b/example/map/index.js
@@ -83,6 +83,9 @@ export default class NaverMapView extends Component {
         this.setLocationTrackingMode = (mode) => {
             this.dispatchViewManagerCommand('setLocationTrackingMode', [mode]);
         };
+        this.setLayerGroupEnabled = (group, enabled) => {
+            this.dispatchViewManagerCommand('setLayerGroupEnabled', [group, enabled]);
+        };
         this.showsMyLocationButton = (show) => {
             this.dispatchViewManagerCommand('showsMyLocationButton', [show]);
         };
diff --git a/index.d.ts b/index.d.ts
@@ -117,6 +117,7 @@ export default class NaverMapView extends Component<NaverMapViewProps, {}> {
     }) => void;
     animateToRegion: (region: Region) => void;
     setLocationTrackingMode: (mode: number) => void;
+    setLayerGroupEnabled: (group: LayerGroup, enabled: boolean) => void;
     showsMyLocationButton: (show: boolean) => void;
     private dispatchViewManagerCommand;
     handleOnCameraChange: (event: React.SyntheticEvent<{}, {
diff --git a/index.js b/index.js
@@ -83,6 +83,9 @@ export default class NaverMapView extends Component {
         this.setLocationTrackingMode = (mode) => {
             this.dispatchViewManagerCommand('setLocationTrackingMode', [mode]);
         };
+        this.setLayerGroupEnabled = (group, enabled) => {
+            this.dispatchViewManagerCommand('setLayerGroupEnabled', [group, enabled]);
+        };
         this.showsMyLocationButton = (show) => {
             this.dispatchViewManagerCommand('showsMyLocationButton', [show]);
         };
diff --git a/index.tsx b/index.tsx
@@ -148,6 +148,10 @@ export default class NaverMapView extends Component<NaverMapViewProps, {}> {
         this.dispatchViewManagerCommand('setLocationTrackingMode', [mode]);
     };
 
+    setLayerGroupEnabled = (group: LayerGroup, enabled: boolean) => {
+        this.dispatchViewManagerCommand('setLayerGroupEnabled', [group, enabled]);
+    };
+
     showsMyLocationButton = (show: boolean) => {
         this.dispatchViewManagerCommand('showsMyLocationButton', [show]);
     };
diff --git a/ios/reactNativeNMap/RNNaverMapViewManager.m b/ios/reactNativeNMap/RNNaverMapViewManager.m
@@ -172,6 +172,33 @@ -(UIView *)view
   }];
 }
 
+RCT_EXPORT_METHOD(setLayerGroupEnabled:(nonnull NSNumber *)reactTag
+                  withGroup: (NSString *) group
+                  withEnabled: (BOOL) enabled
+                  )
+{
+  [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+    id view = viewRegistry[reactTag];
+    if (![view isKindOfClass:[RNNaverMapView class]]) {
+      RCTLogError(@"Invalid view returned from registry, expecting NMFMapView, got: %@", view);
+    } else {
+      if ([group isEqualToString:@"building"]) {
+        [((RNNaverMapView *)view).mapView setLayerGroup:NMF_LAYER_GROUP_BUILDING isEnabled:enabled];
+      } else if ([group isEqualToString:@"ctt"]) {
+        [((RNNaverMapView *)view).mapView setLayerGroup:NMF_LAYER_GROUP_TRAFFIC isEnabled:enabled];
+      } else if ([group isEqualToString:@"transit"]) {
+        [((RNNaverMapView *)view).mapView setLayerGroup:NMF_LAYER_GROUP_TRANSIT isEnabled:enabled];
+      } else if ([group isEqualToString:@"bike"]) {
+        [((RNNaverMapView *)view).mapView setLayerGroup:NMF_LAYER_GROUP_BICYCLE isEnabled:enabled];
+      } else if ([group isEqualToString:@"mountain"]) {
+        [((RNNaverMapView *)view).mapView setLayerGroup:NMF_LAYER_GROUP_MOUNTAIN isEnabled:enabled];
+      } else if ([group isEqualToString:@"landparcel"]) {
+        [((RNNaverMapView *)view).mapView setLayerGroup:NMF_LAYER_GROUP_CADASTRAL isEnabled:enabled];
+      }
+    }
+  }];
+}
+
 RCT_EXPORT_METHOD(animateToCoordinate:(nonnull NSNumber *)reactTag
                   withCoord: (NMGLatLng *) coord
                   )
