实现圆形绘制接口

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

@@ -22,6 +22,7 @@ class AMap3DPackage : ReactPackage {
                 AMapOverlayManager(),
                 AMapInfoWindowManager(),
                 AMapPolylineManager(),
-                AMapPolygonManager())
+                AMapPolygonManager(),
+                AMapCircleManager())
     }
 }

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

+package cn.qiuxiang.react.amap3d
+
+import android.graphics.Color
+import com.amap.api.maps.AMap
+import com.amap.api.maps.model.LatLng
+import com.amap.api.maps.model.Circle
+import com.amap.api.maps.model.CircleOptions
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.views.view.ReactViewGroup
+
+class AMapCircle(context: ThemedReactContext) : ReactViewGroup(context) {
+    var circle: Circle? = null
+        private set
+
+    var center: LatLng? = null
+        set(value) {
+            field = value
+            circle?.center = value
+        }
+
+    var radius: Double = 0.0
+        set(value) {
+            field = value
+            circle?.radius = value
+        }
+
+    var strokeWidth: Float = 1f
+        set(value) {
+            field = value
+            circle?.strokeWidth = value
+        }
+
+    var strokeColor: Int = Color.BLACK
+        set(value) {
+            field = value
+            circle?.strokeColor = value
+        }
+
+    var fillColor: Int = Color.BLACK
+        set(value) {
+            field = value
+            circle?.fillColor = value
+        }
+
+    var zIndex: Float = 0f
+        set(value) {
+            field = value
+            circle?.zIndex = value
+        }
+
+    fun addToMap(map: AMap) {
+        circle = map.addCircle(CircleOptions()
+                .center(center)
+                .radius(radius)
+                .strokeColor(strokeColor)
+                .strokeWidth(strokeWidth)
+                .fillColor(fillColor)
+                .zIndex(zIndex))
+    }
+}

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

+package cn.qiuxiang.react.amap3d
+
+import com.amap.api.maps.model.LatLng
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactProp
+
+@Suppress("unused")
+internal class AMapCircleManager : ViewGroupManager<AMapCircle>() {
+    override fun getName(): String {
+        return "AMapCircle"
+    }
+
+    override fun createViewInstance(reactContext: ThemedReactContext): AMapCircle {
+        return AMapCircle(reactContext)
+    }
+
+    @ReactProp(name = "center")
+    fun setCoordinate(circle: AMapCircle, coordinate: ReadableMap) {
+        circle.center = LatLng(
+                coordinate.getDouble("latitude"),
+                coordinate.getDouble("longitude"))
+    }
+
+    @ReactProp(name = "radius")
+    fun setRadius(circle: AMapCircle, radius: Double) {
+        circle.radius = radius
+    }
+
+    @ReactProp(name = "fillColor", customType = "Color")
+    fun setFillColor(circle: AMapCircle, fillColor: Int) {
+        circle.fillColor = fillColor
+    }
+
+    @ReactProp(name = "strokeColor", customType = "Color")
+    fun setStrokeColor(circle: AMapCircle, strokeColor: Int) {
+        circle.strokeColor = strokeColor
+    }
+
+    @ReactProp(name = "strokeWidth")
+    fun setStrokeWidth(circle: AMapCircle, strokeWidth: Float) {
+        circle.strokeWidth = strokeWidth
+    }
+
+    @ReactProp(name = "zIndex")
+    fun setZIndex_(circle: AMapCircle, zIndex: Float) {
+        circle.zIndex = zIndex
+    }
+}

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

@@ -7,6 +7,7 @@ import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.annotations.ReactProp
 
