mapv
Version:
a library of geography visualization
163 lines (142 loc) • 6.37 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%;
}
#time {
position: absolute;
text-align: center;
top: 10px;
left: 50%;
width: 100px;
margin-left: -50px;
color: yellow;
font-size: 28px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="time"></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(105.403119, 38.028658), 5); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
map.setMapStyle({
style: 'midnight'
});
var randomCount = 1000;
var data = [];
var cityData = [
{city: '北京',time: 9, count: 100 * Math.random()},
{city: '北京',time: 10, count: 100 * Math.random()},
{city: '北京',time: 11, count: 100 * Math.random()},
{city: '北京',time: 12, count: 100 * Math.random()},
{city: '北京',time: 13, count: 100 * Math.random()},
{city: '北京',time: 14, count: 100 * Math.random()},
{city: '北京',time: 15, count: 100 * Math.random()},
{city: '北京',time: 16, count: 100 * Math.random()},
{city: '北京',time: 17, count: 100 * Math.random()},
{city: '北京',time: 18, count: 100 * Math.random()},
{city: '北京',time: 19, count: 100 * Math.random()},
{city: '北京',time: 20, count: 100 * Math.random()},
{city: '上海',time: 9, count: 100 * Math.random()},
{city: '上海',time: 10, count: 100 * Math.random()},
{city: '上海',time: 11, count: 100 * Math.random()},
{city: '上海',time: 12, count: 100 * Math.random()},
{city: '上海',time: 13, count: 100 * Math.random()},
{city: '上海',time: 14, count: 100 * Math.random()},
{city: '上海',time: 15, count: 100 * Math.random()},
{city: '上海',time: 16, count: 100 * Math.random()},
{city: '上海',time: 17, count: 100 * Math.random()},
{city: '上海',time: 18, count: 100 * Math.random()},
{city: '上海',time: 19, count: 100 * Math.random()},
{city: '上海',time: 20, count: 100 * Math.random()},
{city: '重庆',time: 9, count: 100 * Math.random()},
{city: '重庆',time: 10, count: 100 * Math.random()},
{city: '重庆',time: 11, count: 100 * Math.random()},
{city: '重庆',time: 12, count: 100 * Math.random()},
{city: '重庆',time: 13, count: 100 * Math.random()},
{city: '重庆',time: 14, count: 100 * Math.random()},
{city: '重庆',time: 15, count: 100 * Math.random()},
{city: '重庆',time: 16, count: 100 * Math.random()},
{city: '重庆',time: 17, count: 100 * Math.random()},
{city: '重庆',time: 18, count: 100 * Math.random()},
{city: '重庆',time: 19, count: 100 * Math.random()},
{city: '重庆',time: 20, count: 100 * Math.random()},
{city: '广州',time: 9, count: 100 * Math.random()},
{city: '广州',time: 10, count: 100 * Math.random()},
{city: '广州',time: 11, count: 100 * Math.random()},
{city: '广州',time: 12, count: 100 * Math.random()},
{city: '广州',time: 13, count: 100 * Math.random()},
{city: '广州',time: 14, count: 100 * Math.random()},
{city: '广州',time: 15, count: 100 * Math.random()},
{city: '广州',time: 16, count: 100 * Math.random()},
{city: '广州',time: 17, count: 100 * Math.random()},
{city: '广州',time: 18, count: 100 * Math.random()},
{city: '广州',time: 19, count: 100 * Math.random()},
{city: '广州',time: 20, count: 100 * Math.random()},
];
//添加其他城市数据
var citys = ["天津","石家庄","太原","呼和浩特","哈尔滨","长春","沈阳","济南","南京","合肥","杭州","南昌","福州","郑州","武汉","长沙","南宁","西安","银川","兰州","西宁","乌鲁木齐","成都","贵阳","昆明","拉萨","海口"];
citys.forEach(function(city) {
for (var i = 9; i <= 20; i++) {
cityData.push({city: city,time: i, count: 100 * Math.random()});
}
});
// 构造数据
cityData = cityData.map(function(item) {
var cityCenter = mapv.utilCityCenter.getCenterByCityName(item.city);
item.geometry = {
type: 'Point',
coordinates: [cityCenter.lng, cityCenter.lat]
}
return item;
});
var dataSet = new mapv.DataSet(cityData);
var options = {
fillStyle: 'rgba(55, 50, 250, 0.2)',
globalCompositeOperation: "lighter",
size: 6,
gradient: {
0: 'blue',
0.5: 'yellow',
1: 'red'
},
max: 100,
updateCallback: function(time) {
$('#time').html(parseInt(time) + ':00');
},
animation: {
type: 'time',
stepsRange: {
start: 9,
end: 20
},
trails: 1,
duration: 4,
},
draw: 'intensity'
}
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
</script>
</body>
</html>