<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>MapVGL</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
margin: 0;
}
#tools {
position: absolute;
z-index: 100;
right: 5px;
bottom: 5px;
padding: 10px;
color: #fff;
background: rgba(0, 0, 0, .5);
}
#tools button {
width: 100px;
height: 30px;
}
</style>
<script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
<script src="//mapv.baidu.com/build/mapv.min.js"></script>
<script src="static/common.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.97/dist/mapvgl.min.js"></script>
</head>
<body>
<div id="map_container"></div>
<script>
// 6322,2363
/* global BMapGL */
/* global mapv */
/* global mapvgl */
/* global initMap */
var map = initMap({
center: [120.761369,31.661289],
zoom: 5,
tilt: 30,
// style: whiteStyle
});
var view = new mapvgl.View({
map: map
});
var points =[
{"lng":120.761407,"lat":31.666662,"count":113},
{"lng":120.761407,"lat":31.666414,"count":127},
{"lng":120.761392,"lat":31.666166,"count":122},
{"lng":120.761392,"lat":31.665946,"count":123},
{"lng":120.761392,"lat":31.665729,"count":127},
{"lng":120.761376,"lat":31.665386,"count":134},
{"lng":120.761407,"lat":31.66448,"count":120},
{"lng":120.761369,"lat":31.664163,"count":96},
{"lng":120.761369,"lat":31.663734,"count":97},
{"lng":120.761369,"lat":31.663297,"count":96},
{"lng":120.761369,"lat":31.662885,"count":94},
{"lng":120.761369,"lat":31.662563,"count":82},
{"lng":120.761369,"lat":31.662256,"count":77},
{"lng":120.761369,"lat":31.662042,"count":64},
{"lng":120.761369,"lat":31.661775,"count":91},
{"lng":120.761354,"lat":31.661504,"count":90},
{"lng":120.761369,"lat":31.661289,"count":92}];
var data = [];
for (var i = 0; i < points.length; i++) {
var item = points[i];
data.push({
geometry: {
type: 'Point',
coordinates: [item.lng*100000, item.lat*100000]
},
properties: {
count: item.count
}
});
}
var heatmap = new mapvgl.HeatmapLayer({
size: 20, // 单个点绘制大小
max: 40, // 最大阈值
height: 80, // 最大高度，默认为0
unit: 'px', // 单位，m:米，px: 像素
gradient: { // 对应比例渐变色
0.25: 'rgba(89, 233, 179, 1)',
0.55: 'rgba(182, 243, 147, 1)',
0.85: 'rgba(254, 255, 140, 1)',
0.9: 'rgba(217, 29, 28, 1)',
}
});
heatmap.setData(data);
view.addLayer(heatmap);
</script>
</body>
</html>
