前言

不知不觉，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集合传递给这个函数来进行绘制操作。

后记

新年马上就快要到了，提前恭祝各位小伙伴新年快乐！ :mrgreen: