实现 Polyline 的基本功能

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

@@ -27,6 +27,7 @@ public class AMap3DPackage implements ReactPackage {
                 new AMapViewManager(),
                 new AMapMarkerManager(),
                 new AMapOverlayManager(),
-                new AMapInfoWindowManager());
+                new AMapInfoWindowManager(),
+                new AMapPolylineManager());
     }
 }

android/src/main/java/cn/qiuxiang/react/amap3d/AMapPolyline.java

+package cn.qiuxiang.react.amap3d;
+
+import android.content.Context;
+
+import com.amap.api.maps.AMap;
+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.ReadableArray;
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.views.view.ReactViewGroup;
+
+import java.util.ArrayList;
+
+public class AMapPolyline extends ReactViewGroup {
+    private ArrayList<LatLng> coordinates;
+    private Polyline polyline;
+    private int color;
+    private float width;
+    private float zIndex;
+    private boolean geodesic;
+    private boolean dottedLine;
+    private float opacity;
+    private ArrayList<Integer> colors;
+    private boolean gradient;
+
+    public AMapPolyline(Context context) {
+        super(context);
+    }
+
+    public void setCoordinates(ReadableArray coordinates) {
+        this.coordinates = new ArrayList<>(coordinates.size());
+        for (int i = 0; i < coordinates.size(); i++) {
+            ReadableMap coordinate = coordinates.getMap(i);
+            this.coordinates.add(i, new LatLng(
+                    coordinate.getDouble("latitude"),
+                    coordinate.getDouble("longitude")));
+        }
+        if (polyline != null) {
+            polyline.setPoints(this.coordinates);
+        }
+    }
+
+    public void setColor(int color) {
+        this.color = color;
+        if (polyline != null) {
+            polyline.setColor(color);
+        }
+    }
+
+    public void setWidth(float width) {
+        this.width = width;
+        if (polyline != null) {
+            polyline.setWidth(width);
+        }
+    }
+
+    public void setZIndex(float zIndex) {
+        this.zIndex = zIndex;
+        if (polyline != null) {
+            polyline.setZIndex(zIndex);
+        }
+    }
+
+    public void setGeodesic(boolean geodesic) {
+        this.geodesic = geodesic;
+        if (polyline != null) {
+            polyline.setGeodesic(geodesic);
+        }
+    }
+
+    public void setDottedLine(boolean dottedLine) {
+        this.dottedLine = dottedLine;
+        if (polyline != null) {
+            polyline.setDottedLine(dottedLine);
+        }
+    }
+
+    public void setGradient(boolean gradient) {
+        this.gradient = gradient;
+    }
+
+    public void setOpacity(float opacity) {
+        this.opacity = opacity;
+        if (polyline != null) {
+            polyline.setTransparency(opacity);
+        }
+    }
+
+    public void setColors(ReadableArray colors) {
+        this.colors = new ArrayList<>(colors.size());
+        for (int i = 0; i < colors.size(); i++) {
+            this.colors.add(colors.getInt(i));
+        }
+    }
+
+    public void addToMap(AMap map) {
+        polyline = map.addPolyline(new PolylineOptions()
+                .addAll(coordinates)
+                .color(color)
+                .colorValues(colors)
+                .width(width)
+                .useGradient(gradient)
+                .geodesic(geodesic)
+                .setDottedLine(dottedLine)
+                .transparency(opacity)
+                .zIndex(zIndex));
+    }
+
+    public String getPolylineId() {
+        return polyline.getId();
+    }
+}

android/src/main/java/cn/qiuxiang/react/amap3d/AMapPolylineManager.java

