<!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>蜂窝图--杭州高峰期路口延误指数评级</h1>
<h3>蜂窝柱状高度及颜色映射路口的延误指数，其中EF等级是拥堵较严重路口 </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', {
zoom: 11.43,
center: [120.2446746826172, 30.199146446037616],
pitch: 55,
rotation: 20,
// showLabel: true,
viewMode: '3D',
mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
});
var loca = new Loca.Container({
map,
});
loca.ambLight = {
intensity: 0.4,
color: '#ced5ed',
};
loca.dirLight = {
intensity: 0.02,
color: '#666',
target: [10, 10, 10],
position: [0, -1, 0.1],
};
loca.pointLight = {
color: 'rgb(155,173,80)',
position: [120.14133, 30.246611, 20000],
intensity: 2.2,
// 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
distance: 40000,
};
var geo = new Loca.GeoJSONSource({
url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/hz_road_level.json',
});
var ll = new Loca.HexagonLayer({
// loca,
zIndex: 10,
opacity: 1,
visible: true,
zooms: [2, 22],
acceptLight: true,
});
var colors = ['#F4FFB3', '#BFDDA8', '#96CA8D', '#75BA89', '#5EAC86', '#4D9A96', '#3F748F', '#1D3748'].reverse();
var heights = [100, 200, 300, 900, 1000, 1200, 1500, 3000];
ll.setSource(geo);
// 计算路口rank之和
function sum(arr) {
var sum = 0;
arr.forEach(a => {
sum += a.properties.rank;
});
return sum;
}
ll.setStyle({
unit: 'meter',
radius: 120,
gap: 0,
altitude: 0,
height: function (index, feature) {
var ranks = sum(feature.coordinates);
// return ranks < 60 ? heights[2] : heights[6];
return ranks < 20 ?
heights[0] : ranks < 40 ?
heights[1] : ranks < 60 ?
heights[2] : ranks < 80 ?
heights[3] : ranks < 100 ?
heights[4] : ranks < 120 ?
heights[5] : ranks < 130 ?
heights[6] : heights[7];
},
topColor: function (index, feature) {
var ranks = sum(feature.coordinates);
// return ranks < 60 ? colors[1] : colors[6];
return ranks < 20 ?
colors[0] : ranks < 40 ?
colors[1] : ranks < 60 ?
colors[2] : ranks < 80 ?
colors[3] : ranks < 100 ?
colors[4] : ranks < 120 ?
colors[5] : ranks < 130 ?
colors[6] : colors[7];
},
sideBottomColor: function (index, feature) {
var ranks = sum(feature.coordinates);
// return ranks < 60 ? colors[1] : colors[6];
return ranks < 20 ?
colors[0] : ranks < 40 ?
colors[1] : ranks < 60 ?
colors[2] : ranks < 80 ?
colors[3] : ranks < 100 ?
colors[4] : ranks < 120 ?
colors[5] : ranks < 130 ?
colors[6] : colors[7];
},
sideTopColor: function (index, feature) {
var ranks = sum(feature.coordinates);
// return ranks < 60 ? colors[1] : colors[6];
return ranks < 20 ?
colors[0] : ranks < 40 ?
colors[1] : ranks < 60 ?
colors[2] : ranks < 80 ?
colors[3] : ranks < 100 ?
colors[4] : ranks < 120 ?
colors[5] : ranks < 130 ?
colors[6] : colors[7];
}
})
loca.add(ll);
// 高度升起动画
map.on('complete', function () {
setTimeout(function () {
ll.show(500);
ll.addAnimate({
key: 'height',
value: [0, 1],
duration: 500,
easing: 'Linear',
transform: 500,
random: true,
delay: 10000,
});
}, 800);
});
loca.animate.start();
// 图例
var lengend = new Loca.Legend({
loca: loca,
title: {
label: '延误指数',
fontColor: 'rgba(255,255,255,0.4)',
fontSize: '16px'
},
style: {
backgroundColor: 'rgba(255,255,255,0.1)',
left: '20px',
bottom: '40px',
fontSize: '12px'
},
dataMap: [
{ label: '> 130', color: colors[7] },
{ label: '< 130', color: colors[6] },
{ label: '< 120', color: colors[5] },
{ label: '< 100', color: colors[4] },
{ label: '< 80', color: colors[3] },
{ label: '< 60', color: colors[2] },
{ label: '< 40', color: colors[1] },
{ label: '< 20', color: colors[0] },
],
});
var dat = new Loca.Dat();
dat.addLight(loca.ambLight, loca, '环境光');
dat.addLight(loca.dirLight, loca, '平行光');
dat.addLight(loca.pointLight, loca, '点光');
</script>
</body>
</html>
