实现 Android 海量点图层接口

相关：#51

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

@@ -24,6 +24,7 @@ class AMap3DPackage : ReactPackage {
                 AMapPolygonManager(),
                 AMapCircleManager(),
                 AMapHeatMapManager(),
+                AMapMultiPointManager(),
                 AMapDriveManager(),
                 AMapWalkManager(),
                 AMapRideManager()

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

+package cn.qiuxiang.react.amap3d.maps
+
+import android.content.Context
+import com.amap.api.maps.AMap
+import com.amap.api.maps.model.*
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.views.view.ReactViewGroup
+
+class AMapMultiPoint(context: Context) : ReactViewGroup(context), AMapOverlay {
+    private var overlay: MultiPointOverlay? = null
+    private var items: ArrayList<MultiPointItem> = ArrayList()
+    private var icon: BitmapDescriptor? = null
+
+    fun setPoints(points: ReadableArray) {
+        items = ArrayList((0 until points.size())
+                .map {
+                    val data = points.getMap(it)
+                    val item = MultiPointItem(LatLng(
+                            data.getDouble("latitude"),
+                            data.getDouble("longitude")))
+                    if (data.hasKey("title")) {
+                        item.title = data.getString("title")
+                    }
+                    if (data.hasKey("subtitle")) {
+                        item.snippet = data.getString("subtitle")
+                    }
+                    item.customerId = id.toString() + "_" + it
+                    item
+                })
+        overlay?.setItems(items)
+    }
+
+    override fun add(map: AMap) {
+        overlay = map.addMultiPointOverlay(MultiPointOverlayOptions().icon(icon))
+        overlay?.setItems(items)
+        overlay?.setEnable(true)
+    }
+
+    override fun remove() {
+        overlay?.destroy()
+    }
+
+    fun setImage(image: String) {
+        val drawable = context.resources.getIdentifier(image, "drawable", context.packageName)
+        icon = BitmapDescriptorFactory.fromResource(drawable)
+    }
+}
\ No newline at end of file

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

+package cn.qiuxiang.react.amap3d.maps
+
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.common.MapBuilder
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.annotations.ReactProp
+
+internal class AMapMultiPointManager : SimpleViewManager<AMapMultiPoint>() {
+    override fun getName(): String {
+        return "AMapMultiPoint"
+    }
+
+    override fun createViewInstance(reactContext: ThemedReactContext): AMapMultiPoint {
+        return AMapMultiPoint(reactContext)
+    }
+
+    override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any>? {
+        return MapBuilder.of(
+                "onItemPress", MapBuilder.of("registrationName", "onItemPress")
+        )
+    }
+
+    @ReactProp(name = "points")
+    fun setPoints(multiPoint: AMapMultiPoint, points: ReadableArray) {
+        multiPoint.setPoints(points)
+    }
+
+    @ReactProp(name = "image")
+    fun setImage(multiPoint: AMapMultiPoint, image: String) {
+        multiPoint.setImage(image);
+    }
+}
\ No newline at end of file

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

@@ -94,6 +94,14 @@ class AMapView(context: Context) : TextureMapView(context) {
             emit(polylines[polyline.id]?.id, "onPress")
         }
 
+        map.setOnMultiPointClickListener { item ->
+            val slice = item.customerId.split("_")
+            val data = Arguments.createMap()
+            data.putInt("index", slice[1].toInt())
+            emit(slice[0].toInt(), "onItemPress", data)
+            false
+        }
+
         map.setInfoWindowAdapter(AMapInfoWindowAdapter(context, markers))
     }
 

components/maps/MultiPoint.js

+import React, {PropTypes, PureComponent} from 'react'
+import {requireNativeComponent, resolveAssetSource, ViewPropTypes} from 'react-native'
+
+export default class MultiPoint extends PureComponent {
+  static propTypes = {
+    ...ViewPropTypes,
+
+    /**
+     * 节点
+     */
+    points: PropTypes.arrayOf(
+      PropTypes.shape({
+        latitude: PropTypes.number.isRequired,
+        longitude: PropTypes.number.isRequired,
+        title: PropTypes.string,
+        subtitle: PropTypes.string,
+      })
+    ).isRequired,
+
+    /**
+     * 图标
+     */
+    image: PropTypes.string,
+
+    /**
+     * 点击事件
+     */
+    onItemPress: React.PropTypes.func,
+  }
+
+  _onItemPress = event => {
+    if (this.props.onItemPress) {
+      this.props.onItemPress(this.props.points[event.nativeEvent.index])
+    }
+  }
+
+  render() {
+    return <AMapMultiPoint {...this.props} onItemPress={this._onItemPress}/>
+  }
+}
+
+const AMapMultiPoint = requireNativeComponent('AMapMultiPoint', MultiPoint)

example/package.json

@@ -9,8 +9,8 @@
   "dependencies": {
     "react": "16.0.0-alpha.12",
     "react-native": "0.47.1",
-    "react-native-amap3d": "^0.3.1",
-    "react-navigation": "^1.0.0-beta.11"
+    "react-native-amap3d": "^0.3.3",
+    "react-navigation": "^1.0.0-beta.12"
   },
   "devDependencies": {
     "babel-preset-react-native": "2.1.0"

example/src/app.js

@@ -14,6 +14,7 @@ import Circle from './examples/circle'
 import Events from './examples/events'
 import Navigation from './examples/navigation'
 import HeatMap from './examples/heat-map'
+import MultiPoint from './examples/multi-point'
 
 export default StackNavigator({
   Examples: {screen: Examples},
@@ -30,6 +31,7 @@ export default StackNavigator({
   Events: {screen: Events},
   Navigation: {screen: Navigation},
   HeatMap: {screen: HeatMap},
+  MultiPoint: {screen: MultiPoint},
 }, {
   navigationOptions: {
     headerTintColor: '#212121',

example/src/examples.js

@@ -56,6 +56,8 @@ export default class Examples extends Component {
         {this._renderItem('绘制圆形', 'Circle')}
         <View style={styles.separator}/>
         {this._renderItem('热力图', 'HeatMap')}
+        <View style={styles.separator}/>
+        {this._renderItem('海量点', 'MultiPoint')}
       </View>
       <View style={styles.group}>
         {this._renderItem('导航', 'Navigation')}

example/src/examples/multi-point.js

+import React, {Component} from 'react'
+import {StyleSheet, Alert} from 'react-native'
+import {MapView, MultiPoint, Marker} from 'react-native-amap3d'
+
+export default class MultiPointExample extends Component {
+  static navigationOptions = {
+    title: '海量点',
+  }
+
+  _points = Array(1000).fill(0).map(i => ({
+    latitude: 39.5 + Math.random(),
+    longitude: 116 + Math.random(),
+  }))
+
+  _onItemPress = point => Alert.alert(this._points.indexOf(point).toString())
+
+  render() {
+    return <MapView zoomLevel={12} style={StyleSheet.absoluteFill}>
+      <MultiPoint
+        image={'icon'}
+        points={this._points}
+        onItemPress={this._onItemPress}
+      />
+    </MapView>
+  }
+}
+

index.js

@@ -4,6 +4,7 @@ import Polyline from './components/maps/Polyline'
 import Polygon from './components/maps/Polygon'
 import Circle from './components/maps/Circle'
 import HeatMap from './components/maps/HeatMap'
+import MultiPoint from './components/maps/MultiPoint'
 import Navigation from './components/navigation'
 import MapUtils from './components/Utils'
 
@@ -12,6 +13,7 @@ MapView.Polyline = Polyline
 MapView.Polygon = Polygon
 MapView.Circle = Circle
 MapView.HeatMap = HeatMap
+MapView.MultiPoint = MultiPoint
 
 export default MapView
 export {
@@ -21,6 +23,7 @@ export {
   Polygon,
   Circle,
   HeatMap,
+  MultiPoint,
   Navigation,
   MapUtils,
 }