前言
不知不觉,2017年已经过去了,而2018年的第一个月也快要接近尾声了,不得不感叹时间过得真的很快,由于自己最近一直很忙,所以没有时间来更新博客,导致博客短更接近一个多月,在这里给支持我的小伙伴们说声抱歉。
正文
最近,由于业务需求,需要实现数据的海量点的坐标图,来进行数据的可视化展现与分析,大概的实现效果图如下:
由上图分析,可见与百度地图中的加载海量点DEMO的效果类似,于是就采用海量点来进行实现这个效果:
首先,我们需要创建一个Map实例与设置地图的中心点坐标与图像级别:
var map = new BMap.Map("map", {});
map.centerAndZoom(new BMap.Point(110.000, 36.000), 6);
map.enableScrollWheelZoom();
这里,我们设置一下地图的主题,这里分享一个我们自定义的暗黑系列主题:
var style_map = [
{
"featureType": "background",
"elementType": "all",
"stylers": {
"color": "#39437bff"
}
},
{
"featureType": "road",
"elementType": "all",
"stylers": {
"color": "#011438ff"
}
}
];
//使用
map.setMapStyle({
styleJson:style_map
});
接着,我们从后端接口取出对应的数据,数据中包含每个点位置的经纬度,然后再根据每个经纬度创建Point实例,并保存到对应的list集合中:
//后端请求,以下以data作为返回数据体
var points = [];
$.each(data,function (index,el) {
var poi = new BMap.Point(el[1], el[0]);
points.push(poi);
});
以上将点的Point实例创建完成之后,接着就要开始绘制,根据官方的DEMO首先需要判断一下是否支持绘制海量点,然后在设置相关的参数:
if (document.createElement('canvas').getContext) { // 判断当前浏览器是否支持绘制海量点
var options = {
size: BMAP_POINT_SIZE_BIG, //枚举尺寸,参考:http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a3b23
shape: BMAP_POINT_SHAPE_CIRCLE, //枚举形状,参考:http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a3b22
color: '#db2e3169' //颜色值,此处颜色值效果是红色半透明
};
var pointCollection = new BMap.PointCollection(points, options); // 初始化PointCollection
map.addOverlay(pointCollection);
} else {
alert('请在chrome、safari、IE8+以上浏览器查看本示例');
}
将以上代码结合,就实现了预设图的效果,不过要注意的是,在异步请求的时候,不能将上述绘制代码写在成功的回调函数中,否则会没有效果,可以在外定义一个函数,然后成功之后将Point实例创建完成之后把list集合传递给这个函数来进行绘制操作。
后记
新年马上就快要到了,提前恭祝各位小伙伴新年快乐!