实现 android onStatusChange 事件接口

ref #8

android/src/main/java/cn/qiuxiang/react/amap3d/AMapView.kt

@@ -80,6 +80,16 @@ class AMapView(context: Context) : MapView(context) {
             }
         })
 
+        map.setOnCameraChangeListener(object: AMap.OnCameraChangeListener {
+            override fun onCameraChangeFinish(position: CameraPosition?) {
+                emitCameraChangeEvent("onCameraChangeFinish", position)
+            }
+
+            override fun onCameraChange(position: CameraPosition?) {
+                emitCameraChangeEvent("onCameraChange", position)
+            }
+        })
+
         map.setOnInfoWindowClickListener { marker ->
             emit(markers[marker.id]?.id, "onInfoWindowClick")
         }
@@ -97,6 +107,18 @@ class AMapView(context: Context) : MapView(context) {
         map.isMyLocationEnabled = false
     }
 
+    fun emitCameraChangeEvent(event: String, position: CameraPosition?) {
+        position?.let {
+            val data = Arguments.createMap()
+            data.putDouble("zoom", it.zoom.toDouble())
+            data.putDouble("tilt", it.tilt.toDouble())
+            data.putDouble("rotation", it.bearing.toDouble())
+            data.putDouble("latitude", it.target.latitude)
+            data.putDouble("longitude", it.target.longitude)
+            emit(id, event, data)
+        }
+    }
+
     fun addMarker(marker: AMapMarker) {
         marker.addToMap(map)
         markers.put(marker.marker?.id!!, marker)

android/src/main/java/cn/qiuxiang/react/amap3d/AMapViewManager.kt

@@ -55,6 +55,8 @@ internal class AMapViewManager : ViewGroupManager<AMapView>() {
                 "onMapLongClick" to mapOf("registrationName" to "onLongPress"),
                 "onAnimateCancel" to mapOf("registrationName" to "onAnimateCancel"),
                 "onAnimateFinish" to mapOf("registrationName" to "onAnimateFinish"),
+                "onCameraChange" to mapOf("registrationName" to "onStatusChange"),
+                "onCameraChangeFinish" to mapOf("registrationName" to "onStatusChangeComplete"),
                 "onLocationChange" to mapOf("registrationName" to "onLocation"))
     }
 

components/MapView.js

@@ -105,12 +105,7 @@ class MapView extends Component {
     limitRegion: Region,
 
     /**
-     * 旋转角度，取值范围 [0, 360]
-     */
-    rotation: PropTypes.number,
-
-    /**
-     * 倾斜角度，取值范围 [0, 60]
+     * 设置倾斜角度，取值范围 [0, 60]
      */
     tilt: PropTypes.number,
 
@@ -158,12 +153,22 @@ class MapView extends Component {
      * 动画取消事件
      */
     onAnimateCancel: React.PropTypes.func,
+
+    /**
+     * 地图状态变化事件
+     */
+    onStatusChange: React.PropTypes.func,
+
+    /**
+     * 地图状态变化完成事件
+     */
+    onStatusChangeComplete: React.PropTypes.func,
   }
 
   /**
    * 动画过渡到某个位置（坐标、缩放级别、倾斜度）
    *
-   * @param {{zoomLevel: ?number, coordinate: ?LatLng, titl: ?number, rotation: ?number}} target
+   * @param {{zoomLevel: ?number, coordinate: ?LatLng, titl: ?number}} target
    * @param duration
    */
   animateTo(target, duration = 1000) {
@@ -180,7 +185,7 @@ class MapView extends Component {
         )
         break;
       case 'ios':
-        NativeModules.AMapViewManager[command](findNodeHandle(this), ...params)
+        NativeModules.AMapViewManager[command](findNodeHandle(this), params)
         break;
     }
   }

example/src/examples/events.js

@@ -2,7 +2,7 @@ import React, {Component} from 'react'
 import {
   View,
   Text,
-  ScrollView,
+  FlatList,
   StyleSheet,
 } from 'react-native'
 import MapView from 'react-native-amap3d'
@@ -20,7 +20,7 @@ export default class Events extends Component {
     this.setState({
       logs: [
         {
-          key: Math.random(),
+          key: Date.now(),
           time: new Date().toLocaleString(),
           event: event,
           data: JSON.stringify(data, null, 2),
@@ -30,21 +30,26 @@ export default class Events extends Component {
     })
   }
 
+  _logPressEvent = ({nativeEvent}) => this._log('onPress', nativeEvent)
+  _logLongPressEvent = ({nativeEvent}) => this._log('onLongPress', nativeEvent)
+  _logLocationEvent = ({nativeEvent}) => this._log('onLocation', nativeEvent)
+  _logStatusChangeEvent = ({nativeEvent}) => this._log('onStatusChange', nativeEvent)
+  _logStatusChangeCompleteEvent = ({nativeEvent}) => this._log('onStatusChangeComplete', nativeEvent)
+
+  _renderItem = ({item}) =>
+    <Text style={styles.logText}>{item.time} {item.event}: {item.data}</Text>
+
   render() {
     return <View style={styles.body}>
       <MapView
         locationEnabled
-        onPress={({nativeEvent}) => this._log('onPress', nativeEvent)}
-        onLongPress={({nativeEvent}) => this._log('onLongPress', nativeEvent)}
-        onLocation={({nativeEvent}) => this._log('onLocation', nativeEvent)}
+        onPress={this._logPressEvent}
+        onLongPress={this._logLongPressEvent}
+        onLocation={this._logLocationEvent}
+        onStatusChange={this._logStatusChangeEvent}
+        onStatusChangeComplete={this._logStatusChangeCompleteEvent}
         style={styles.body}/>
-      <ScrollView contentContainerStyle={styles.log}>
-        {this.state.logs.map(item =>
-          <Text key={item.key} style={styles.logText}>
-            {item.time} {item.event}: {item.data}
-          </Text>
-        )}
-      </ScrollView>
+      <FlatList style={styles.logs} data={this.state.logs} renderItem={this._renderItem}/>
     </View>
   }
 }
@@ -52,12 +57,15 @@ export default class Events extends Component {
 const styles = StyleSheet.create({
   body: {
     flex: 1,
-    backgroundColor: '#fff',
   },
-  log: {
-    padding: 10,
+  logs: {
+    elevation: 8,
+    backgroundColor: '#fff',
   },
   logText: {
-    marginBottom: 5,
+    paddingLeft: 15,
+    paddingRight: 15,
+    paddingTop: 10,
+    paddingBottom: 10,
   },
 })