新增线段覆盖物自定义纹理

张志伟
1 parent 7a90d593
Showing 3 changed files with 68 additions and 45 deletions
lib/android/src/main/java/cn/feewee/amap3d/map_view/Polyline.kt
lib/android/src/main/java/cn/feewee/amap3d/map_view/PolylineManager.kt
lib/src/polyline.tsx
@@ -2,10 +2,15 @@ package cn.feewee.amap3d.map_view
  
 import android.content.Context
 import android.graphics.Color
+import android.os.Handler
+import android.os.Looper
+import cn.feewee.amap3d.fetchImage
 import com.amap.api.maps.AMap
+import com.amap.api.maps.model.BitmapDescriptor
 import com.amap.api.maps.model.LatLng
 import com.amap.api.maps.model.Polyline
 import com.amap.api.maps.model.PolylineOptions
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.views.view.ReactViewGroup
  
 class Polyline(context: Context) : ReactViewGroup(context), Overlay {
@@ -49,10 +54,18 @@ class Polyline(context: Context) : ReactViewGroup(context), Overlay {
       polyline?.isDottedLine = value
     }
  
+  var line: BitmapDescriptor? = null
+  fun setLine(source: ReadableMap) {
+    fetchImage(source) {
+      line = it
+    }
+  }
+
   override fun add(map: AMap) {
     polyline = map.addPolyline(
       PolylineOptions()
         .addAll(points)
+        .setCustomTexture(line)
         .color(color)
         .colorValues(colors)
         .width(width)
@@ -7,58 +7,64 @@ import com.facebook.react.uimanager.annotations.ReactProp
 import cn.feewee.amap3d.getEventTypeConstants
 import cn.feewee.amap3d.toLatLngList
 import cn.feewee.amap3d.toPx
+import com.facebook.react.bridge.ReadableMap
  
 @Suppress("unused")
 internal class PolylineManager : SimpleViewManager<Polyline>() {
-  override fun getName(): String {
-    return "AMapPolyline"
-  }
+    override fun getName(): String {
+        return "AMapPolyline"
+    }
  
-  override fun createViewInstance(context: ThemedReactContext): Polyline {
-    return Polyline(context)
-  }
+    override fun createViewInstance(context: ThemedReactContext): Polyline {
+        return Polyline(context)
+    }
  
-  override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
-    return getEventTypeConstants("onPress")
-  }
+    override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
+        return getEventTypeConstants("onPress")
+    }
  
-  @ReactProp(name = "points")
-  fun setPoints(polyline: Polyline, points: ReadableArray) {
-    polyline.points = points.toLatLngList()
-  }
+    @ReactProp(name = "points")
+    fun setPoints(polyline: Polyline, points: ReadableArray) {
+        polyline.points = points.toLatLngList()
+    }
  
-  @ReactProp(name = "colors")
-  fun setColors(polyline: Polyline, colors: ReadableArray) {
-    polyline.colors = (0 until colors.size()).map { colors.getInt(it) }
-  }
+    @ReactProp(name = "colors")
+    fun setColors(polyline: Polyline, colors: ReadableArray) {
+        polyline.colors = (0 until colors.size()).map { colors.getInt(it) }
+    }
  
-  @ReactProp(name = "color", customType = "Color")
-  fun setColor(polyline: Polyline, color: Int) {
-    polyline.color = color
-  }
+    @ReactProp(name = "color", customType = "Color")
+    fun setColor(polyline: Polyline, color: Int) {
+        polyline.color = color
+    }
  
-  @ReactProp(name = "width")
-  fun setWidth(polyline: Polyline, width: Float) {
-    polyline.width = width.toPx().toFloat()
-  }
+    @ReactProp(name = "width")
+    fun setWidth(polyline: Polyline, width: Float) {
+        polyline.width = width.toPx().toFloat()
+    }
  
-  @ReactProp(name = "zIndex")
-  fun setIndex(polyline: Polyline, zIndex: Float) {
-    polyline.zIndex = zIndex
-  }
+    @ReactProp(name = "zIndex")
+    fun setIndex(polyline: Polyline, zIndex: Float) {
+        polyline.zIndex = zIndex
+    }
  
-  @ReactProp(name = "geodesic")
-  fun setGeodesic(polyline: Polyline, geodesic: Boolean) {
-    polyline.geodesic = geodesic
-  }
+    @ReactProp(name = "geodesic")
+    fun setGeodesic(polyline: Polyline, geodesic: Boolean) {
+        polyline.geodesic = geodesic
+    }
  
-  @ReactProp(name = "dashed")
-  fun setDashed(polyline: Polyline, dashed: Boolean) {
-    polyline.dashed = dashed
-  }
+    @ReactProp(name = "dashed")
+    fun setDashed(polyline: Polyline, dashed: Boolean) {
+        polyline.dashed = dashed
+    }
  
-  @ReactProp(name = "gradient")
-  fun setGradient(polyline: Polyline, gradient: Boolean) {
-    polyline.gradient = gradient
-  }
+    @ReactProp(name = "gradient")
+    fun setGradient(polyline: Polyline, gradient: Boolean) {
+        polyline.gradient = gradient
+    }
+
+    @ReactProp(name = "line")
+    fun setLine(view: Polyline, line: ReadableMap?) {
+      line?.let { view.setLine(it) }
+    }
 }
 import * as React from "react";
-import { ColorValue, Platform, processColor, requireNativeComponent } from "react-native";
+import { ColorValue, ImageSourcePropType, Platform, processColor, requireNativeComponent } from "react-native";
+// @ts-ignore
+import resolveAssetSource from "react-native/Libraries/Image/resolveAssetSource";
 import { LatLng } from "./types";
  
 export interface PolylineProps {
@@ -12,12 +14,14 @@ export interface PolylineProps {
    * 线段宽度
    */
   width?: number;
-
+  /**
+   * 线段的纹理
+   */
+  line?: ImageSourcePropType;
   /**
    * 线段颜色
    */
   color?: ColorValue;
-
   /**
    * 层级
    */
@@ -58,7 +62,7 @@ export default class extends React.PureComponent&lt;PolylineProps&gt; {
       ...Platform.select({ android: { colors: this.props.colors.map(processColor) } }),
     };
     // @ts-ignore
-    return <NativePolyline {...props} />;
+    return <NativePolyline {...props} line={resolveAssetSource(props.line)} />;
   }
 }