<!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>通过面的颜色及高度来映射各功能区的健康指数</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.14,
viewMode: '3D',
pitch: 45,
mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
center: [120.109233,30.246411],
showBuildingBlock: false,
showLabel: false,
});
var loca = window.loca = new Loca.Container({
map,
});
loca.ambLight = {
intensity: 0.3,
color: '#fff',
};
loca.dirLight = {
intensity: 0.6,
color: '#fff',
target: [0, 0, 0],
position: [0, -1, 1],
};
loca.pointLight = {
color: 'rgb(100,100,100)',
position: [120.24289, 30.341335, 20000],
intensity: 3,
// 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
distance: 50000,
};
var geo = new Loca.GeoJSONSource({
url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/hz_gn.json',
});
var colors = ['#FFF8B4', '#D3F299', '#9FE084', '#5ACA70', '#00AF53', '#00873A', '#006B31', '#004835', '#003829'].reverse();
var height = [1000, 2000, 4000, 6000, 8000, 10000, 12000, 14000, 16000];
var pl = new Loca.PolygonLayer({
// loca,
zIndex: 120,
opacity: 0.8,
// cullface: 'none',
shininess: 10,
hasSide: true,
});
pl.setSource(geo);
pl.setStyle({
topColor: function (index, feature) {
var v = feature.properties.health * 100;
return v < 40 ? colors[8] :
v < 50 ? colors[7] :
v < 55 ? colors[6] :
v < 60 ? colors[5] :
v < 65 ? colors[4] :
v < 70 ? colors[3] :
v < 75 ? colors[2] :
v < 80 ? colors[1] :
v < 100 ? colors[0] : 'green';
},
sideTopColor: function (index, feature) {
// var v = feature.properties.value;
var v = feature.properties.health * 100;
return v < 40 ? colors[8] :
v < 50 ? colors[7] :
v < 55 ? colors[6] :
v < 60 ? colors[5] :
v < 65 ? colors[4] :
v < 70 ? colors[3] :
v < 75 ? colors[2] :
v < 80 ? colors[1] :
v < 100 ? colors[0] : 'green';
},
sideBottomColor: function (index, feature) {
// var v = feature.properties.value;
var v = feature.properties.health * 100;
return v < 40 ? colors[8] :
v < 50 ? colors[7] :
v < 55 ? colors[6] :
v < 60 ? colors[5] :
v < 65 ? colors[4] :
v < 70 ? colors[3] :
v < 75 ? colors[2] :
v < 80 ? colors[1] :
v < 100 ? colors[0] : 'green';
},
height: function (index, feature) {
var v = feature.properties.health * 100;
return v < 40 ? height[8] :
v < 50 ? height[7] :
v < 55 ? height[6] :
v < 60 ? height[5] :
v < 65 ? height[4] :
v < 70 ? height[3] :
v < 75 ? height[2] :
v < 80 ? height[1] :
v < 100 ? height[0] : 0;
},
altitude: 0,
});
loca.add(pl);
// 图例
var lengend = new Loca.Legend({
loca: loca,
title: {
label: '健康度',
fontColor: '#eee',
},
style: {
backgroundColor: 'rgba(255,255,255,0.1)',
left: '20px',
bottom: '40px',
},
dataMap: [
{ label: 100, color: colors[8] },
{ label: 80, color: colors[7] },
{ label: 75, color: colors[6] },
{ label: 70, color: colors[5] },
{ label: 65, color: colors[4] },
{ label: 60, color: colors[3] },
{ label: 55, color: colors[2] },
{ label: 50, color: colors[1] },
{ label: 40, color: colors[0] },
],
});
// 创建纯文本标记
var text = new AMap.Text({
text: '纯文本标记',
anchor: 'center', // 设置文本标记锚点
draggable: true,
cursor: 'pointer',
angle: 0,
visible: false,
offset: [0, -25],
style: {
'padding': '5px 10px',
'margin-bottom': '1rem',
'border-radius': '.25rem',
'background-color': 'rgba(0,0,0,0.5)',
// 'width': '12rem',
'border-width': 0,
'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .3)',
'text-align': 'center',
'font-size': '16px',
'color': '#fff',
},
});
text.setMap(map);
// 拾取
map.on('mousemove', (e) => {
var feat = pl.queryFeature(e.pixel.toArray());
if (feat) {
text.show();
var health = feat.properties.health;
text.setText(feat.properties.name + ' 健康度：' + parseInt(health * 100) + ' %');
text.setPosition(e.lnglat);
pl.setStyle({
topColor: (index, feature) => {
if (feature === feat) {
return [164, 241, 199, 0.5];
}
var v = feature.properties.health * 100;
return v < 40 ? colors[8] :
v < 50 ? colors[7] :
v < 55 ? colors[6] :
v < 60 ? colors[5] :
v < 65 ? colors[4] :
v < 70 ? colors[3] :
v < 75 ? colors[2] :
v < 80 ? colors[1] :
v < 100 ? colors[0] : 'green';
},
sideTopColor: (index, feature) => {
if (feature === feat) {
return [164, 241, 199, 0.5];
}
var v = feature.properties.health * 100;
return v < 40 ? colors[8] :
v < 50 ? colors[7] :
v < 55 ? colors[6] :
v < 60 ? colors[5] :
v < 65 ? colors[4] :
v < 70 ? colors[3] :
v < 75 ? colors[2] :
v < 80 ? colors[1] :
v < 100 ? colors[0] : 'green';
},
sideBottomColor: (index, feature) => {
if (feature === feat) {
return [164, 241, 199, 0.5];
}
var v = feature.properties.health * 100;
return v < 40 ? colors[8] :
v < 50 ? colors[7] :
v < 55 ? colors[6] :
v < 60 ? colors[5] :
v < 65 ? colors[4] :
v < 70 ? colors[3] :
v < 75 ? colors[2] :
v < 80 ? colors[1] :
v < 100 ? colors[0] : 'green';
},
height: function (index, feature) {
var v = feature.properties.health * 100;
return v < 40 ? height[8] :
v < 50 ? height[7] :
v < 55 ? height[6] :
v < 60 ? height[5] :
v < 65 ? height[4] :
v < 70 ? height[3] :
v < 75 ? height[2] :
v < 80 ? height[1] :
v < 100 ? height[0] : 0;
},
});
} else {
text.hide();
}
});
var dat = new Loca.Dat();
dat.addLight(loca.ambLight, loca, '环境光');
dat.addLight(loca.dirLight, loca, '平行光');
dat.addLight(loca.pointLight, loca, '点光');
dat.addLayer(pl);
// 生长动画
map.on('click', function () {
pl.addAnimate({
key: 'height',
value: [0, 1],
duration: 1000,
easing: 'CubicInOut',
}, function () {
// console.log(123);
});
});
</script>
</body>
</html>
