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

6,756次阅读
7条评论

前言

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

后记

新年马上就快要到了,提前恭祝各位小伙伴新年快乐!使用百度地图

6
憧憬Licoy
版权声明:本站原创文章,由 憧憬Licoy2018-01-30发表,共计1489字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(7条评论)
验证码
载入中...
广州网站建设 评论达人 LV.2
2018-06-07 12:01:15 回复

好久没有更新了

WindowsWindowsChromeChrome48.0.2564.116
九四社区 评论达人 LV.1
2018-05-28 17:17:39 回复

厉害了,还可以这样玩

WindowsWindowsChromeChrome55.0.2883.87
明月清风 评论达人 LV.1
2018-04-05 18:39:44 回复

这个关系数据好多,密集恐惧了

AndroidAndroidChromeChrome33.0.0.0
姜辰 评论达人 LV.1
2018-02-07 12:11:36 回复

默默的仰望,脖子有点酸。

WindowsWindowsFirefoxFirefox58.0