<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全国交通事故增长率热力图</title>
<style>
html,
body,
#map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.demo-title {
position: absolute;
top: 25px;
left: 25px;
z-index: 1;
}
h1 {
font-size: 18px;
margin: 0;
color: rgb(180, 180, 190);
}
h3 {
font-size: 12px;
font-weight: normal;
margin-top: 5px;
color: rgb(150,150,150);
}
</style>
</head>
<body>
<div class="demo-title">
<h1>3D热力—全国交通健康指数热度</h1>
<h3>热力全国各城市的交通健康指数</h3>
</div>
<div id="map"></div>
<script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
<script src="https://webapi.amap.com/loca?v=2.0.0&key=您申请的key值"></script>
<script>
var map = new AMap.Map('map', {
zooms: [4, 7],
zoom: 4.75,
center: [102.618687,31.790976],
showLabel: false,
viewMode: '3D',
mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
pitch: 40,
});
var loca = new Loca.Container({
map,
});
var geo = new Loca.GeoJSONSource({
url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/traffic.json',
});
var heatmap = new Loca.HeatMapLayer({
// loca,
zIndex: 10,
opacity: 1,
visible: true,
zooms: [2, 22],
});
heatmap.setSource(geo, {
radius: 200000,
unit: 'meter',
height: 500000,
//radius: 35,
//unit: 'px',
//height: 100,
gradient: {
0.1: '#2A85B8',
0.2: '#16B0A9',
0.3: '#29CF6F',
0.4: '#5CE182',
0.5: '#7DF675',
0.6: '#FFF100',
0.7: '#FAA53F',
1: '#D04343',
},
value: function (index, feature) {
return feature.properties.avg;
var value = feature.properties.mom.slice(0, -1);
return value + 10 * Math.random();
},
// min: -100,
// max: 100,
heightBezier: [0, .53, .37, .98],
});
loca.add(heatmap);
map.on('click', function () {
heatmap.addAnimate({
key: 'height',
value: [0, 1],
duration: 2000,
easing: 'BackOut',
// yoyo: true,
// repeat: 2,
});
heatmap.addAnimate({
key: 'radius',
value: [0, 1],
duration: 2000,
easing: 'BackOut',
// 开启随机动画
transform: 1000,
random: true,
delay: 5000,
});
});
</script>
</body>
</html>