Add MapView#locationStyle

#151

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

@@ -16,11 +16,10 @@ import com.facebook.react.uimanager.events.RCTEventEmitter
 class AMapView(context: Context) : TextureMapView(context) {
     private val eventEmitter: RCTEventEmitter = (context as ThemedReactContext).getJSModule(RCTEventEmitter::class.java)
     private val markers = HashMap<String, AMapMarker>()
-    private val polylines = HashMap<String, AMapPolyline>()
-    private var locationType = MyLocationStyle.LOCATION_TYPE_FOLLOW_NO_CENTER
+    private val lines = HashMap<String, AMapPolyline>()
     private val locationStyle by lazy {
         val locationStyle = MyLocationStyle()
-        locationStyle.myLocationType(locationType)
+        locationStyle.myLocationType(MyLocationStyle.LOCATION_TYPE_LOCATION_ROTATE_NO_CENTER)
         locationStyle
     }
 
@@ -94,7 +93,7 @@ class AMapView(context: Context) : TextureMapView(context) {
         }
 
         map.setOnPolylineClickListener { polyline ->
-            emit(polylines[polyline.id]?.id, "onPress")
+            emit(lines[polyline.id]?.id, "onPress")
         }
 
         map.setOnMultiPointClickListener { item ->
@@ -137,7 +136,7 @@ class AMapView(context: Context) : TextureMapView(context) {
                 markers.put(child.marker?.id!!, child)
             }
             if (child is AMapPolyline) {
-                polylines.put(child.polyline?.id!!, child)
+                lines.put(child.polyline?.id!!, child)
             }
         }
     }
@@ -149,7 +148,7 @@ class AMapView(context: Context) : TextureMapView(context) {
                 markers.remove(child.marker?.id)
             }
             if (child is AMapPolyline) {
-                polylines.remove(child.polyline?.id)
+                lines.remove(child.polyline?.id)
             }
         }
     }
@@ -205,13 +204,12 @@ class AMapView(context: Context) : TextureMapView(context) {
     }
 
     fun setLocationEnabled(enabled: Boolean) {
-        map.myLocationStyle = locationStyle
         map.isMyLocationEnabled = enabled
+        map.myLocationStyle = locationStyle
     }
 
     fun setLocationInterval(interval: Long) {
         locationStyle.interval(interval)
-        map.myLocationStyle = locationStyle
     }
 
     private fun latLngBoundsFromReadableMap(region: ReadableMap): LatLngBounds {
@@ -224,4 +222,24 @@ class AMapView(context: Context) : TextureMapView(context) {
                 LatLng(latitude + latitudeDelta / 2, longitude + longitudeDelta / 2)
         )
     }
+
+    fun setLocationStyle(style: ReadableMap) {
+        if (style.hasKey("fillColor")) {
+            locationStyle.radiusFillColor(style.getInt("fillColor"))
+        }
+
+        if (style.hasKey("stockColor")) {
+            locationStyle.strokeColor(style.getInt("stockColor"))
+        }
+
+        if (style.hasKey("stockWidth")) {
+            locationStyle.strokeWidth(style.getDouble("stockWidth").toFloat())
+        }
+
+        if (style.hasKey("image")) {
+            val drawable = context.resources.getIdentifier(
+                style.getString("image"), "drawable", context.packageName)
+            locationStyle.myLocationIcon(BitmapDescriptorFactory.fromResource(drawable))
+        }
+    }
 }

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

@@ -189,4 +189,9 @@ internal class AMapViewManager : ViewGroupManager<AMapView>() {
     fun setLocationInterval(view: AMapView, interval: Int) {
         view.setLocationInterval(interval.toLong())
     }
+
+    @ReactProp(name = "locationStyle")
+    fun setLocationStyle(view: AMapView, style: ReadableMap) {
+        view.setLocationStyle(style)
+    }
 }

src/maps/MapView.js

 // @flow
 import React from 'react'
 import PropTypes from 'prop-types'
-import { requireNativeComponent, ViewPropTypes } from 'react-native'
+import { processColor, requireNativeComponent, ViewPropTypes } from 'react-native'
 import { LatLng, Region } from '../PropTypes'
 import Component from '../Component'
 
@@ -12,6 +12,13 @@ export type MapStatus = {
   rotation?: number,
 }
 
+export const LocationStyle = PropTypes.shape({
+  image: PropTypes.string,
+  fillColor: PropTypes.string,
+  strokeColor: PropTypes.string,
+  strokeWidth: PropTypes.number,
+})
+
 export default class MapView extends Component<any> {
   static propTypes = {
     ...ViewPropTypes,
@@ -27,6 +34,11 @@ export default class MapView extends Component<any> {
      */
     mapType: PropTypes.oneOf(['standard', 'satellite', 'navigation', 'night', 'bus']),
 
+    /**
+     * 设置定位图标的样式
+     */
+    locationStyle: LocationStyle,
+
     /**
      * 是否启用定位
      */
@@ -240,7 +252,16 @@ export default class MapView extends Component<any> {
   }
 
   render() {
-    return <AMapView {...this.props} />
+    const props = { ...this.props }
+    if (props.locationStyle) {
+      if (props.locationStyle.strokeColor) {
+        props.locationStyle.strokeColor = processColor(props.locationStyle.strokeColor)
+      }
+      if (props.locationStyle.fillColor) {
+        props.locationStyle.fillColor = processColor(props.locationStyle.fillColor)
+      }
+    }
+    return <AMapView {...props} />
   }
 }
 

src/maps/Marker.js

@@ -21,12 +21,12 @@ export default class Marker extends Component<any> {
     coordinate: LatLng.isRequired,
 
     /**
-     * 标题
+     * 标题，作为默认的选中弹出显示
      */
     title: PropTypes.string,
 
     /**
-     * 描述
+     * 描述，显示在标题下方
      */
     description: PropTypes.string,
 
@@ -54,12 +54,12 @@ export default class Marker extends Component<any> {
     }),
 
     /**
-     * 自定义图标，慎用，目前存在一些已知的 bug
+     * 自定义图标
      */
     icon: PropTypes.func,
 
     /**
-     * 自定义图片
+     * 自定义图片，对应原生图片名称
      */
     image: PropTypes.string,