/huiyan-fe/mapv
Mapv 是一款地理信息可视化开源库，可以用来展示大量地理信息数据，点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据。 当前是Mapv 2.0的预发布版本，当前api是不稳定的并有可能随时发生变化。
利用mapV实现简单的热力图
新建bmap
var bmap = new BMap.Map('center_box', {enableMapClick: false,minZoom: 4});bmap.enableScrollWheelZoom(); // 启用滚轮放大缩小bmap.getContainer().style.background = '#081734';//设置背景颜色bmap.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5); // 初始化地图,设置中心点坐标和地图级别
创建mapv实例
// 使用mapv第一步：创建mapv实例var mapv = new Mapv({drawTypeControl: true,map: bmap // 百度地图的map实例});
数据处理
var data = []; // 取城市的点来做示例展示的点数据//数据项处理data = data.concat(getCityCenter(cityData.municipalities));//municipalities、provinces、others分别是数据项名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;};
配置layer 以及 drawOptions
//配置layer 以及 drawOptions //其他具体属性参见/huiyan-fe/mapv/wiki/%E7%B1%BB%E5%8F%82%E8%80%83var layer = new Mapv.Layer({mapv: mapv, // 对应的mapv实例zIndex: 1, // 图层层级dataType: 'point', // 数据类型，点类型data: data, // 数据drawType: 'heatmap', // 展示形式drawOptions: {// 绘制参数//shadowBlur: 15, // 是否有模糊效果unit: 'm', // 单位,px:像素(默认),m:米max: 10, // 设置显示的权重最大值type: 'circle', // 点形状,可选circle:圆形(默认),rect:矩形size: 70000, // 半径大小maxOpacity: 0.8,//最大透明度gradient: {// 显示的颜色渐变范围'0': 'blue','0.6': 'cyan','0.7': 'lime','0.8': 'yellow','1.0': 'red'}}});
最终展示效果：
数据样例展示
var cityData ={municipalities: [{n: "北京",g: "116.395645,39.929986|12"}, {n: "上海",g: "121.487899,31.249162|12"}, {n: "天津",g: "117.210813,39.14393|12"}, {n: "重庆",g: "106.530635,29.544606|12"}],provinces: [{n: "安徽",g: "117.216005,31.859252|8",cities: [{n: "合肥",g: "117.282699,31.866942|12"}, {n: "安庆",g: "117.058739,30.537898|13"}, {n: "蚌埠",g: "117.35708,32.929499|13"}, {n: "亳州",g: "115.787928,33.871211|13"}, {n: "巢湖",g: "117.88049,31.608733|13"}, {n: "池州",g: "117.494477,30.660019|14"}, {n: "滁州",g: "118.32457,32.317351|13"}, {n: "阜阳",g: "115.820932,32.901211|13"}, {n: "淮北",g: "116.791447,33.960023|13"}, {n: "淮南",g: "117.018639,32.642812|13"}, {n: "黄山",g: "118.29357,29.734435|13"}, {n: "六安",g: "116.505253,31.755558|13"}, {n: "马鞍山",g: "118.515882,31.688528|13"}, {n: "宿州",g: "116.988692,33.636772|13"}, {n: "铜陵",g: "117.819429,30.94093|14"}, {n: "芜湖",g: "118.384108,31.36602|12"}, {n: "宣城",g: "118.752096,30.951642|13"}]},{}，{}]
