android 实现仿Echarts百度地图散点图

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014619545/article/details/81260267

 先上效果图。如下:

这个地图散点图的效果是在web端的,使用Echarts很好实现,但是在Android端要实现这个效果就有点困难了。 

Web端(BS端)的echarts地址:

http://echarts.baidu.com/option.html#geo 

http://echarts.baidu.com/blog/2016/04/28/echarts-map-tutorial.html

http://echarts.baidu.com/blog/2016/06/13/echarts-map-tutorial.html

此处的地址是web端echarts的效果及其实现。

那么在Android端要实现这个效果该怎么处理呢?

首先,简单分析下需求:地图、散点图、地图对应散点图(重点)。 

 地图:Android端引入百度地图,很简单。(此处不明白的可以去查看百度的开发者指南,有详细的介绍,网上的相关文章也很多。)

散点图:这里的散点图主要是数据的处理,对于每个点要有个经纬度(对应地图上的点,便于显示)、要有个值(处理后根据值的大小显示不同的颜色)。

地图对应散点图,即实现地图散点图。

这个实现的方法,也比较简单,就是添加自定义的mark。(其实,之前我也想过其他的方案,比如直接在Android项目中引入Html页面,页面中使用echart实现地图散点图。但是,实现后发现效果,非常不尽如人意。比如:我项目中有好几张地图PS:UI这么设计的没办法,每张的地图颜色都一样的,结果这个Html中的地图页面颜色偏黄色。再比如:这个散点图在拖动时点和地图会分离,给人一种卡顿的感觉。。。等等吧,反正就是不好用。于是又回到了起点,使用Android百度地图去做。)

//添加自定义的彩色marker
//latLng:点的经纬度  color:点的颜色
public void customAddViewMarker(LatLng latLng, int color) {  

    Marker marker;
    OverlayOptions options;
//获得对应颜色的BitmapDescripto
    BitmapDescriptor bitmap = getMarkerBigBitmap(color); 
    //设置marker
    options = new MarkerOptions()
            .position(latLng)//设置位置
            .icon(bitmap)//设置图标样式
            .zIndex(7) // 设置marker所在层级
            .draggable(true); // 设置手势拖拽;
    //添加marker
    marker = (Marker) mBaiduMap.addOverlay(options);
    //  mBaiduMap.setOnMarkerClickListener(onMarkerClick);
}
//获得对应颜色的BitmapDescriptor 
private BitmapDescriptor getMarkerBigBitmap(int color) { //给一个要展示的颜色
    View view = LayoutInflater.from(mContext).inflate(R.layout.circle_view_ditu, null); 

    //circle_view_ditu是小圆点的图片
    ImageView image = view.findViewById(R.id.circle_view_ditu);
    image.setColorFilter(color);//给小圆点填充颜色
    view.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
            View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
    view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
    view.buildDrawingCache();
    Bitmap bitmap = view.getDrawingCache();
    BitmapDescriptor bitmap1 = BitmapDescriptorFactory.fromBitmap(bitmap);
    return bitmap1;
}

上述两个方法就可以在地图上添加小圆点了,接下来还有一个问题,怎么根据数值的大小判断其对应的渐变色,从而添加彩色的散点图。
这里也有一个方法,来根据数值(0-1)来返回不同的颜色(渐变色)。

/**
* 获取数据对应的渐变色中的颜色
*
* @param dataPercent 某数据在总数据中的大致位置(例如:1-9,1在第一个,9在最后一个,转换成百分比就*是1-1/9-1,2-1/9-1……,每个值都减去最小值再除以最大值减去最小值,其实就是一句话,把数据换成从0开始*的,算出每个数字占的百分比就行。)
* @param Color_Start 渐变开始的颜色 //渐变色嘛,开始的颜色对应的是0
* @param Color_END   渐变结束的颜色// 结束的颜色对应的是1
* @return 某数据在渐变色中应该对应的颜色 //返回值就是对应渐变色的颜色了
*/
public int getColorByData(float dataPercent, int Color_Start, int Color_END) {
    ArgbEvaluator argbEvaluator = new ArgbEvaluator();
    int color = (int) argbEvaluator.evaluate(dataPercent, Color_Start, Color_END);
    return color;
}

至此,你就可以可以随心所欲的在地图添加你想要的颜色了。

我们再来把思路捋一捋,首先引入百度地图,然后处理一下你的散点图数据,数据至少要有经纬度、要有每个经纬度对应的值,接着就是通过添加自定义marker的方式,添加你的彩色渐变色的散点图了。到这里Android版的百度地图散点图就完成了。由于完整的代码在项目里,不便上传,只能上传这几个关键的代码片段,请谅解。

猜你喜欢

转载自blog.csdn.net/u014619545/article/details/81260267