mapv
Version:
a library of geography visualization
124 lines (102 loc) • 3.33 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%;
}
#loading {
position:absolute;
top: 50%;
left: 50%;
margin-left: -130px;
text-align: center;
margin-top: -50px;
width: 260px;
padding: 20px;
background: rgba(0, 0, 0, 0.5);
color: yellow;
font-size: 30x;
}
#panel {
background: #fff;
border: 1px solid #ccc;
position:absolute;
padding: 10px;
bottom: 10px;
right: 10px;
font-size: 12px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="loading">纽约出租车145万上车点数据加载中...</div>
<div id="panel">数据来源<a target="_blank" href="http://www.nyc.gov/html/tlc/html/about/trip_record_data.shtml">NYC Taxi(纽约出租车上车点)</a>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
<script type="text/javascript" src="../build/mapv.js"></script>
<script type="text/javascript" src="js/dat.gui.js"></script>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("map", {
enableMapClick: false
}); // 创建Map实例
map.centerAndZoom(new BMap.Point(-73.931577, 40.745654), 12); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
/*
map.setMapStyle({
style: 'midnight'
});
*/
map.setMapStyle({
styleJson: [
{
"featureType": "all",
"elementType": "all",
"stylers": {
"lightness": 61,
"saturation": -100
}
}
]
});
$.get('data/nyc-taxi.csv', function(csvstr) {
var options = {
size: 1.5,
context: 'webgl',
fillStyle: 'rgba(250, 50, 50, 0.8)',
draw: 'simple'
}
var dataSet = mapv.csv.getDataSet(csvstr);
dataSet.initGeometry();
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
$('#loading').hide();
function finished() {
mapvLayer.update({
options: options
});
};
var gui = new dat.GUI({
nameMap: {
size: '大小',
fillStyle: '颜色'
}
});
gui.add(options, 'size', 0.1, 10).onFinishChange(finished);
gui.addColor(options, 'fillStyle').onChange(finished);
});
</script>
</body>
</html>