添加多边形绘制接口

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

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

android/src/main/java/cn/qiuxiang/react/amap3d/AMapPolygon.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.Polygon
+import com.amap.api.maps.model.PolygonOptions
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.views.view.ReactViewGroup
+
+class AMapPolygon(context: ThemedReactContext) : ReactViewGroup(context) {
+    var polygon: Polygon? = null
+        private set
+
+    var strokeWidth: Float = 1f
+        set(value) {
+            field = value
+            polygon?.strokeWidth = value
+        }
+
+    var strokeColor: Int = Color.BLACK
+        set(value) {
+            field = value
+            polygon?.strokeColor = value
+        }
+
+    var fillColor: Int = Color.BLACK
+        set(value) {
+            field = value
+            polygon?.fillColor = value
+        }
+
+    var zIndex: Float = 0f
+        set(value) {
+            field = value
+            polygon?.zIndex = value
+        }
+
+    private var coordinates: ArrayList<LatLng> = ArrayList()
+
+    fun setCoordinates(coordinates: ReadableArray) {
+        this.coordinates = ArrayList((0..coordinates.size() - 1)
+                .map { coordinates.getMap(it) }
+                .map { LatLng(it.getDouble("latitude"), it.getDouble("longitude")) })
+
+        polygon?.points = this.coordinates
+    }
+
+    fun addToMap(map: AMap) {
+        polygon = map.addPolygon(PolygonOptions()
+                .addAll(coordinates)
+                .strokeColor(strokeColor)
+                .strokeWidth(strokeWidth)
+                .fillColor(fillColor)
+                .zIndex(zIndex))
+    }
+}

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

+package cn.qiuxiang.react.amap3d
+
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactProp
+
+@Suppress("unused")
+internal class AMapPolygonManager : ViewGroupManager<AMapPolygon>() {
+    override fun getName(): String {
+        return "AMapPolygon"
+    }
+
+    override fun createViewInstance(reactContext: ThemedReactContext): AMapPolygon {
+        return AMapPolygon(reactContext)
+    }
+
+    @ReactProp(name = "coordinates")
+    fun setCoordinate(polygon: AMapPolygon, coordinates: ReadableArray) {
+        polygon.setCoordinates(coordinates)
+    }
+
+    @ReactProp(name = "fillColor", customType = "Color")
+    fun setFillColor(polygon: AMapPolygon, fillColor: Int) {
+        polygon.fillColor = fillColor
+    }
+
+    @ReactProp(name = "strokeColor", customType = "Color")
+    fun setStrokeColor(polygon: AMapPolygon, strokeColor: Int) {
+        polygon.strokeColor = strokeColor
+    }
+
+    @ReactProp(name = "strokeWidth")
+    fun setStrokeWidth(polygon: AMapPolygon, strokeWidth: Float) {
+        polygon.strokeWidth = strokeWidth
+    }
+
+    @ReactProp(name = "zIndex")
+    fun setZIndex_(polygon: AMapPolygon, zIndex: Float) {
+        polygon.zIndex = zIndex
+    }
+}

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

@@ -15,6 +15,7 @@ class AMapView(context: ThemedReactContext) : MapView(context) {
     private val eventEmitter: RCTEventEmitter = context.getJSModule(RCTEventEmitter::class.java)
     private val markers = HashMap<String, AMapMarker>()
     private val polylines = HashMap<String, AMapPolyline>()
+    private val polygons = HashMap<String, AMapPolygon>()
 
     init {
         super.onCreate(null)
@@ -94,6 +95,11 @@ class AMapView(context: ThemedReactContext) : MapView(context) {
         polylines.put(polyline.polyline?.id!!, polyline)
     }
 
+    fun  addPolygon(polygon: AMapPolygon) {
+        polygon.addToMap(map)
+        polygons.put(polygon.polygon?.id!!, polygon)
+    }
+
     fun emit(id: Int?, name: String, data: WritableMap = Arguments.createMap()) {
         id?.let { eventEmitter.receiveEvent(it, name, data) }
     }
@@ -108,6 +114,10 @@ class AMapView(context: ThemedReactContext) : MapView(context) {
                 polylines.remove(child.polyline?.id)
                 child.polyline?.remove()
             }
+            is AMapPolygon -> {
+                polygons.remove(child.polygon?.id)
+                child.polygon?.remove()
+            }
         }
     }
 }

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

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

components/MapView.js

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

components/Polygon.js

+import React, {PropTypes, Component} from 'react'
+import {requireNativeComponent, View, PixelRatio} from 'react-native'
+import {CoordinatePropType} from './PropTypes'
+
+class Polygon extends Component {
+  static propTypes = {
+    ...View.propTypes,
+
+    coordinates: PropTypes.arrayOf(CoordinatePropType).isRequired,
+    strokeWidth: PropTypes.number,
+    strokeColor: PropTypes.string,
+    fillColor: PropTypes.string,
+    zIndex: PropTypes.number,
+  }
+
+  render() {
+    const props = {
+      ...this.props,
+      strokeWidth: PixelRatio.getPixelSizeForLayoutSize(this.props.strokeWidth),
+    }
+    return <AMapPolygon {...props}/>
+  }
+}
+
+AMapPolygon = requireNativeComponent('AMapPolygon', Polygon)
+
+export default Polygon

example/src/app.js

@@ -7,6 +7,7 @@ import Controls from './controls'
 import Gestures from './gestures'
 import Marker from './marker'
 import Polyline from './polyline'
+import Polygon from './polygon'
 
 export default StackNavigator({
   Examples: {screen: Examples},
@@ -17,6 +18,7 @@ export default StackNavigator({
   Gestures: {screen: Gestures},
   Marker: {screen: Marker},
   Polyline: {screen: Polyline},
+  Polygon: {screen: Polygon},
 }, {
   navigationOptions: {
     headerTintColor: '#212121',

example/src/examples.js

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

example/src/polygon.js

+import React, {Component} from 'react'
+import {StyleSheet} from 'react-native'
+import {MapView, Polygon} from 'react-native-amap3d'
+
+export default class PolygonExample extends Component {
+  static navigationOptions = {
+    title: '绘制多边形',
+  }
+
+  render() {
+    return <MapView style={StyleSheet.absoluteFill}>
+      <Polygon
+        strokeWidth={5}
+        strokeColor='blue'
+        fillColor='red'
+        coordinates={[
+          {
+            latitude: 39.806901,
+            longitude: 116.397972,
+          },
+          {
+            latitude: 39.806901,
+            longitude: 116.297972,
+          },
+          {
+            latitude: 39.906901,
+            longitude: 116.397972,
+          },
+        ]}/>
+    </MapView>
+  }
+}