实现 android 热力图接口

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

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

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

+package cn.qiuxiang.react.amap3d.maps
+
+import android.content.Context
+import com.amap.api.maps.AMap
+import com.amap.api.maps.model.HeatmapTileProvider
+import com.amap.api.maps.model.LatLng
+import com.amap.api.maps.model.TileOverlay
+import com.amap.api.maps.model.TileOverlayOptions
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.views.view.ReactViewGroup
+
+class AMapHeatMap(context: Context) : ReactViewGroup(context) {
+    var overlay: TileOverlay? = null
+        private set
+
+    var opacity: Double = 0.6
+    var radius: Int = 12
+
+    private var coordinates: ArrayList<LatLng> = ArrayList()
+
+    fun setCoordinates(coordinates: ReadableArray) {
+        this.coordinates = ArrayList((0 until coordinates.size())
+                .map { coordinates.getMap(it) }
+                .map { LatLng(it.getDouble("latitude"), it.getDouble("longitude")) })
+    }
+
+    fun addToMap(map: AMap) {
+        overlay = map.addTileOverlay(TileOverlayOptions().tileProvider(
+                HeatmapTileProvider.Builder()
+                        .data(coordinates)
+                        .radius(radius)
+                        .transparency(opacity)
+                        .build()))
+    }
+}
\ No newline at end of file

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

+package cn.qiuxiang.react.amap3d.maps
+
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactProp
+
+@Suppress("unused")
+internal class AMapHeatMapManager : SimpleViewManager<AMapHeatMap>() {
+    override fun getName(): String {
+        return "AMapHeatMap"
+    }
+
+    override fun createViewInstance(reactContext: ThemedReactContext): AMapHeatMap {
+        return AMapHeatMap(reactContext)
+    }
+
+    @ReactProp(name = "coordinates")
+    fun setCoordinate(heatMap: AMapHeatMap, coordinates: ReadableArray) {
+        heatMap.setCoordinates(coordinates)
+    }
+
+    @ReactProp(name = "radius")
+    fun setRadius(heatMap: AMapHeatMap, radius: Int) {
+        heatMap.radius = radius
+    }
+
+    @ReactProp(name = "opacity")
+    fun setOpacity(heatMap: AMapHeatMap, opacity: Double) {
+        heatMap.opacity = opacity
+    }
+}
\ No newline at end of file

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

@@ -138,6 +138,10 @@ class AMapView(context: Context) : TextureMapView(context) {
         circles.put(circle.circle?.id!!, circle)
     }
 
+    fun addHeatMap(heatMap: AMapHeatMap) {
+        heatMap.addToMap(map)
+    }
+
     fun emit(id: Int?, name: String, data: WritableMap = Arguments.createMap()) {
         id?.let { eventEmitter.receiveEvent(it, name, data) }
     }
@@ -160,6 +164,9 @@ class AMapView(context: Context) : TextureMapView(context) {
                 polygons.remove(child.circle?.id)
                 child.circle?.remove()
             }
+            is AMapHeatMap -> {
+                child.overlay?.remove()
+            }
         }
     }
 

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

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

components/maps/HeatMap.js

+import React, {PropTypes, PureComponent} from 'react'
+import {PixelRatio, Platform, requireNativeComponent, ViewPropTypes} from 'react-native'
+import {LatLng} from '../PropTypes'
+
+export default class HeatMap extends PureComponent {
+  static propTypes = {
+    ...ViewPropTypes,
+
+    /**
+     * 节点
+     */
+    coordinates: PropTypes.arrayOf(LatLng).isRequired,
+
+    /**
+     * 半径
+     */
+    radius: PropTypes.number,
+
+    /**
+     * 透明度
+     */
+    opacity: PropTypes.number,
+  }
+
+  render() {
+    return <AMapHeatMap {...this.props}/>
+  }
+}
+
+const AMapHeatMap = requireNativeComponent('AMapHeatMap', HeatMap)

example/src/app.js

@@ -13,6 +13,7 @@ import Polygon from './examples/polygon'
 import Circle from './examples/circle'
 import Events from './examples/events'
 import Navigation from './examples/navigation'
+import HeatMap from './examples/heat-map'
 
 export default StackNavigator({
   Examples: {screen: Examples},
@@ -28,6 +29,7 @@ export default StackNavigator({
   Circle: {screen: Circle},
   Events: {screen: Events},
   Navigation: {screen: Navigation},
+  HeatMap: {screen: HeatMap},
 }, {
   navigationOptions: {
     headerTintColor: '#212121',

example/src/examples.js

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

example/src/examples/heat-map.js

+import React, {Component} from 'react'
+import {StyleSheet} from 'react-native'
+import {MapView, HeatMap} from 'react-native-amap3d'
+
+export default class HeatMapExample extends Component {
+  static navigationOptions = {
+    title: '热力图',
+  }
+
+  _coordinates = (new Array(200)).fill(0).map(i => ({
+    latitude: 39.5 + Math.random(),
+    longitude: 116 + Math.random(),
+  }))
+
+  render() {
+    return <MapView zoomLevel={9} style={StyleSheet.absoluteFill}>
+      <HeatMap
+        opacity={0.8}
+        radius={20}
+        coordinates={this._coordinates}/>
+    </MapView>
+  }
+}

index.js

@@ -3,6 +3,7 @@ import Marker from './components/maps/Marker'
 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 Navigation from './components/navigation'
 import MapUtils from './components/Utils'
 
@@ -10,6 +11,7 @@ MapView.Marker = Marker
 MapView.Polyline = Polyline
 MapView.Polygon = Polygon
 MapView.Circle = Circle
+MapView.HeatMap = HeatMap
 
 export default MapView
 export {
@@ -18,6 +20,7 @@ export {
   Polyline,
   Polygon,
   Circle,
+  HeatMap,
   Navigation,
   MapUtils,
 }