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

时间:2012-09-22 10:12:55

标签: charts maps google-maps-markers pie-chart

有人知道如何使用动态饼图重建与群集/群组标记 Batchgeo 类似的内容吗?

示例:batchgeo map with pie clustering

谢谢,

此致

3 个答案:

答案 0 :(得分:0)

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

我会在Google地图上研究群集示例: https://developers.google.com/maps/articles/toomanymarkers

其中很好地涵盖了群集...那么您需要查看将标记图像更改为对Google Charts的调用: https://developers.google.com/chart/image/docs/gallery/pie_charts

注意:不推荐使用此功能并将支持2015年支持...但我相信BatchGeo会使用它。

此处还有一个示例可能会帮助您使用自定义群集标记图像,我无法发布(仅限于2个链接)(例如Hearts,People等... CLUSTER STYLE)。如果你是谷歌的谷歌地图v3群集示例,你应该在最佳结果中找到它。

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

此致

詹姆斯

答案 1 :(得分:0)

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

答案 2 :(得分:0)

很晚了,但是我需要使用Google地图复制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);
    }
}

在此附上截图以供参考: enter image description here