<!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);
}
.start-btn {
position: absolute;
bottom: 20px;
right: 20px;
padding: 0 18px;
height: 30px;
background-color: #1A66FF;
border-radius: 5px;
z-index: 1;
cursor: pointer;
}
.start-btn>a {
color: #fff;
display: block;
height: 100%;
line-height: 30px;
text-align: center;
font-size: 14px;
}
</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', {
viewMode: '3D',
pitch: 60,
center: [116.610108, 40.069095],
zoom: 15.63,
rotation: -147.7,
mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
showBuildingBlock: false,
showLabel: false,
});
var loca = window.loca = new Loca.Container({
map,
});
loca.ambLight = {
intensity: 0.1,
color: '#fff',
};
loca.dirLight = {
intensity: 0.1,
color: '#fff',
target: [0, 0, 0],
position: [0, -1, 1],
};
loca.pointLight = {
color: '#c2beff',
position: [116.612667, 40.066432, 1500],
intensity: 3,
// 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
distance: 3800,
};
var dat = new Loca.Dat();
dat.addLight(loca.ambLight, loca, '环境光');
dat.addLight(loca.dirLight, loca, '平行光');
dat.addLight(loca.pointLight, loca, '点光');
// 拉取数据
fetch('https://a.amap.com/Loca/static/loca-v2/demos/mock_data/airport_floor.json')
.then(function (response) {
return response.json();
})
.then(function (data) {
createFloorLayer(data.f1.shops, 0, '一楼商铺');
createFloorLayer(data.f2.shops, 100, '二楼商铺');
createFloorLayer(data.f3.shops, 200, '三楼商铺');
createBasePolygon(data.f1.floor, 0);
createBasePolygon(data.f2.floor, 100);
createBasePolygon(data.f3.floor, 200);
loca.animate.start();
});
var baseLayer = [];
// 基础面
function createBasePolygon(data, altitude, name) {
var geo = new Loca.GeoJSONSource({
data: data,
});
var floor = new Loca.PolygonLayer({
loca,
zIndex: 120,
opacity: 0.8,
// cullface: 'none',
shininess: 10,
// hasSide: false,
visible: false,
});
floor.setSource(geo);
floor.setStyle({
topColor: '#8889ff',
sideColor: '#8889ff',
// sideColor: [255, 255, 0, 1],
height: 5,
altitude: altitude,
});
baseLayer.push(floor);
}
var shopLayer = [];
// 商铺
function createFloorLayer(data, altitude, name) {
var geo = new Loca.GeoJSONSource({
data: data,
});
var floor = new Loca.PolygonLayer({
loca,
zIndex: 120,
opacity: 0.6,
// cullface: 'none',
shininess: 10,
hasSide: false,
visible: false,
});
floor.setSource(geo);
floor.setStyle({
topColor: '#867ef2',
sideColor: '#867ef2',
height: 3,
altitude: altitude + 7,
});
dat.addLayer(floor, name);
shopLayer.push(floor);
}
map.on('complete', function(){
setTimeout(function(){
map.setRotation(-147.7, true);
shopLayer.forEach(function (l) {
l.hide();
});
baseLayer.forEach(function (l) {
l.hide();
});
shopLayer.forEach(function (l) {
l.addAnimate({
key: 'altitude',
value: [0, 1],
duration: 4000,
easing: 'CircularOut',
// yoyo: true,
// repeat: 2,
});
l.show(500);
});
shopLayer.forEach(function (l) {
l.addAnimate({
key: 'height',
value: [0, 1],
duration: 4000,
easing: 'CircularOut',
// yoyo: true,
// repeat: 2,
});
l.show(500);
});
baseLayer.forEach(function (l) {
l.addAnimate({
key: 'altitude',
value: [0, 1],
duration: 4000,
easing: 'CircularOut',
// yoyo: true,
// repeat: 2,
});
l.show(500);
});
baseLayer.forEach(function (l) {
l.addAnimate({
key: 'height',
value: [0, 1],
duration: 4000,
easing: 'CircularOut',
// yoyo: true,
// repeat: 2,
});
l.show(500);
});
setTimeout(function () {
loca.viewControl.addAnimates([{
rotation: {
value: 0,
control: [[0, -147], [1, 0]],
timing: [0.3, 0, 0.8, 1],
duration: 6000,
},
}]);
}, 4000);
}, 2000);
});
</script>
</body>
</html>
