实现代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>高德官方图层</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html,body,#container {width: 100%;height: 100%;}
.btn{color: yellow;border-width: 2px;width:120px;}
.label{font-weight: 700;width:100px}
</style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width:400px;background-image: linear-gradient(to bottom right, #dd3e54, #6be585);;">
<div class="input-item">
<label class="label">卫星图层：</label>
<button class="btn" id="add-satellite-layer" style="margin-right:10px;">添加卫星图层</button>
<button class="btn" id="remove-satellite-layer">删除卫星图层</button>
</div>
<div class="input-item">
<label class="label">路网图层：</label>
<button class="btn" id="add-roadnet-layer" style="margin-right:10px;">添加路网图层</button>
<button class="btn" id="remove-roadnet-layer">删除路网图层</button>
</div>
<div class="input-item">
<label class="label">楼块图层：</label>
<button class="btn" id="add-buildings-layer" style="margin-right:10px;">添加楼块图层</button>
<button class="btn" id="remove-buildings-layer">删除楼块图层</button>
</div>
<div class="input-item">
<label class="label">实时交通图层：</label>
<button class="btn" id="add-traffic-layer" style="margin-right:10px;">添加实时交通图层</button>
<button class="btn" id="remove-traffic-layer">删除实时交通图层</button>
</div>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>
var map = new AMap.Map('container', {
resizeEnable: true,
viewMode:'3D',
zoom: 13,
center: [116.417796, 39.914398]
});
var satelliteLayer = new AMap.TileLayer.Satellite();
var roadNetLayer = new AMap.TileLayer.RoadNet();
var trafficLayer = new AMap.TileLayer.Traffic ();
var buildingsLayer = new AMap.Buildings();
map.add([satelliteLayer, roadNetLayer, trafficLayer, buildingsLayer]);
document.querySelector("#add-satellite-layer").onclick = function() {map.add(satelliteLayer);}
document.querySelector("#remove-satellite-layer").onclick = function() {map.remove(satelliteLayer);}
document.querySelector("#add-roadnet-layer").onclick = function() {map.add(roadNetLayer);}
document.querySelector("#remove-roadnet-layer").onclick = function() {map.remove(roadNetLayer);}
document.querySelector("#add-traffic-layer").onclick = function() {map.add(trafficLayer);}
document.querySelector("#remove-traffic-layer").onclick = function() {map.remove(trafficLayer);}
document.querySelector("#add-buildings-layer").onclick = function() {map.add(buildingsLayer);}
document.querySelector("#remove-buildings-layer").onclick = function() {map.remove(buildingsLayer);}
</script>
</body>
</html>
