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

2,718 阅读3分钟
原文链接: www.licoy.cn

前言

不知不觉,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: