图层切换

通过 setMap(map) 在切片图层上显示行政区图层。

源代码编辑器

<!doctype html>
<html lang="en">
<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">
    <meta name="description" content="通过 setMap(map) 在切片图层上显示行政区图层。">
    <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%;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width: auto;">
    <div class="input-item">
        <button id="add-layer-btn" class="btn">添加图层</button>
    </div>
    <div class="input-item">
        <button id="rm-layer-btn" class="btn">移除图层</button>
    </div>
</div>
<script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
<script>

    // 绘制世界地图国家轮廓
    var disWorld = new AMap.DistrictLayer.World({
        zIndex: 10,
        styles: {
            // 颜色格式: #RRGGBB、rgba()、rgb()、[r, g, b, a]
            // 国境线
            'nation-stroke': 'rgba(20, 20, 233, 0.6)',
            // 海岸线
            'coastline-stroke': '',
            // 填充
            'fill': ''
        }
    });

    var defaultLayer = new AMap.createDefaultLayer();

    var map = new AMap.Map('container', {
        zooms: [2, 4],
        center: [0, 20],
        showIndoorMap: false,
        zoom: 3,
        isHotspot: false,
        defaultCursor: 'pointer',
        touchZoomCenter: 1,
        pitch: 0,
//        mapStyle: 'amap://styles/midnight',
        layers: [
            defaultLayer,
            disWorld,
        ],
        viewMode: '3D',
    });
    document.getElementsByClassName('amap-mcode')[0].innerHTML = '- GS(2021)6375号、GS(2021)648号'
    function addLayer() {
        disWorld.setMap(map);
        document.getElementsByClassName('amap-mcode')[0].innerHTML = '- GS(2021)6375号、GS(2021)648号'

    }

    function rmLayer() {
        disWorld.setMap(null);
        document.getElementsByClassName('amap-mcode')[0].innerHTML = '- GS(2021)6375号'

    }
  
  	document.getElementById('add-layer-btn').addEventListener('click', addLayer);
  	document.getElementById('rm-layer-btn').addEventListener('click', rmLayer);
</script>
</body>
</html>

控制台

清空

示例
中心常见
问题智能
客服