First on the renderings. as follows:
This map is a scatter plot of the effect of the end of the web, using Echarts properly achieved, but the effect is a bit difficult to achieve at the end of Android.
Web terminal (BS side) echarts Address:
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
Here is the web address end echarts effect its implementation.
Then the Android end to achieve this effect is how to handle it?
Maps, scatter plots, scatter plot map corresponding to (focus): First of all, under the simple needs analysis.
Map: Android end of the introduction Baidu map, very simple. (Here do not understand can go see Baidu's Developer's Guide, a detailed introduction, there are many Internet-related articles.)
Scatter: Scatter here primarily processing data (post-treatment values in different colors according to the size of the display) to have a latitude and longitude for each point (corresponding point on the map, ease of illustration), have values .
Scatter the corresponding map, that map to achieve a scatter plot.
This method is implemented, is relatively simple, is to add a custom mark. (In fact, before I thought about other options, such as the introduction Html page directly in the Android project, the page map is used echart achieve a scatter plot, however, we found that the effect achieved after very unsatisfactory, such as: I project there are quite a few maps PS: not so UI design approach, each map colors are the same, the results of this Html page color map in the yellow side another example: the scatter plot separation point and drag the map , giving a feeling of Caton ... and so on it, anyway, is not used. so back to square one, use the Android Baidu map to do it.)
//添加自定义的彩色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;
}The above-described two methods can add a small dot on the map, then there is a problem, how to judge the corresponding gradient values according to the size, to add color scattergram.
There is also a way to return to a different color (gradient) according to the value (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;
}At this point, you can be free to add your desired color in the map.
We come back to the idea stroked a stroke, was first introduced Baidu map, then deal with what you scatter plot of the data, the data must be at least latitude and longitude, latitude and longitude have each corresponding value, followed by the addition of custom marker of the way, you add the scatter plot of the color gradient. Here Android version of Baidu map scatter plot is complete. Since the complete code in the project, inconvenience upload, only upload these critical code snippets, please understand.