mapv
Version:
a library of geography visualization
109 lines (91 loc) • 3.24 kB
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(116.417471,39.92361), 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: 90,
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>