实现代码：
<!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>
