charts - 谷歌地图上的饼图聚类[batchgeo-like]

Question

任何人都知道如何重新制作类似于Batchgeo在使用动态饼图对标记进行集群/分组时所做的事情？

示例：带有饼图聚类的批处理地理地图

谢谢，

问候

Answer 1

我没有完整的操作方法，但确实有一些可能对您有所帮助并且似乎被 BatchGeo 使用的指针。

我会研究谷歌地图上的集群示例： https ://developers.google.com/maps/articles/toomanymarkers

这很好地涵盖了集群......然后你需要考虑将标记图像更改为对谷歌图表的调用： https ://developers.google.com/chart/image/docs/gallery/pie_charts

注意：这已被弃用，并将放弃对 2015 年的支持......但我相信 BatchGeo 会使用它。

这里还有一个示例可以帮助您使用自定义集群标记图像，我无法发布（仅限于 2 个链接）（例如在 CLUSTER STYLE 中设置的 Hearts、People 等） . 如果您在 Google 上搜索“谷歌地图 v3 集群示例”，您应该会在顶部结果中找到它。

如果你把所有这些放在一起，那么我认为你应该到达那里。

问候，

詹姆士

Answer 2

我需要解决同样的问题，所以我通过扩展 Google Maps Marker Cluster Library 以使用饼图而不是集群标记来解决它。您可以从我的 GitHub 存储库下载解决方案：https ://github.com/hassanlatif/chart-marker-clusterer

Answer 3

很晚了，但我需要使用谷歌地图复制 BatchGeo 地图。所以在这里我展示了我的 CustomRendererClass，我用它来绘制 PieChart 作为具有集群大小的集群图标。根据您的自定义要求传递数据集。

public class TbmClusterRenderer extends DefaultClusterRenderer<VenueItemData> {

    private IconGenerator mClusterIconGenerator;
    private Context context;

    public TbmClusterRenderer(Context context, GoogleMap map,
                              ClusterManager<VenueItemData> clusterManager) {
        super(context, map, clusterManager);
        this.context = context;
        mClusterIconGenerator = new IconGenerator(context);
    }

    @Override
    protected void onBeforeClusterItemRendered(VenueItemData item,
                                               MarkerOptions markerOptions) {

        try {
            int markerColor = item.getMarkerColor();
            Bitmap icon;
            icon = BitmapFactory.decodeResource(context.getResources(),
                    R.drawable.map_marker).copy(Bitmap.Config.ARGB_8888, true);
            Paint paint = new Paint();
            ColorFilter filter = new PorterDuffColorFilter(markerColor,
                    PorterDuff.Mode.SRC_IN);
            paint.setColorFilter(filter);
            Canvas canvas = new Canvas(icon);
            canvas.drawBitmap(icon, 0, 0, paint);

            markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon));
        } catch (Exception ex) {
            ex.printStackTrace();
            Crashlytics.logException(ex);
        }
    }

    @Override
    protected void onClusterItemRendered(VenueItemData clusterItem, Marker marker) {
        super.onClusterItemRendered(clusterItem, marker);
    }

    @Override
    protected void onBeforeClusterRendered(Cluster<VenueItemData> cluster, MarkerOptions markerOptions) {
        ArrayList<VenueItemData> a = (ArrayList<VenueItemData>) cluster.getItems();
        Canvas canvas;
        @SuppressLint("UseSparseArrays")
        HashMap<Integer, Integer> markerColors = new HashMap<>();
//        ConcurrentHashMap<Integer, Integer> markerColors = new ConcurrentHashMap<>();
        for (VenueItemData data : a) {
            if (data.getMarkerColor() != 0) {
                if (!markerColors.containsValue(data.getMarkerColor())) {
                    markerColors.put(data.getMarkerColor(), 0);
                }
            }
        }
        Set set = markerColors.entrySet();
        Iterator iterator = set.iterator();
        while (iterator.hasNext()) {
            Object aSet = iterator.next();
            Map.Entry<Integer, Integer> entry = (Map.Entry<Integer, Integer>) aSet;
            for (VenueItemData data : a) {
                if (data.getMarkerColor() == entry.getKey()) {
                    entry.setValue(entry.getValue() + 1);
                }
            }
        }

        Log.e("graph values", new Gson().toJson(markerColors));
        Bitmap myBitmap = Bitmap.createBitmap(70, 70, Bitmap.Config.ARGB_8888);
        canvas = new Canvas(myBitmap);
        Paint paint = new Paint();
        paint.setAntiAlias(true);

        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(1f);
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        RectF rectf = new RectF(2, 2, myBitmap.getWidth() - 2, myBitmap.getHeight() - 2);
        set = markerColors.entrySet();
        float startAngle = 0.0f;
        for (Object aSet : set) {
            Map.Entry<Integer, Integer> entry = (Map.Entry<Integer, Integer>) aSet;
            float angle = (360.0f / (float) cluster.getSize()) * (float) entry.getValue();
            paint.setColor(entry.getKey());
            canvas.drawArc(rectf, startAngle, angle, true, paint);
            startAngle += angle;
        }

        BitmapDrawable clusterIcon = new BitmapDrawable(context.getResources(), myBitmap);
        if (set.isEmpty()) {
            mClusterIconGenerator.setBackground(context.getResources().getDrawable(R.drawable.circle1));
        } else {
            mClusterIconGenerator.setBackground(clusterIcon);
        }
        mClusterIconGenerator.setTextAppearance(R.style.ClusterTextAppearance);
        Bitmap icon = mClusterIconGenerator.makeIcon(String.valueOf(cluster.getSize()));
        markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon));
        mClusterIconGenerator.setContentPadding(20, 20, 20, 20);
    }
}

这里我附上截图供参考：