+package cn.qiuxiang.react.amap3d;
+
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+class AMapPolylineManager extends ViewGroupManager<AMapPolyline> {
+    @Override
+    public String getName() {
+        return "AMapPolyline";
+    }
+
+    @Override
+    protected AMapPolyline createViewInstance(ThemedReactContext reactContext) {
+        return new AMapPolyline(reactContext);
+    }
+
+    @ReactProp(name = "coordinates")
+    public void setCoordinate(AMapPolyline polyline, ReadableArray coordinates) {
+        polyline.setCoordinates(coordinates);
+    }
+
+    @ReactProp(name = "colors")
+    public void setColors(AMapPolyline polyline, ReadableArray colors) {
+        polyline.setColors(colors);
+    }
+
+    @ReactProp(name = "color", customType = "Color")
+    public void setColor(AMapPolyline polyline, int color) {
+        polyline.setColor(color);
+    }
+
+    @ReactProp(name = "width")
+    public void setWidth(AMapPolyline polyline, int width) {
+        polyline.setWidth(width);
+    }
+
+    @ReactProp(name = "zIndex")
+    public void setZIndex(AMapPolyline polyline, int zIndex) {
+        polyline.setZIndex(zIndex);
+    }
+
+    @ReactProp(name = "opacity")
+    public void setOpacity(AMapPolyline polyline, float opacity) {
+        polyline.setOpacity(opacity);
+    }
+
+    @ReactProp(name = "geodesic")
+    public void setGeodesic(AMapPolyline polyline, boolean geodesic) {
+        polyline.setGeodesic(geodesic);
+    }
+
+    @ReactProp(name = "dottedLine")
+    public void setDottedLine(AMapPolyline polyline, boolean dottedLine) {
+        polyline.setDottedLine(dottedLine);
+    }
+
+    @ReactProp(name = "gradient")
+    public void setGradient(AMapPolyline polyline, boolean gradient) {
+        polyline.setGradient(gradient);
+    }
+}

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

@@ -28,6 +28,7 @@ public class AMapView extends MapView {
     public final UiSettings ui;
     private final RCTEventEmitter eventEmitter;
     private Map<String, AMapMarker> markers = new HashMap<>();
+    private Map<String, AMapPolyline> polylines = new HashMap<>();
 
     public AMapView(final ThemedReactContext context) {
         super(context);
@@ -146,6 +147,10 @@ public class AMapView extends MapView {
         });
     }
 
