最近在做大数据的可视化分析,想做一个实施热力图,找到了mapv的模板,这样的:
然后我po一下网页的代码和数据:
`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#map {
width: 100%;
height: 100%;
}
#panel {
position:absolute;
left: 10px;
top: 10px;
background:rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 38px;
padding: 10px;
}
#loading {
position:absolute;
left: 50%;
top: 100px;
color: #fff;
background: rgba(0, 0, 0, 0.5);
padding: 20px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id='panel'></div>
<div id='loading'>加载中。。</div>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
<script type="text/javascript" src="../build/mapv.js"></script>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("map", {
enableMapClick: false
}); // 创建Map实例
map.centerAndZoom(new BMap.Point(123.23506 ,41.76230 ), 16); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
map.setMapStyle({
style: 'grayscale'
});
$.get('data/wangfujin.csv', function(csvstr) {
var dataSet = mapv.csv.getDataSet(csvstr);
dataSet.initGeometry();
var data = dataSet.get();
for (var i = 0; i < data.length; i++) {
var time = data[i].time;
data[i].time = new Date(time.substr(0, 4) + '-' + time.substr(4, 2) + '-' + time.substr(6, 2) + ' ' + time.substr(8, 2) + ':' + time.substr(10, 2) + ':' + time.substr(12, 2)).getTime();
}
dataSet.set(data);
var options = {
size: 100,
unit: 'm',
gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"},
max: dataSet.getMax('count'),
animation: {
type: 'time',
/*
stepsRange: {
start: 0,
end: 100
},
*/
trails: 29 * 60 * 1000,
duration: 15,
},
updateCallback: function(e) {
var time = new Date(e);
$('#panel').html("时间" + time.getFullYear() + '年' + (time.getMonth() + 1)+ '月' + time.getDate() + '日' + time.getHours() + ':' + time.getMinutes());
},
coordType: 'bd09mc',
draw: 'heatmap'
}
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
$('#loading').hide();
});
</script>
</body>
</html>
`
数据是csv格式:
`lng,lat,time,count
12959650,4826550,20151223000000 ,3
12959850,4827350,20151223000000 ,45
12959750,4826850,20151223000000 ,30
12959950,4827650,20151223000000 ,19
12959950,4827850,20151223000000 ,5
12960250,4827550,20151223000000 ,16
12960150,4826650,20151223000000 ,13
12959950,4826850,20151223000000 ,20
12959750,4827250,20151223000000 ,15
12960350,4826750,20151223000000 ,2
12959850,4827450,20151223000000 ,16
12960050,4827650,20151223000000 ,13
12959450,4827450,20151223000000 ,2
12960350,4826850,20151223000000 ,9
12959250,4827150,20151223000000 ,17
12959550,4827750,20151223000000 ,24
12959650,4827750,20151223000000 ,19
12959550,4826850,20151223000000 ,39
12959850,4827150,20151223000000 ,4
12959550,4826550,20151223000000 ,1
12960350,4827350,20151223000000 ,44
12959850,4827250,20151223000000 ,13
12960050,4827450,20151223000000 ,1
12959250,4827550,20151223000000 ,6
12959350,4827450,20151223000000 ,9
12959750,4826550,20151223000000 ,6
12960150,4827350,20151223000000 ,26
12960450,4827150,20151223000000 ,38
12959650,4826850,20151223000000 ,19
12959950,4827450,20151223000000 ,3
12959950,4827750,20151223000000 ,8
12960050,4826950,20151223000000 ,33
12960450,4827250,20151223000000 ,35
12960250,4826650,20151223000000 ,9
12959450,4827350,20151223000000 ,26
12959450,4826750,20151223000000 ,31
12959550,4827350,20151223000000 ,11
12960350,4827050,20151223000000 ,42
12959750,4827150,20151223000000 ,7
12959850,4826750,20151223000000 ,12
12960150,4827450,20151223000000 ,12
12959250,4827250,20151223000000 ,7
12960050,4826550,20151223000000 ,2
12960250,4827450,20151223000000 ,26
12959150,4827050,20151223000000 ,10
12959750,4827350,20151223000000 ,34
12959350,4827550,20151223000000 ,29
12959850,4826850,20151223000000 ,18
12959650,4826650,20151223000000 ,21
12959650,4826950,20151223000000 ,24
12960050,4826850,20151223000000 ,15
12960250,4826950,20151223000000 ,47
12959150,4826950,20151223000000 ,9
12959650,4827350,20151223000000 ,22`
其中的一部分
然后我将地图的中心点换到沈阳(我的数据所在地),然后把数据换成我的沈阳的数据,结果就只有时间栏和地图能出来,热力图出不来了,
想问一下这是什么原因。
我的数据:
`lng,lat,time,count
12347120,4180270,20181001150000 ,1
12333250,4181990,20181002010000 ,1
12318800,4176990,20181002090000 ,1
12347110,4180280,20181002090000 ,1
12334280,4168100,20181002100000 ,1
12334710,4178950,20181002100000 ,1
12339560,4179010,20181002100000 ,1
12341730,4185960,20181002100000 ,1
12282390,4201220,20181002110000 ,1
12334100,4142940,20181002110000 ,1
12334360,4178830,20181002110000 ,1
12334620,4178720,20181002110000 ,1
12337260,4179480,20181002110000 ,1
12339870,4165660,20181002110000 ,2
12340000,4170000,20181002110000 ,1
12340000,4180250,20181002110000 ,1
12340300,4192230,20181002110000 ,1
12341130,4181540,20181002110000 ,1
12341410,4189190,20181002110000 ,1
12341860,4185620,20181002110000 ,1
12341900,4180430,20181002110000 ,1
12344990,4178370,20181002110000 ,1
12345900,4178770,20181002110000 ,2
12252680,4148010,20181002120000 ,1
12333700,4177950,20181002120000 ,1
12334250,4179890,20181002120000 ,1
12334360,4178830,20181002120000 ,1
12340000,4180250,20181002120000 ,2
12340810,4180640,20181002120000 ,1
12340870,4185220,20181002120000 ,1
12341280,4181580,20181002120000 ,1
12341360,4181680,20181002120000 ,1
12342280,4180550,20181002120000 ,1
12342280,4181240,20181002120000 ,1
12342700,4178300,20181002120000 ,1
12345430,4180000,20181002120000 ,1
12346840,4180610,20181002120000 ,1
12347110,4180280,20181002120000 ,2
12348120,4182010,20181002120000 ,1
12349930,4220930,20181002120000 ,1
12373720,4186550,20181002120000 ,2
12267520,4152080,20181002130000 ,1
12315450,4169550,20181002130000 ,1
12318570,4176620,20181002130000 ,1
12333500,4180840,20181002130000 ,1
12334000,4183540,20181002130000 ,1
12334100,4142940,20181002130000 ,1
12339820,4178930,20181002130000 ,1
12340880,4179100,20181002130000 ,1
12341100,4181040,20181002130000 ,1
12341190,4180700,20181002130000 ,1
12341590,4180770,20181002130000 ,1
12341660,4181000,20181002130000 ,1
12341760,4185370,20181002130000 ,1
12342090,4178140,20181002130000 ,1
12342670,4180050,20181002130000 ,1
12342790,4180070,20181002130000 ,1
12343120,4180840,20181002130000 ,1
12343380,4177340,20181002130000 ,2
12346970,4180320,20181002130000 ,1
12356000,4158810,20181002130000 ,1
12397400,4202220,20181002130000 ,1
12400020,4182400,20181002130000 ,1
12332260,4141400,20181002140000 ,1
12333450,4193780,20181002140000 ,3
12337310,4179330,20181002140000 ,1
12339560,4179010,20181002140000 ,1
12339800,4180830,20181002140000 ,1
12339870,4165660,20181002140000 ,1
12340030,4179270,20181002140000 ,1
12340610,4179850,20181002140000 ,1
12340780,4179390,20181002140000 ,1
12341170,4183080,20181002140000 ,1
12341360,4181680,20181002140000 ,1`