mapv
Version:
a library of geography visualization
195 lines (179 loc) • 5.85 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%;
}
</style>
</head>
<body>
<div id="map"></div>
<canvas id="canvas"></canvas>
<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(106.563777, 29.578285), 12); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
// 地图自定义样式
map.setMapStyle({
styleJson: [
{
"featureType": "land",
"elementType": "geometry",
"stylers": {
"color": "#212121"
}
},
{
"featureType": "building",
"elementType": "geometry",
"stylers": {
"color": "#2b2b2b"
}
},
{
"featureType": "highway",
"elementType": "all",
"stylers": {
"lightness": -75,
"saturation": -91
}
},
{
"featureType": "arterial",
"elementType": "geometry",
"stylers": {
"lightness": -82,
"saturation": -94
}
},
{
"featureType": "green",
"elementType": "geometry",
"stylers": {
"color": "#1b1b1b"
}
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": {
"color": "#181818"
}
},
{
"featureType": "subway",
"elementType": "all",
"stylers": {
"lightness": -100,
"saturation": -91
}
},
{
"featureType": "railway",
"elementType": "geometry",
"stylers": {
"lightness": -84
}
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#313131"
}
},
{
"featureType": "all",
"elementType": "labels",
"stylers": {
"color": "#8b8787",
"lightness": -19,
"visibility": "off"
}
},
{
"featureType": "manmade",
"elementType": "geometry",
"stylers": {
"color": "#1b1b1b"
}
},
{
"featureType": "local",
"elementType": "geometry",
"stylers": {
"lightness": -97,
"saturation": -100,
"visibility": "off"
}
},
{
"featureType": "subway",
"elementType": "geometry",
"stylers": {
"lightness": -76
}
},
{
"featureType": "railway",
"elementType": "all",
"stylers": {
"lightness": -40,
"visibility": "off"
}
},
{
"featureType": "boundary",
"elementType": "geometry",
"stylers": {
"color": "#8b8787",
"weight": "1",
"lightness": -29
}
}
]
});
$.get('data/car.csv', function(csvstr) {
var options = {
strokeStyle: 'rgba(50, 50, 255, 0.8)',
lineWidth: 0.05,
globalCompositeOperation: 'lighter',
animation: {
type: 'time',
stepsRange: {
start: 0,
end: 100
},
trails: 2,
duration: 10,
},
draw: 'simple'
}
var dataSet = mapv.csv.getDataSet(csvstr);
var data = dataSet.get();
for (var i = 0; i < data.length; i++) {
data[i].time = Math.random() * 100;
}
dataSet.set(data);
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
});
</script>
</body>
</html>