添加路径显示贴图&添加移动组件

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

@@ -18,6 +18,8 @@ class AMap3DPackage : ReactPackage {
                 AMapViewManager(),
                 AMapMarkerManager(),
                 AMapInfoWindowManager(),
+                AMapPathPolylineManager(),
+                AMapSmoothMoveMarkerManager(),
                 AMapPolylineManager(),
                 AMapPolygonManager(),
                 AMapCircleManager(),

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

+package cn.qiuxiang.react.amap3d.maps
+
+import android.content.Context
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.view.View
+import android.graphics.Color
+import cn.qiuxiang.react.amap3d.toPx
+import cn.qiuxiang.react.amap3d.toLatLngList
+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.amap.api.maps.model.*
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.views.view.ReactViewGroup
+
+class AMapPathPolyline(context: Context) : ReactViewGroup(context), AMapOverlay {
+
+    var polyline: Polyline? = null
+        private set
+
+    private var coordinates: ArrayList<LatLng> = ArrayList()
+    private var colors: ArrayList<Int> = ArrayList()
+    private var bitmapDescriptor: BitmapDescriptor? = null
+    //private var bitmapDescriptor1: BitmapDescriptor? = null
+    //private var bitmapDescriptor2: BitmapDescriptor? = null
+
+    var width: Float = 1f
+        set(value) {
+            field = value
+            polyline?.width = value
+        }
+
+    var color: Int = Color.BLACK
+        set(value) {
+            field = value
+            polyline?.color = value
+        }
+
+    var zIndex: Float = 0f
+        set(value) {
+            field = value
+            polyline?.zIndex = value
+        }
+
+    var geodesic: Boolean = false
+        set(value) {
+            field = value
+            polyline?.isGeodesic = value
+        }
+
+    var dashed: Boolean = false
+        set(value) {
+            field = value
+            polyline?.isDottedLine = value
+        }
+
+    var gradient: Boolean = false
+
+    fun setCoordinates(coordinates: ReadableArray) {
+        this.coordinates = coordinates.toLatLngList()
+        polyline?.points = this.coordinates
+    }
+
+    fun setColors(colors: ReadableArray) {
+        this.colors = ArrayList((0 until colors.size()).map { colors.getInt(it) })
+    }
+
+    fun setImage(name: String) {
+        val drawable = context.resources.getIdentifier(name, "drawable", context.packageName)
+        //val drawable1 = context.resources.getIdentifier("p16x16_1", "drawable", context.packageName)
+        //val drawable2 = context.resources.getIdentifier("p16x16_1", "drawable", context.packageName)
+        bitmapDescriptor = BitmapDescriptorFactory.fromResource(drawable)
+        //bitmapDescriptor1 = BitmapDescriptorFactory.fromResource(drawable1)
+        //bitmapDescriptor2 = BitmapDescriptorFactory.fromResource(drawable2)
+    }
+
+    override fun add(map: AMap) {
+        polyline = map.addPolyline(PolylineOptions()
+                .setCustomTexture(bitmapDescriptor)
+                //.setCustomTextureIndex(listOf(0, 1, 2))
+                //.setCustomTextureList(listOf(bitmapDescriptor1,bitmapDescriptor,bitmapDescriptor2))
+                .setUseTexture(true)        
+                .addAll(coordinates)
+                // .color(color)
+                // .colorValues(colors)
+                .width(width)
+                .useGradient(gradient)
+                .geodesic(geodesic)
+                .setDottedLine(dashed)
+                .zIndex(zIndex))
+    }
+
+    override fun remove() {
+        polyline?.remove()
+    }
+}

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

+package cn.qiuxiang.react.amap3d.maps
+
+import cn.qiuxiang.react.amap3d.toPx
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.annotations.ReactProp
+
+@Suppress("unused")
+internal class AMapPathPolylineManager : SimpleViewManager<AMapPathPolyline>() {
+    override fun getName(): String {
+        return "AMapPathPolyline"
+    }
+
+    override fun createViewInstance(reactContext: ThemedReactContext): AMapPathPolyline {
+        return AMapPathPolyline(reactContext)
+    }
+
+    override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> {
+        return mapOf("onPress" to mapOf("registrationName" to "onPress"))
+    }
+
+    @ReactProp(name = "coordinates")
+    fun setCoordinate(polyline: AMapPathPolyline, coordinates: ReadableArray) {
+        polyline.setCoordinates(coordinates)
+    }
+
+    @ReactProp(name = "colors")
+    fun setColors(polyline: AMapPathPolyline, colors: ReadableArray) {
+        polyline.setColors(colors)
+    }
+
+    @ReactProp(name = "color", customType = "Color")
+    fun setColor(polyline: AMapPathPolyline, color: Int) {
+        polyline.color = color
+    }
+
+    @ReactProp(name = "width")
+    fun setWidth(polyline: AMapPathPolyline, width: Float) {
+        polyline.width = width.toPx().toFloat()
+    }
+
+    @ReactProp(name = "zIndex")
+    fun setZIndex_(polyline: AMapPathPolyline, zIndex: Float) {
+        polyline.zIndex = zIndex
+    }
+
+    @ReactProp(name = "geodesic")
+    fun setGeodesic(polyline: AMapPathPolyline, geodesic: Boolean) {
+        polyline.geodesic = geodesic
+    }
+
+    @ReactProp(name = "dashed")
+    fun setDashed(polyline: AMapPathPolyline, dashed: Boolean) {
+        polyline.dashed = dashed
+    }
+
+    @ReactProp(name = "gradient")
+    fun setGradient(polyline: AMapPathPolyline, gradient: Boolean) {
+        polyline.gradient = gradient
+    }
+
+    @ReactProp(name = "image")
+    fun setImage(polygon: AMapPathPolyline, image: String) {
+        polygon.setImage(image)
+    }
+}

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

+package cn.qiuxiang.react.amap3d.maps
+
+import android.content.Context
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.view.View
+import cn.qiuxiang.react.amap3d.toPx
+import com.amap.api.maps.utils.overlay.*
+import com.amap.api.maps.AMap
+import com.amap.api.maps.CameraUpdateFactory
+import cn.qiuxiang.react.amap3d.toLatLngList
+import com.amap.api.maps.model.LatLngBounds
+import com.amap.api.maps.model.*
+import com.amap.api.maps.utils.*
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.views.view.ReactViewGroup
+
+
+class AMapSmoothMoveMarker(context: Context) : ReactViewGroup(context), AMapOverlay {
+    private var bitmapDescriptor: BitmapDescriptor? = null
+    private var coordinates: ArrayList<LatLng> = ArrayList()
+    
+    var marker: SmoothMoveMarker? = null
+        private set
+
+    var duration: Int = 3
+        set(value) {
+            field = value
+        }
+
+    fun setImage(name: String) {
+        val drawable = context.resources.getIdentifier(name, "drawable", context.packageName)
+        bitmapDescriptor = BitmapDescriptorFactory.fromResource(drawable)
+    }
+
+    fun setCoordinates(coordinates: ReadableArray) {
+        this.coordinates = coordinates.toLatLngList()
+        this.startSmoothMove()
+    }
+
+    fun startSmoothMove(){
+        var drivePoint:LatLng  = this.coordinates.get(0)
+        var pair = SpatialRelationUtil.calShortestDistancePoint(this.coordinates, drivePoint)
+        this.coordinates.set(pair.first, drivePoint)
+        var subList = this.coordinates.subList(pair.first, this.coordinates.size)
+
+        // 设置滑动的轨迹左边点
+        marker?.setPoints(subList)
+        // 设置滑动的总时间
+        marker?.setTotalDuration(duration)
+        // 开始滑动
+        marker?.startSmoothMove()
+    }
+
+    override fun add(map: AMap) {
+        // 获取轨迹坐标点
+        //{latitude:27.7218139558361,longitude:103.898145251009},{latitude:27.7358139558361,longitude:103.895145251009}
+        // var points:MutableList<LatLng> = ArrayList()
+        // points.add(LatLng(27.7218139558361,103.898145251009))
+        // points.add(LatLng(27.7358139558361,103.895145251009))
+        // var bounds = LatLngBounds(points.get(0), points.get(points.size - 2))
+        // map.animateCamera(CameraUpdateFactory.newLatLngBounds(bounds, 50))
+
+        marker = SmoothMoveMarker(map)
+        //设置滑动的图标
+        //bitmapDescriptor = BitmapDescriptorFactory.fromResource(drawable)
+        marker?.setDescriptor(bitmapDescriptor)
+
+        // var drivePoint:LatLng  = coordinates.get(0)
+        // var pair = SpatialRelationUtil.calShortestDistancePoint(coordinates, drivePoint)
+        // coordinates.set(pair.first, drivePoint)
+        // var subList = coordinates.subList(pair.first, coordinates.size)
+
+        // // 设置滑动的轨迹左边点
+        // marker?.setPoints(subList)
+        // // 设置滑动的总时间
+        // marker?.setTotalDuration(duration)
+        // // 开始滑动
+        // marker?.startSmoothMove()
+        this.startSmoothMove();
+    }
+
+    override fun remove() {
+        marker?.destroy()
+    }
+}

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

+package cn.qiuxiang.react.amap3d.maps
+
+import android.view.View
+import cn.qiuxiang.react.amap3d.toLatLng
+import com.amap.api.maps.model.LatLng
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.ReactMethod
+import com.facebook.react.common.MapBuilder
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactProp
+
+@Suppress("unused")
+internal class AMapSmoothMoveMarkerManager : ViewGroupManager<AMapSmoothMoveMarker>() {
+    override fun getName(): String {
+        return "AMapSmoothMoveMarker"
+    }
+
+    override fun createViewInstance(reactContext: ThemedReactContext): AMapSmoothMoveMarker {
+        return AMapSmoothMoveMarker(reactContext)
+    }
+
+
+    override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any>? {
+        return MapBuilder.of(
+                "onPress", MapBuilder.of("registrationName", "onPress"))
+    }
+
+    @ReactProp(name = "coordinates")
+    fun setCoordinate(marker: AMapSmoothMoveMarker, coordinates: ReadableArray) {
+        marker.setCoordinates(coordinates)
+    }
+
+    @ReactProp(name = "duration")
+    fun setCoordinate(marker: AMapSmoothMoveMarker, duration: Int) {
+        marker.duration = duration
+    }
+
+    @ReactProp(name = "image")
+    fun setImage(marker: AMapSmoothMoveMarker, image: String) {
+        marker.setImage(image)
+    }
+
+    @ReactMethod
+    fun startSmoothMove(marker: AMapSmoothMoveMarker) {
+        marker.startSmoothMove()
+    }
+}

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

@@ -22,6 +22,7 @@ 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 smoothMoveMarkers = HashMap<String, AMapSmoothMoveMarker>()
     private val lines = HashMap<String, AMapPolyline>()
     private val locationStyle by lazy {
         val locationStyle = MyLocationStyle()
@@ -60,6 +61,9 @@ class AMapView(context: Context) : TextureMapView(context) {
                 it.active = true
                 emit(it.id, "onPress")
             }
+            smoothMoveMarkers[marker.id]?.let {
+                emit(it.id, "onPress")
+            }
             true
         }
 
@@ -132,6 +136,9 @@ class AMapView(context: Context) : TextureMapView(context) {
             if (child is AMapMarker) {
                 markers[child.marker?.id!!] = child
             }
+            if (child is AMapSmoothMoveMarker){
+                smoothMoveMarkers[child.marker?.getMarker()?.id!!] = child
+            }
             if (child is AMapPolyline) {
                 lines[child.polyline?.id!!] = child
             }
@@ -144,6 +151,9 @@ class AMapView(context: Context) : TextureMapView(context) {
             if (child is AMapMarker) {
                 markers.remove(child.marker?.id)
             }
+            if (child is AMapSmoothMoveMarker){
+                markers.remove(child.marker?.getMarker()?.id)
+            }            
             if (child is AMapPolyline) {
                 lines.remove(child.polyline?.id)
             }

lib/js/index.js

 import MapView from './maps/MapView'
 import Marker from './maps/Marker'
+import PathPolyLine from "./maps/PathPolyline"
+import SmoothMoveMarker from "./maps/SmoothMoveMarker"
 import Polyline from './maps/Polyline'
 import Polygon from './maps/Polygon'
 import Circle from './maps/Circle'
@@ -13,11 +15,16 @@ MapView.Polygon = Polygon
 MapView.Circle = Circle
 MapView.HeatMap = HeatMap
 MapView.MultiPoint = MultiPoint
+MapView.PathPolyLine = PathPolyLine
+MapView.SmoothMoveMarker = SmoothMoveMarker
+
 
 export default MapView
 export {
   MapView,
   Marker,
+  PathPolyLine,
+  SmoothMoveMarker,
   Polyline,
   Polygon,
   Circle,

lib/js/maps/PathPolyline.js

+// @flow
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { ColorPropType, Platform, processColor, requireNativeComponent, ViewPropTypes } from 'react-native'
+import { LatLng } from '../PropTypes'
+
+export default class PathPolyline extends PureComponent<any> {
+  static propTypes = {
+    ...ViewPropTypes,
+
+    /**
+     * 节点坐标
+     */
+    coordinates: PropTypes.arrayOf(LatLng).isRequired,
+
+    /**
+     * 线段宽度
+     */
+    width: PropTypes.number,
+
+    /**
+     * 线段颜色
+     */
+    color: ColorPropType,
+
+    /**
+     * 自定义图片，对应原生图片名称
+     */
+    image: PropTypes.string,
+
+    /**
+     * 层级
+     */
+    zIndex: PropTypes.number,
+
+    /**
+     * 多段颜色
+     */
+    colors: PropTypes.arrayOf(ColorPropType),
+
+    /**
+     * 是否使用颜色渐变
+     */
+    gradient: PropTypes.bool,
+
+    /**
+     * 是否绘制大地线
+     */
+    geodesic: PropTypes.bool,
+
+    /**
+     * 是否绘制虚线
+     */
+    dashed: PropTypes.bool,
+
+    /**
+     * 点击事件
+     */
+    onPress: PropTypes.func,
+  }
+
+  static defaultProps = {
+    colors: [],
+  }
+
+  render() {
+    const props = {
+      ...this.props,
+      ...Platform.select({
+        android: {
+          colors: this.props.colors.map(processColor),
+        },
+      }),
+    }
+    return <AMapPathPolyline {...props} />
+  }
+}
+
+const AMapPathPolyline = requireNativeComponent('AMapPathPolyline', PathPolyline)

lib/js/maps/SmoothMoveMarker.js

+// @flow
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Platform, requireNativeComponent, StyleSheet, ViewPropTypes, View } from 'react-native'
+import { LatLng, Point } from '../PropTypes'
+import Component from '../Component'
+
+const style = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+  },
+})
+
+export default class SmoothMoveMarker extends Component<any> {
+  static propTypes = {
+    ...ViewPropTypes,
+    /**
+     * 节点坐标
+     */
+    coordinates: PropTypes.arrayOf(LatLng).isRequired,    
+    /**
+     * 动画时间
+     */
+    duration: PropTypes.number,        
+    /**
+     * 自定义图片，对应原生图片名称
+     */
+    image: PropTypes.string,
+    /**
+     * 点击事件
+     */
+    onPress: PropTypes.func
+  }
+
+  componentDidMount() {
+  }
+
+  render() {
+    return (
+      <AMapSmoothMoveMarker {...this.props}>
+      </AMapSmoothMoveMarker>
+    )
+  }
+}
+
+const AMapSmoothMoveMarker = requireNativeComponent('AMapSmoothMoveMarker', SmoothMoveMarker)