热力图和MarkerIcon

Author: lovebing

README.md

@@ -115,7 +115,7 @@ BaiduMapManager.initSDK('sIMQlfmOXhQmPLF1QMh4aBp8zZO9Lb2A');
 | onMapPoiClick           | func  | undefined|
 
 #### Overlay 覆盖物
-    const { Marker, Cluster, Arc, Circle, Polyline, Polygon, Text, InfoWindow } = Overlay;
+    const { Marker, Cluster, Arc, Circle, Polyline, Polygon, InfoWindow, HeatMap } = Overlay;
 
 ##### 颜色取值说明
 6 位(RRGGBB)或 8 位(AARRGGBB)
@@ -175,20 +175,35 @@ BaiduMapManager.initSDK('sIMQlfmOXhQmPLF1QMh4aBp8zZO9Lb2A');
 | rotate                  | float |          |
 | location                | object|{latitude: 0, longitude: 0}
 
+
+##### MarkerIcon 使用 View 作为 marker 的 icon
+
 ##### InfoWindow Props 属性
 必须作为 Marker 的子组件
 
 | Prop                    | Type  | Default  | Description
 | ----------------------- |:-----:| :-------:| -------
 | offsetY                 | int   | 0        | 相对于 point 在 y 轴的偏移量，仅 Android
 
+#### HeatMap Props 属性
+
+| Prop                    | Type  | Default  | Description
+| ----------------------- |:-----:| :-------:| -------
+| points                  | array   |         | 
+| gradient                | object| { colors: ['66FF00', 'FF0000'], startPoints: [0.2, 1.0] } | 颜色渐变对象
+
 ```jsx
 <MapView>
     <Marker/>
     <Marker>
-        <InfoWindow>
+        <InfoWindow style={{ backgroundColor: 'red', width: 200, height: 100}}>
             <View />
         </InfoWindow>
+        <MarkerIcon style={{ backgroundColor: 'red', width: 40, height: 40}}>
+            <View>
+                <Text>ABC</Text>
+            </View>
+        </MarkerIcon>
     </Marker>
     <Cluster>
         <Marker/>
@@ -197,7 +212,8 @@ BaiduMapManager.initSDK('sIMQlfmOXhQmPLF1QMh4aBp8zZO9Lb2A');
     <Circle />
     <Polyline />
     <Polygon />
-    <Text />
+    <Overlay.Text>text</Overlay.Text>
+    <HeatMap />
 </MapView>
 ```
 

android/src/main/java/org/lovebing/reactnative/baidumap/BaiduMapPackage.java

@@ -27,6 +27,7 @@
 import org.lovebing.reactnative.baidumap.module.GetDistanceModule;
 import org.lovebing.reactnative.baidumap.module.MapAppModule;
 import org.lovebing.reactnative.baidumap.uimanager.*;
+import org.lovebing.reactnative.baidumap.view.OverlayMarkerIcon;
 
 
 /**
@@ -53,6 +54,7 @@ public List<ViewManager> createViewManagers(
                 new MapViewManager(),
                 new OverlayClusterManager(),
                 new OverlayMarkerManager(),
+                new OverlayMarkerIconManager(),
                 new OverlayOverlayInfoWindowManager(),
                 new OverlayArcManager(),
                 new OverlayCircleManager(),

android/src/main/java/org/lovebing/reactnative/baidumap/listener/MapListener.java

@@ -7,6 +7,8 @@
 
 package org.lovebing.reactnative.baidumap.listener;
 
+import android.util.Log;
+
 import com.baidu.mapapi.map.BaiduMap;
 import com.baidu.mapapi.map.InfoWindow;
 import com.baidu.mapapi.map.MapPoi;

android/src/main/java/org/lovebing/reactnative/baidumap/uimanager/OverlayMarkerIconManager.java

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2016-present, lovebing.net.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package org.lovebing.reactnative.baidumap.uimanager;
+
+import androidx.annotation.NonNull;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.ViewGroupManager;
+import org.lovebing.reactnative.baidumap.view.OverlayMarkerIcon;
+
+/**
+ * @author lovebing
+ * @date 2020-06-07
+ */
+public class OverlayMarkerIconManager extends ViewGroupManager<OverlayMarkerIcon> {
+
+    @NonNull
+    @Override
+    public String getName() {
+        return "BaiduMapOverlayMarkerIcon";
+    }
+
+    @NonNull
+    @Override
+    protected OverlayMarkerIcon createViewInstance(@NonNull ThemedReactContext reactContext) {
+        return new OverlayMarkerIcon(reactContext);
+    }
+}

android/src/main/java/org/lovebing/reactnative/baidumap/uimanager/OverlayMarkerManager.java

@@ -19,6 +19,7 @@
 import org.lovebing.reactnative.baidumap.util.LatLngUtil;
 import org.lovebing.reactnative.baidumap.view.OverlayInfoWindow;
 import org.lovebing.reactnative.baidumap.view.OverlayMarker;
