使用百度地图+经纬度绘制数据可视化地理分布

9,609次阅读

共计 1489 个字符，预计需要花费 4 分钟才能阅读完成。

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

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