+    private static float pxFromDp(Context context, float dp) {
+        return dp * context.getResources().getDisplayMetrics().density;
+    }
+
     public void addMarker(AMapMarker marker) {
         marker.addToMap(map);
         markers.put(marker.getMarkerId(), marker);
@@ -155,7 +160,8 @@ public class AMapView extends MapView {
         eventEmitter.receiveEvent(getId(), name, data);
     }
 
-    private static float pxFromDp(Context context, float dp) {
-        return dp * context.getResources().getDisplayMetrics().density;
+    public void addPolyline(AMapPolyline polyline) {
+        polyline.addToMap(map);
+        polylines.put(polyline.getPolylineId(), polyline);
     }
 }

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

@@ -31,6 +31,8 @@ class AMapViewManager extends ViewGroupManager<AMapView> {
     public void addView(AMapView mapView, View child, int index) {
         if (child instanceof AMapMarker) {
             mapView.addMarker((AMapMarker) child);
+        } else if (child instanceof AMapPolyline) {
+            mapView.addPolyline((AMapPolyline) child);
         }
     }
 

components/MapView.js

@@ -3,6 +3,7 @@ import {requireNativeComponent, View} from 'react-native'
 import Marker from './Marker'
 import InfoWindow from './InfoWindow'
 import Overlay from './Overlay'
+import Polyline from './Polyline'
 
 const CoordinatePropType = PropTypes.shape({
   latitude: PropTypes.number.isRequired,
@@ -146,9 +147,10 @@ class MapView extends Component {
   static Marker = Marker
   static Overlay = Overlay
   static InfoWindow = InfoWindow
+  static Polyline = Polyline
 }
 
 AMapView = requireNativeComponent('AMapView', MapView)
 
 export default MapView
-export {MapView, Marker, InfoWindow, Overlay}
+export {MapView, Marker, InfoWindow, Overlay, Polyline}

components/Polyline.js

+import React, {PropTypes, Component} from 'react'
+import {processColor, requireNativeComponent, View, PixelRatio} from 'react-native'
+import {CoordinatePropType} from './PropTypes'
+
+class Polyline extends Component {
+  static propTypes = {
+    ...View.propTypes,
+
+    coordinates: PropTypes.arrayOf(CoordinatePropType).isRequired,
+    width: PropTypes.number,
+    color: PropTypes.string,
+    zIndex: PropTypes.number,
+    opacity: PropTypes.number,
+
+    /**
+     * 多段颜色
+     */
+    colors: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.number),
+      PropTypes.arrayOf(PropTypes.string),
+    ]),
+
+    /**
+     * 是否使用颜色渐变
+     */
+    gradient: PropTypes.bool,
+
+    /**
+     * 是否绘制大地线
+     */
+    geodesic: PropTypes.bool,
+
+    /**
+     * 是否绘制虚线
+     */
+    dottedLine: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    width: 1,
+    color: '#000',
+    colors: [],
+    opacity: 1,
+  }
+
+  render() {
+    const props = {
+      ...this.props,
+      width: PixelRatio.getPixelSizeForLayoutSize(this.props.width),
+      colors: this.props.colors.map(processColor),
+    }
+    return <AMapPolyline {...props}/>
+  }
+}
+
+AMapPolyline = requireNativeComponent('AMapPolyline', Polyline)
+
+export default Polyline

example/src/app.js

@@ -6,6 +6,7 @@ import Indoor from './indoor'
 import Controls from './controls'
 import Gestures from './gestures'
 import Marker from './marker'
+import Polyline from './polyline'
 
 export default StackNavigator({
   Examples: {screen: Examples},
@@ -15,6 +16,7 @@ export default StackNavigator({
   Controls: {screen: Controls},
   Gestures: {screen: Gestures},
   Marker: {screen: Marker},
+  Polyline: {screen: Polyline},
 }, {
   navigationOptions: {
     headerTintColor: '#212121',

example/src/examples.js

@@ -44,6 +44,8 @@ export default class Examples extends Component {
       </View>
       <View style={styles.group}>
         {this._renderItem('添加标记', 'Marker')}
+        <View style={styles.separator}/>
+        {this._renderItem('绘制折线', 'Polyline')}
       </View>
     </ScrollView>
   }

example/src/marker.js

 import React, {Component} from 'react'
-import {StyleSheet, Alert, Text, View} from 'react-native'
+import {StyleSheet, Alert, Text} from 'react-native'
 import {MapView, Marker, InfoWindow, Overlay} from 'react-native-amap3d'
 
-export default class MarkerComponent extends Component {
+export default class MarkerExample extends Component {
   static navigationOptions = {
     title: '添加标记',
   }
@@ -40,7 +40,6 @@ export default class MarkerComponent extends Component {
       <Marker
         selected
         icon='HUE_RED'
-        title='一个红色的 Marker'
         infoWindowWidth={100}
         coordinate={{
           latitude: 39.806901,

example/src/polyline.js

+import React, {Component} from 'react'
+import {StyleSheet} from 'react-native'
+import {MapView, Polyline} from 'react-native-amap3d'
+
+export default class PolylineExample extends Component {
+  static navigationOptions = {
+    title: '绘制折线',
+  }
+
+  render() {
+    return <MapView style={StyleSheet.absoluteFill}>
+      <Polyline
+        width={5}
+        coordinates={[
+          {
+            latitude: 40.206901,
+            longitude: 116.097972,
+          },
+          {
+            latitude: 40.206901,
+            longitude: 116.597972,
+          },
+        ]}/>
+      <Polyline
+        width={5}
+        color='red'
+        coordinates={[
+          {
+            latitude: 40.106901,
+            longitude: 116.097972,
+          },
+          {
+            latitude: 40.106901,
+            longitude: 116.597972,
+          },
+        ]}/>
+      <Polyline
+        dottedLine
+        width={5}
+        coordinates={[
+          {
+            latitude: 40.006901,
+            longitude: 116.097972,
+          },
+          {
+            latitude: 40.006901,
+            longitude: 116.597972,
+          },
+        ]}/>
+      <Polyline
+        gradient
+        width={5}
+        color='blue'
+        colors={['#f44336', '#2196f3', '#4caf50']}
+        coordinates={[
+          {
+            latitude: 39.906901,
+            longitude: 116.097972,
+          },
+          {
+            latitude: 39.906901,
+            longitude: 116.257972,
+          },
+          {
+            latitude: 39.906901,
+            longitude: 116.457972,
+          },
+          {
+            latitude: 39.906901,
+            longitude: 116.597972,
+          },
+        ]}/>
+    </MapView>
+  }
+}