+import org.lovebing.reactnative.baidumap.view.OverlayMarkerIcon;
 
 public class OverlayMarkerManager extends ViewGroupManager<OverlayMarker> {
 
@@ -87,6 +88,8 @@ public void setFlat(OverlayMarker overlayMarker, boolean flat) {
     public void addView(OverlayMarker parent, View child, int index) {
         if (child instanceof OverlayInfoWindow) {
             parent.setOverlayInfoWindow((OverlayInfoWindow) child);
+        } else if (child instanceof OverlayMarkerIcon) {
+            parent.setIconView(child);
         }
         super.addView(parent, child, index);
     }

android/src/main/java/org/lovebing/reactnative/baidumap/util/BitmapUtil.java

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2016-present, lovebing.net.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package org.lovebing.reactnative.baidumap.util;
+
+import android.graphics.Bitmap;
+import android.graphics.Canvas;
+import android.graphics.Matrix;
+import android.view.View;
+
+import com.baidu.mapapi.map.BitmapDescriptor;
+import com.baidu.mapapi.map.BitmapDescriptorFactory;
+
+/**
+ * @author lovebing
+ * @date 2020-05-25
+ */
+public class BitmapUtil {
+
+    public static BitmapDescriptor createBitmapDescriptor(View view) {
+        return createBitmapDescriptor(view,  0, 0);
+    }
+
+    public static BitmapDescriptor createBitmapDescriptor(View view, int width, int height) {
+        if (width > 0 && height > 0) {
+            view.layout(0, 0, width, height);
+        } else if (view.getMeasuredWidth() == 0 || view.getMeasuredHeight() == 0) {
+            view.layout(0, 0, view.getMeasuredWidth() > 0 ? view.getMeasuredWidth() : 50, view.getMeasuredHeight() > 0 ? view.getMeasuredHeight() : 100);
+        }
+        view.buildDrawingCache();
+        BitmapDescriptor bitmapDescriptor = BitmapDescriptorFactory.fromBitmap(view.getDrawingCache());
+        view.destroyDrawingCache();
+        return bitmapDescriptor;
+    }
+
+    public static Bitmap resizeBitmap(Bitmap bitmap, int width, int height) {
+        float scaleWidth = ((float) width) / bitmap.getWidth();
+        float scaleHeight = ((float) height) / bitmap.getHeight();
+        Matrix matrix = new Matrix();
+        matrix.postScale(scaleWidth, scaleHeight);
+        return Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
+    }
+}

android/src/main/java/org/lovebing/reactnative/baidumap/view/OverlayHeatMap.java

@@ -69,7 +69,9 @@ public void addTopMap(BaiduMap baiduMap) {
 
     @Override
     public void removeFromMap(BaiduMap baiduMap) {
-        heatMap.removeHeatMap();
-        heatMap = null;
+        if (heatMap != null) {
+            heatMap.removeHeatMap();
+            heatMap = null;
+        }
     }
 }

android/src/main/java/org/lovebing/reactnative/baidumap/view/OverlayInfoWindow.java

@@ -8,13 +8,13 @@
 package org.lovebing.reactnative.baidumap.view;
 
 import android.content.Context;
-
 import com.baidu.mapapi.map.BitmapDescriptor;
-import com.baidu.mapapi.map.BitmapDescriptorFactory;
 import com.baidu.mapapi.map.InfoWindow;
 import com.baidu.mapapi.model.LatLng;
 import com.facebook.react.views.view.ReactViewGroup;
 
+import org.lovebing.reactnative.baidumap.util.BitmapUtil;
+
 /**
  * @author lovebing Created on Dec 09, 2018
  */
@@ -52,18 +52,11 @@ public void setOffsetY(int offsetY) {
 
     private void updateInfoWindow(LatLng location) {
         if (infoWindow == null) {
-            BitmapDescriptor bitmap;
-            if (width > 0 && height > 0) {
-                layout(0, 0, width, height);
-            } else if (getMeasuredWidth() == 0 || getMeasuredHeight() == 0) {
-                layout(0, 0, getMeasuredWidth() > 0 ? getMeasuredWidth() : 50, getMeasuredHeight() > 0 ? getMeasuredHeight() : 100);
-            }
-            buildDrawingCache();
-            bitmap = BitmapDescriptorFactory.fromBitmap(getDrawingCache());
-            if (bitmap == null) {
+            BitmapDescriptor bitmapDescriptor = BitmapUtil.createBitmapDescriptor(this, width, height);
+            if (bitmapDescriptor == null) {
                 return;
             }
-            infoWindow = new InfoWindow(bitmap, location, offsetY, new InfoWindow.OnInfoWindowClickListener() {
+            infoWindow = new InfoWindow(bitmapDescriptor, location, offsetY, new InfoWindow.OnInfoWindowClickListener() {
                 @Override
                 public void onInfoWindowClick() {
 

android/src/main/java/org/lovebing/reactnative/baidumap/view/OverlayMarker.java

@@ -10,12 +10,12 @@
 import android.annotation.TargetApi;
 import android.content.Context;
 import android.graphics.Bitmap;
-import android.graphics.Matrix;
 import android.graphics.drawable.Animatable;
 import android.net.Uri;
 import android.util.AttributeSet;
 
 import android.util.Log;
+import android.view.View;
 import android.view.ViewGroup;
 import android.widget.Button;
 
@@ -41,6 +41,7 @@
 
 import org.lovebing.reactnative.baidumap.R;
 import org.lovebing.reactnative.baidumap.model.IconInfo;
+import org.lovebing.reactnative.baidumap.util.BitmapUtil;
 
 import java.util.Objects;
 
@@ -60,6 +61,7 @@ public class OverlayMarker extends ViewGroup implements OverlayView, ClusterItem
     private OverlayInfoWindow overlayInfoWindow;
     private volatile boolean loadingImage = false;
     private InfoWindow titleInfoWindow;
+    private View iconView;
 
     private final ControllerListener<ImageInfo> imageControllerListener =
             new BaseControllerListener<ImageInfo>() {
@@ -157,6 +159,14 @@ public void setOverlayInfoWindow(OverlayInfoWindow overlayInfoWindow) {
         this.overlayInfoWindow = overlayInfoWindow;
     }
 
+    public void setIconView(View iconView) {
+        this.iconView = iconView;
+        if (marker != null) {
+            iconBitmapDescriptor = BitmapUtil.createBitmapDescriptor(iconView);
+            marker.setIcon(iconBitmapDescriptor);
+        }
+    }
+
     public String getTitle() {
         return title;
     }
@@ -181,14 +191,6 @@ public void setPosition(LatLng position) {
         }
     }
 
-    public BitmapDescriptor getIconBitmapDescriptor() {
-        return iconBitmapDescriptor;
-    }
-
-    public void setIconBitmapDescriptor(BitmapDescriptor iconBitmapDescriptor) {
-        this.iconBitmapDescriptor = iconBitmapDescriptor;
-    }
-
     public Float getRotate() {
         return rotate;
     }
@@ -200,21 +202,13 @@ public void setRotate(Float rotate) {
         }
     }
 
-    public Boolean getFlat() {
-        return flat;
-    }
-
     public void setFlat(Boolean flat) {
         this.flat = flat;
         if (marker != null) {
             marker.setFlat(flat);
         }
     }
 
-    public Boolean getPerspective() {
-        return perspective;
-    }
-
     public void setPerspective(Boolean perspective) {
         this.perspective = perspective;
         if (marker != null) {
@@ -253,23 +247,16 @@ public void setIcon(IconInfo iconInfo) {
     @Override
     public BitmapDescriptor getBitmapDescriptor() {
         BitmapDescriptor result;
-        if (getIconBitmapDescriptor() != null) {
-            result = getIconBitmapDescriptor();
+        if (iconBitmapDescriptor != null) {
+            result = iconBitmapDescriptor;
         } else {
             result = BitmapDescriptorFactory.fromResource(R.mipmap.icon_gcoding);
         }
         if (iconInfo != null
                 && iconInfo.getWidth() > 0
                 && iconInfo.getHeight() > 0) {
-            int height = result.getBitmap().getHeight();
-            int width = result.getBitmap().getWidth();
-            float scaleWidth = ((float) iconInfo.getWidth()) / width;
-            float scaleHeight = ((float) iconInfo.getHeight()) / height;
-            Matrix matrix = new Matrix();
-            matrix.postScale(scaleWidth, scaleHeight);
-
-            Bitmap newBitmap = Bitmap.createBitmap(result.getBitmap(), 0, 0, width, height, matrix, true);
-            result = BitmapDescriptorFactory.fromBitmap(newBitmap);
+            result = BitmapDescriptorFactory.fromBitmap(BitmapUtil.resizeBitmap(result.getBitmap(),
+                    iconInfo.getWidth(), iconInfo.getHeight()));
         }
         return result;
     }
@@ -297,6 +284,10 @@ public void removeFromMap(BaiduMap baiduMap) {
         if (marker != null) {
             marker.remove();
             marker = null;
+            overlayInfoWindow = null;
+            titleInfoWindow = null;
+            iconView = null;
+            iconBitmapDescriptor = null;
         }
     }
 
@@ -315,12 +306,13 @@ public int hashCode() {
     }
 
     private void addOverlay(BaiduMap baiduMap) {
-        BitmapDescriptor icon = getBitmapDescriptor();
+        if (iconView != null) {
+            iconBitmapDescriptor = BitmapUtil.createBitmapDescriptor(iconView);
+        }
         MarkerOptions option = new MarkerOptions()
                 .position(position)
-                .title(getTitle())
                 .alpha(getAlpha())
-                .icon(icon);
+                .icon(getBitmapDescriptor());
         if (rotate != null) {
             option.rotate(rotate);
         }

android/src/main/java/org/lovebing/reactnative/baidumap/view/OverlayMarkerIcon.java

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2016-present, lovebing.net.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package org.lovebing.reactnative.baidumap.view;
+
+import android.content.Context;
+import com.facebook.react.views.view.ReactViewGroup;
+
+/**
+ * @author lovebing
+ * @date 2020-06-07
+ */
+public class OverlayMarkerIcon extends ReactViewGroup {
+
+    public OverlayMarkerIcon(Context context) {
+        super(context);
+    }
+}