<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 凯德Mall室内图 </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>面图层—凯德Mall剖面图</h1>
<h3>通过面图层的高度和光照效果，展示出每层楼的室内情况。</h3>
</div>
<div class="start-btn">
<a>开始动画</a>
</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',
rotation: 45,
zoom: 18.5,
pitch: 65,
center: [116.471019, 39.991893],
mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
showBuildingBlock: false,
showLabel: false,
});
// 底图楼块扣除
var building = new AMap.Buildings({
zIndex: 10,
});
building.setStyle({
hideWithoutStyle: false,//是否隐藏设定区域外的楼块
areas: [{
visible: false,//是否可见
rejectTexture: false,//是否屏蔽自定义地图的纹理
color1: '00000000',//楼顶颜色
color2: '00000000',//楼面颜色
path: [
[
[
116.467518,
39.993867
],
[
116.467223,
39.99325
],
[
116.467411,
39.992531
],
[
116.468129,
39.992165
],
[
116.468628,
39.991894
],
[
116.469073,
39.991647
],
[
116.469841,
39.992515
],
[
116.469304,
39.993222
],
[
116.468108,
39.994142
],
[
116.46784,
39.994249
],
[
116.467518,
39.993867
]
]
]
}]
});
map.add(building);
// 添加上层数据
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.468693, 39.993041, 200],
intensity: 3,
// 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
distance: 250,
};
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/cadmall_floor.json')
.then(function (response) {
return response.json();
})
.then(function (data) {
createFloorLayer(data['f-1'].shops, 0, '负一楼商铺');
createFloorLayer(data.f1.shops, 20, '一楼商铺');
createFloorLayer(data.f2.shops, 60, '二楼商铺');
createFloorLayer(data.f3.shops, 100, '三楼商铺');
createFloorLayer(data.f4.shops, 130, '四楼商铺');
createBasePolygon(data['f-1'].floor, 0);
createBasePolygon(data.f1.floor, 20);
createBasePolygon(data.f2.floor, 60);
createBasePolygon(data.f3.floor, 100);
createBasePolygon(data.f4.floor, 130);
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: 1,
// cullface: 'none',
shininess: 10,
hasSide: false,
visible: false,
});
floor.setSource(geo);
floor.setStyle({
topColor: '#8889ff',
sideColor: '#8889ff',
height: 2,
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: 1,
// cullface: 'none',
shininess: 10,
// hasSide: false,
visible: altitude === 0,
});
floor.setSource(geo);
floor.setStyle({
topColor: '#5C57B8',
sideColor: '#5C57B8',
height: 1,
altitude: altitude + 2,
});
shopLayer.push(floor);
dat.addLayer(floor, name);
}
// 生长动画
document.querySelector('.start-btn').addEventListener('click', function () {
const speed = 1;
map.setCenter([116.471019, 39.991893], true);
map.setZoom(18.5, true);
map.setPitch(65, true);
map.setRotation(45, true);
shopLayer.forEach(function (l, i) {
if (i != 0) {
l.hide();
}
});
baseLayer.forEach(function (l, i) {
if (i != 0) {
l.hide();
}
});
setTimeout(function () {
loca.viewControl.addAnimates([{
center: {
value: [116.467864, 39.992941],
control: [[116.471496, 39.992752], [116.474484, 39.991264]],
timing: [0, 0.2, 0.5, 1],
duration: 2500 / speed,
},
rotation: {
value: 99,
control: [[0, 45], [1, 99]],
timing: [0, 0, 0.5, 1],
duration: 2000 / speed,
},
}]);
setTimeout(function () {
shopLayer.forEach(function (l) {
// l.hide();
l.addAnimate({
key: 'altitude',
value: [0, 1],
duration: 2000,
easing: 'CubicInOut',
// yoyo: true,
// repeat: 2,
});
l.show(1200);
});
shopLayer.forEach(function (l) {
l.addAnimate({
key: 'height',
value: [0, 1],
duration: 2000,
easing: 'CubicInOut',
// yoyo: true,
// repeat: 2,
});
l.show(1200);
});
baseLayer.forEach(function (l) {
l.addAnimate({
key: 'altitude',
value: [0, 1],
duration: 2500,
easing: 'CubicInOut',
// yoyo: true,
// repeat: 2,
});
l.show(1200);
});
baseLayer.forEach(function (l) {
l.addAnimate({
key: 'height',
value: [0, 1],
duration: 2500,
easing: 'CubicInOut',
// yoyo: true,
// repeat: 2,
});
l.show(1200);
});
}, 2000);
}, 300)
});
</script>
</body>
</html>
