完善 android 动画移动接口

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

@@ -4,11 +4,13 @@ import android.view.View
 import com.amap.api.maps.AMap
 import com.amap.api.maps.CameraUpdateFactory
 import com.amap.api.maps.MapView
+import com.amap.api.maps.model.CameraPosition
 import com.amap.api.maps.model.LatLng
 import com.amap.api.maps.model.Marker
 import com.amap.api.maps.model.MyLocationStyle
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.bridge.WritableMap
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.events.RCTEventEmitter
@@ -139,17 +141,30 @@ class AMapView(context: ThemedReactContext) : MapView(context) {
         }
     }
 
-    fun animateToCoordinate(args: ReadableArray?) {
-        val coordinate = args?.getMap(0)!!
+    fun animateTo(args: ReadableArray?) {
+        val currentCameraPosition = map.cameraPosition
+        val target = args?.getMap(0)!!
         val duration = args.getInt(1)
-        val cameraUpdate = CameraUpdateFactory.newLatLng(LatLng(
-                coordinate.getDouble("latitude"), coordinate.getDouble("longitude")))
-        map.animateCamera(cameraUpdate, duration.toLong(), animateCallback)
-    }
 
-    fun animateToZoomLevel(args: ReadableArray?) {
-        val zoomLevel = args?.getDouble(0)!!
-        val duration = args.getInt(1)
-        map.animateCamera(CameraUpdateFactory.zoomTo(zoomLevel.toFloat()), duration.toLong(), animateCallback)
+        var coordinate = currentCameraPosition.target
+        var zoomLevel = currentCameraPosition.zoom
+        var tilt = currentCameraPosition.tilt
+
+        if (target.hasKey("coordinate")) {
+            val json = target.getMap("coordinate")
+            coordinate = LatLng(json.getDouble("latitude"), json.getDouble("longitude"))
+        }
+
+        if (target.hasKey("zoomLevel")) {
+            zoomLevel = target.getDouble("zoomLevel").toFloat()
+        }
+
+        if (target.hasKey("tilt")) {
+            tilt = target.getDouble("tilt").toFloat()
+        }
+
+        val cameraUpdate = CameraUpdateFactory.newCameraPosition(CameraPosition(
+                coordinate, zoomLevel, tilt, currentCameraPosition.bearing))
+        map.animateCamera(cameraUpdate, duration.toLong(), animateCallback)
     }
 }

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

@@ -15,6 +15,7 @@ internal class AMapViewManager : ViewGroupManager<AMapView>() {
     companion object {
         val ANIMATE_TO_COORDINATE = 1
         val ANIMATE_TO_ZOOM_LEVEL = 2
+        val ANIMATE_TO = 3
     }
 
     override fun getName(): String {
@@ -26,15 +27,12 @@ internal class AMapViewManager : ViewGroupManager<AMapView>() {
     }
 
     override fun getCommandsMap(): Map<String, Int> {
-        return mapOf(
-                "animateToCoordinate" to ANIMATE_TO_COORDINATE,
-                "animateToZoomLevel" to ANIMATE_TO_ZOOM_LEVEL)
+        return mapOf("animateTo" to ANIMATE_TO)
     }
 
     override fun receiveCommand(overlay: AMapView, commandId: Int, args: ReadableArray?) {
         when (commandId) {
-            ANIMATE_TO_COORDINATE -> overlay.animateToCoordinate(args)
-            ANIMATE_TO_ZOOM_LEVEL -> overlay.animateToZoomLevel(args)
+            ANIMATE_TO -> overlay.animateTo(args)
         }
     }
 

components/MapView.js

 import React, {PropTypes, Component} from 'react'
 import {
-  requireNativeComponent,
-  findNodeHandle,
   View,
   UIManager,
+  findNodeHandle,
+  requireNativeComponent,
 } from 'react-native'
 import {LatLng} from './PropTypes'
 import Marker from './Marker'
@@ -17,7 +17,7 @@ class MapView extends Component {
     ...View.propTypes,
 
     /**
-     * 设置地图类型
+     * 地图类型
      *
      * - standard: 标准地图
      * - satellite: 卫星地图
@@ -78,27 +78,27 @@ class MapView extends Component {
     showsTraffic: PropTypes.bool,
 
     /**
-     * 设置最大缩放级别
+     * 最大缩放级别
      */
     maxZoomLevel: PropTypes.number,
 
     /**
-     * 设置最小缩放级别
+     * 最小缩放级别
      */
     minZoomLevel: PropTypes.number,
 
     /**
-     * 设置当前缩放级别，取值范围 [3, 20]
+     * 当前缩放级别，取值范围 [3, 20]
      */
     zoomLevel: PropTypes.number,
 
     /**
-     * 设置中心坐标
+     * 中心坐标
      */
     coordinate: LatLng,
 
     /**
-     * 设置倾斜角度，取值范围 [0, 60]
+     * 倾斜角度，取值范围 [0, 60]
      */
     tilt: PropTypes.number,
 
@@ -148,12 +148,14 @@ class MapView extends Component {
     onAnimateCancel: React.PropTypes.func,
   }
 
-  animateToCoordinate(coordinate, duration = 1000) {
-    this._sendCommand('animateToCoordinate', [coordinate, duration])
-  }
-
-  animateToZoomLevel(zoomLevel, duration = 1000) {
-    this._sendCommand('animateToZoomLevel', [zoomLevel, duration])
+  /**
+   * 动画过渡到某个位置（坐标、缩放级别、倾斜度）
+   *
+   * @param {{zoomLevel: ?number, coordinate: ?LatLng, titl: ?number}} target
+   * @param duration
+   */
+  animateTo(target, duration = 1000) {
+    this._sendCommand('animateTo', [target, duration])
   }
 
   _sendCommand(command, params = null) {

example/android/gradle.properties

-# Project-wide Gradle settings.
-
-# IDE (e.g. Android Studio) users:
-# Gradle settings configured through the IDE *will override*
-# any settings specified in this file.
-
+## Project-wide Gradle settings.
+#
 # For more details on how to configure your build environment visit
 # http://www.gradle.org/docs/current/userguide/build_environment.html
-
+#
 # Specifies the JVM arguments used for the daemon process.
 # The setting is particularly useful for tweaking memory settings.
-# Default value: -Xmx10248m -XX:MaxPermSize=256m
+# Default value: -Xmx1024m -XX:MaxPermSize=256m
 # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
-
+#
 # When configured, Gradle will run in incubating parallel mode.
 # This option should only be used with decoupled projects. More details, visit
 # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
 # org.gradle.parallel=true
-
+#Wed Jun 28 18:08:07 CST 2017
+systemProp.http.proxyHost=127.0.0.1
+systemProp.http.proxyPort=8123
 android.useDeprecatedNdk=true

example/package.json

@@ -4,6 +4,7 @@
     "init": "rm -r node_modules/react-native-amap3d; mkdir node_modules/react-native-amap3d; cp -r ../components node_modules/react-native-amap3d; cp -r ../package.json node_modules/react-native-amap3d",
     "start": "node node_modules/react-native/local-cli/cli.js start",
     "android": "node node_modules/react-native/local-cli/cli.js run-android",
+    "android-log": "node node_modules/react-native/local-cli/cli.js log-android",
     "ios": "node node_modules/react-native/local-cli/cli.js run-ios"
   },
   "dependencies": {

example/src/app.js

@@ -4,6 +4,7 @@ import Examples from './examples'
 import MapTypes from './examples/map-types'
 import Layers from './examples/layers'
 import Indoor from './examples/indoor'
+import Animated from './examples/animated'
 import Controls from './examples/controls'
 import Gestures from './examples/gestures'
 import Marker from './examples/marker'
@@ -16,6 +17,7 @@ export default StackNavigator({
   MapTypes: {screen: MapTypes},
   Layers: {screen: Layers},
   Indoor: {screen: Indoor},
+  Animated: {screen: Animated},
   Controls: {screen: Controls},
   Gestures: {screen: Gestures},
   Marker: {screen: Marker},

example/src/examples.js

@@ -41,6 +41,8 @@ export default class Examples extends Component {
         {this._renderItem('地图控件', 'Controls')}
         <View style={styles.separator}/>
         {this._renderItem('手势交互', 'Gestures')}
+        <View style={styles.separator}/>
+        {this._renderItem('动画移动', 'Animated')}
       </View>
       <View style={styles.group}>
         {this._renderItem('添加标记', 'Marker')}

example/src/examples/animated.js

+import React, {Component} from 'react'
+import {
+  StyleSheet,
+  View,
+  Text,
+  TouchableOpacity,
+  Dimensions,
+} from 'react-native'
+import MapView from 'react-native-amap3d'
+
+export default class AnimatedExample extends Component {
+  static navigationOptions = {
+    title: '动画移动',
+  }
+
+  _animatedToZGC() {
+    this.mapView.animateTo({
+      tilt: 45,
+      zoomLevel: 18,
+      coordinate: {
+        latitude: 39.97837,
+        longitude: 116.31363,
+      }
+    })
+  }
+
+  _animatedToTAM() {
+    this.mapView.animateTo({
+      tilt: 0,
+      zoomLevel: 16,
+      coordinate: {
+        latitude: 39.90864,
+        longitude: 116.39745,
+      }
+    })
+  }
+
+  render() {
+    return <View style={styles.body}>
+      <MapView ref={ref => this.mapView = ref} style={styles.body}/>
+      <View style={styles.buttons}>
+        <View style={styles.button}>
+          <TouchableOpacity  onPress={() => this._animatedToZGC()}>
+            <Text style={styles.text}>中关村</Text>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.button}>
+          <TouchableOpacity onPress={() => this._animatedToTAM()}>
+            <Text style={styles.text}>天安门</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  }
+}
+
+const styles = StyleSheet.create({
+  body: {
+    flex: 1,
+  },
+  buttons: {
+    width: Dimensions.get('window').width,
+    position: 'absolute',
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  button: {
+    padding: 10,
+    paddingLeft: 20,
+    paddingRight: 20,
+    margin: 10,
+    borderRadius: 50,
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+  },
+  text: {
+    fontSize: 16,
+  },
+})

example/src/examples/controls.js

 import React, {Component} from 'react'
-import {StyleSheet, View, Text, Switch, Platform} from 'react-native'
+import {StyleSheet, View, Text, Switch} from 'react-native'
 import MapView from 'react-native-amap3d'
 import styles from '../styles'