前言
在学习使用百度地图API的时候，必定会涉及到相关的开源库。下面主要介绍一部分JavaScript开源库，有大数据可视化库、热力图和添加标注工具。
大数据可视化库
Mapv是一组基于百度地图的大数据可视化库，可以用来展示大量的点、线、面数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据。
测试源码
<!DOCTYPE html><html><head> <title>大数据可视化库</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="./css/style.css" /> <script type="text/javascript" src="./js/jquery.min.js"></script> <script src="http://api.map.baidu.com/api?v=2.0&ak=DDd05fcba9fea5b83bf648515e04fc4c" type="text/javascript"></script></head><body><div id="map"></div><script type="text/javascript" src="./js/Mapv.min.js"></script><script type="text/javascript" src="./js/BaiduMap_cityCenter.js"></script><script type="text/javascript" src="./js/example.js"></script><script type="text/javascript"> bmap.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5); var mapv = new Mapv({ drawTypeControl: true, map: bmap }); var data = []; data = data.concat(getCityCenter(cityData.municipalities)); data = data.concat(getCityCenter(cityData.provinces)); data = data.concat(getCityCenter(cityData.other)); for (var i = 0; i < cityData.provinces.length; i++) { var citys = cityData.provinces[i].cities; data = data.concat(getCityCenter(citys)); } function getCityCenter(citys) { var data = []; for (var i = 0; i < citys.length; i++) { var city = citys[i]; var center = city.g.split('|')[0]; center = center.split(','); data.push({ lng: center[0], lat: center[1], count: Math.random() * 10 }); } return data; }; var layer = new Mapv.Layer({ mapv: mapv, zIndex: 1, dataType: 'point', dataRangeControl: true, data: data, drawType: 'intensity', drawOptions: { size: 5, gradient: { '0': 'blue', '0.6': 'cyan', '0.7': 'lime', '0.8': 'yellow', '1.0': 'red' } } });</script></body></html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
测试结果
热力图
提供热力图可视化展现功能，注: 支持chrome, safari, IE9及以上的浏览器. 核心的代码主要来自于第三方heatmap.js, 主入口类是HeatmapOverlay， 基于Baidu Map API 2.0。
测试源码
<!DOCTYPE html><html><head> <title>热力图</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="./css/style.css" /> <script src="http://api.map.baidu.com/api?v=2.0&ak=DDd05fcba9fea5b83bf648515e04fc4c" type="text/javascript"></script> <script type="text/javascript" src="./js/Heatmap_min.js"></script> <style type="text/css"> ul,li{list-style: none;margin:0;padding:0;float:left;} html{height:100%} body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";} #container{height:600px;width:100%;} #r-result{width:100%;} </style></head><body> <div id="container"></div> <div id="r-result"> <input type="button" onclick="openHeatmap();" value="显示热力图"/><input type="button" onclick="closeHeatmap();" value="关闭热力图"/> </div><script type="text/javascript"> var map = new BMap.Map("container"); var point = new BMap.Point(116.418261, 39.921984); map.centerAndZoom(point, 15); map.enableScrollWheelZoom(); var points =[ {"lng":116.418261,"lat":39.921984,"count":50}, {"lng":116.423332,"lat":39.916532,"count":51}, {"lng":116.419787,"lat":39.930658,"count":15}, {"lng":116.418455,"lat":39.920921,"count":40}, {"lng":116.418843,"lat":39.915516,"count":100}, {"lng":116.42546,"lat":39.918503,"count":6}, {"lng":116.423289,"lat":39.919989,"count":18}, {"lng":116.418162,"lat":39.915051,"count":80}, {"lng":116.422039,"lat":39.91782,"count":11}, {"lng":116.41387,"lat":39.917253,"count":7}, {"lng":116.41773,"lat":39.919426,"count":42}, {"lng":116.421107,"lat":39.916445,"count":4}, {"lng":116.417521,"lat":39.917943,"count":27}, {"lng":116.419812,"lat":39.920836,"count":23}, {"lng":116.420682,"lat":39.91463,"count":60}, {"lng":116.415424,"lat":39.924675,"count":8}, {"lng":116.419242,"lat":39.914509,"count":15}, {"lng":116.422766,"lat":39.921408,"count":25}, {"lng":116.421674,"lat":39.924396,"count":21}, {"lng":116.427268,"lat":39.92267,"count":1}, {"lng":116.417721,"lat":39.920034,"count":51}, {"lng":116.412456,"lat":39.92667,"count":7}, {"lng":116.420432,"lat":39.919114,"count":11}, {"lng":116.425013,"lat":39.921611,"count":35}, {"lng":116.418733,"lat":39.931037,"count":22}, {"lng":116.419336,"lat":39.931134,"count":4}, {"lng":116.413557,"lat":39.923254,"count":5}, {"lng":116.418367,"lat":39.92943,"count":3}, {"lng":116.424312,"lat":39.919621,"count":100}, {"lng":116.423874,"lat":39.919447,"count":87}, {"lng":116.424225,"lat":39.923091,"count":32}, {"lng":116.417801,"lat":39.921854,"count":44}, {"lng":116.417129,"lat":39.928227,"count":21}, {"lng":116.426426,"lat":39.922286,"count":80}, {"lng":116.421597,"lat":39.91948,"count":32}, {"lng":116.423895,"lat":39.920787,"count":26}, {"lng":116.423563,"lat":39.921197,"count":17}, {"lng":116.417982,"lat":39.922547,"count":17}, {"lng":116.426126,"lat":39.921938,"count":25}, {"lng":116.42326,"lat":39.915782,"count":100}, {"lng":116.419239,"lat":39.916759,"count":39}, {"lng":116.417185,"lat":39.929123,"count":11}, {"lng":116.417237,"lat":39.927518,"count":9}, {"lng":116.417784,"lat":39.915754,"count":47}, {"lng":116.420193,"lat":39.917061,"count":52}, {"lng":116.422735,"lat":39.915619,"count":100}, {"lng":116.418495,"lat":39.915958,"count":46}, {"lng":116.416292,"lat":39.931166,"count":9}, {"lng":116.419916,"lat":39.924055,"count":8}, {"lng":116.42189,"lat":39.921308,"count":11}, {"lng":116.413765,"lat":39.929376,"count":3}, {"lng":116.418232,"lat":39.920348,"count":50}, {"lng":116.417554,"lat":39.930511,"count":15}, {"lng":116.418568,"lat":39.918161,"count":23}, {"lng":116.413461,"lat":39.926306,"count":3}, {"lng":116.42232,"lat":39.92161,"count":13}, {"lng":116.4174,"lat":39.928616,"count":6}, {"lng":116.424679,"lat":39.915499,"count":21}, {"lng":116.42171,"lat":39.915738,"count":29}, {"lng":116.417836,"lat":39.916998,"count":99}, {"lng":116.420755,"lat":39.928001,"count":10}, {"lng":116.414077,"lat":39.930655,"count":14}, {"lng":116.426092,"lat":39.922995,"count":16}, {"lng":116.41535,"lat":39.931054,"count":15}, {"lng":116.413022,"lat":39.921895,"count":13}, {"lng":116.415551,"lat":39.913373,"count":17}, {"lng":116.421191,"lat":39.926572,"count":1}, {"lng":116.419612,"lat":39.917119,"count":9}, {"lng":116.418237,"lat":39.921337,"count":54}, {"lng":116.423776,"lat":39.921919,"count":26}, {"lng":116.417694,"lat":39.92536,"count":17}, {"lng":116.415377,"lat":39.914137,"count":19}, {"lng":116.417434,"lat":39.914394,"count":43}, {"lng":116.42588,"lat":39.922622,"count":27}, {"lng":116.418345,"lat":39.919467,"count":8}, {"lng":116.426883,"lat":39.917171,"count":3}, {"lng":116.423877,"lat":39.916659,"count":34}, {"lng":116.415712,"lat":39.915613,"count":14}, {"lng":116.419869,"lat":39.931416,"count":12}, {"lng":116.416956,"lat":39.925377,"count":11}, {"lng":116.42066,"lat":39.925017,"count":38}, {"lng":116.416244,"lat":39.920215,"count":91}, {"lng":116.41929,"lat":39.915908,"count":54}, {"lng":116.422116,"lat":39.919658,"count":21}, {"lng":116.4183,"lat":39.925015,"count":15}, {"lng":116.421969,"lat":39.913527,"count":3}, {"lng":116.422936,"lat":39.921854,"count":24}, {"lng":116.41905,"lat":39.929217,"count":12}, {"lng":116.424579,"lat":39.914987,"count":57}, {"lng":116.42076,"lat":39.915251,"count":70}, {"lng":116.425867,"lat":39.918989,"count":8}]; if(!isSupportCanvas()){ alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~') } heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20}); map.addOverlay(heatmapOverlay); heatmapOverlay.setDataSet({data:points,max:100}); closeHeatmap(); function isSupportCanvas(){ var elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d')); } function setGradient(){ var gradient = {}; var colors = document.querySelectorAll("input[type='color']"); colors = [].slice.call(colors,0); colors.forEach(function(ele){ gradient[ele.getAttribute("data-key")] = ele.value; }); heatmapOverlay.setOptions({"gradient":gradient}); } function openHeatmap(){ heatmapOverlay.show(); } function closeHeatmap(){ heatmapOverlay.hide(); }</script></body></html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
运行结果
添加标注工具
百度地图的添加标注工具类，对外开放。 允许用户在地图上点击后添加一个点标注，允许用户设定标注的图标样式。 主入口类是MarkerTool， 基于Baidu Map API 1.2。
测试源码
<!DOCTYPE html><html><head> <title>MarkerTool使用示例</title> <script src="http://api.map.baidu.com/api?v=2.0&ak=DDd05fcba9fea5b83bf648515e04fc4c" type="text/javascript"></script> <script type="text/javascript" src="./js/MarkerTool_min.js"></script></head><body><div align="center"> <div id="map" style="height: 550px;width: 95%;"></div> <button onclick="javascript:mkTool.open();">打开</button> <button onclick="javascript:mkTool.close();">关闭</button></div><script type="text/javascript"> var map = new BMap.Map("map"); var point = new BMap.Point(116.404,39.915); map.centerAndZoom(point,15); map.enableScrollWheelZoom(); var mkTool = new BMapLib.MarkerTool(map,{autoClose:false,followText:"连续添加标注[http://blog.csdn.net/u010989191]"});</script></body></html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
测试结果
总结
本文主要介绍了百度地图javascript库中的大数据可视化库、热力图和添加标注工具。