+@Suppress("unused")
 internal class AMapMarkerManager : ViewGroupManager<AMapMarker>() {
     override fun getName(): String {
         return "AMapMarker"

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

@@ -18,6 +18,7 @@ class AMapView(context: ThemedReactContext) : MapView(context) {
     private val markers = HashMap<String, AMapMarker>()
     private val polylines = HashMap<String, AMapPolyline>()
     private val polygons = HashMap<String, AMapPolygon>()
+    private val circles = HashMap<String, AMapCircle>()
 
     init {
         super.onCreate(null)
@@ -102,6 +103,11 @@ class AMapView(context: ThemedReactContext) : MapView(context) {
         polygons.put(polygon.polygon?.id!!, polygon)
     }
 
+    fun addCircle(circle: AMapCircle) {
+        circle.addToMap(map)
+        circles.put(circle.circle?.id!!, circle)
+    }
+
     fun emit(id: Int?, name: String, data: WritableMap = Arguments.createMap()) {
         id?.let { eventEmitter.receiveEvent(it, name, data) }
     }
@@ -120,6 +126,10 @@ class AMapView(context: ThemedReactContext) : MapView(context) {
                 polygons.remove(child.polygon?.id)
                 child.polygon?.remove()
             }
+            is AMapCircle -> {
+                polygons.remove(child.circle?.id)
+                child.circle?.remove()
+            }
         }
     }
 

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

@@ -44,6 +44,7 @@ internal class AMapViewManager : ViewGroupManager<AMapView>() {
             is AMapMarker -> mapView.addMarker(child)
             is AMapPolyline -> mapView.addPolyline(child)
             is AMapPolygon -> mapView.addPolygon(child)
+            is AMapCircle -> mapView.addCircle(child)
         }
     }
 

components/MapView.js

@@ -10,6 +10,7 @@ import InfoWindow from './InfoWindow'
 import Overlay from './Overlay'
 import Polyline from './Polyline'
 import Polygon from './Polygon'
+import Circle from './Circle'
 
 const CoordinatePropType = PropTypes.shape({
   latitude: PropTypes.number.isRequired,
@@ -182,9 +183,10 @@ class MapView extends Component {
   static InfoWindow = InfoWindow
   static Polyline = Polyline
   static Polygon = Polygon
+  static Circle = Circle
 }
 
 AMapView = requireNativeComponent('AMapView', MapView)
 
 export default MapView
-export {MapView, Marker, InfoWindow, Overlay, Polyline, Polygon}
+export {MapView, Marker, InfoWindow, Overlay, Polyline, Polygon, Circle}

example/src/app.js

@@ -8,6 +8,7 @@ import Gestures from './examples/gestures'
 import Marker from './examples/marker'
 import Polyline from './examples/polyline'
 import Polygon from './examples/polygon'
+import Circle from './examples/circle'
 
 export default StackNavigator({
   Examples: {screen: Examples},
@@ -19,6 +20,7 @@ export default StackNavigator({
   Marker: {screen: Marker},
   Polyline: {screen: Polyline},
   Polygon: {screen: Polygon},
+  Circle: {screen: Circle},
 }, {
   navigationOptions: {
     headerTintColor: '#212121',

example/src/examples.js

@@ -48,6 +48,8 @@ export default class Examples extends Component {
         {this._renderItem('绘制折线', 'Polyline')}
         <View style={styles.separator}/>
         {this._renderItem('绘制多边形', 'Polygon')}
+        <View style={styles.separator}/>
+        {this._renderItem('绘制圆形', 'Circle')}
       </View>
     </ScrollView>
   }

example/src/examples/circle.js

+import React, {Component} from 'react'
+import {StyleSheet} from 'react-native'
+import {MapView, Circle} from 'react-native-amap3d'
+
+export default class CircleExample extends Component {
+  static navigationOptions = {
+    title: '绘制圆形',
+  }
+
+  render() {
+    return <MapView style={StyleSheet.absoluteFill}>
+      <Circle
+        strokeWidth={5}
+        strokeColor='blue'
+        fillColor='red'
+        radius={10000}
+        center={{
+          latitude: 39.906901,
+          longitude: 116.397972,
+        }}/>
+    </MapView>
+  }
+}

example/src/examples/map-types.js

@@ -9,6 +9,7 @@ export default class MapTypes extends Component {
     return {
       title: '地图模式',
       headerRight: <Picker
+        mode='dropdown'
         style={{width: 100}}
         selectedValue={state.params.mapType}
         onValueChange={mapType => setParams({mapType})}>