高德地图 JS API示例-简易行政区图- ›图层切换

<!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" onclick="addLayer()" class="btn">添加图层</button>
    </div>
    <div class="input-item">
        <button id="rm-layer-btn" onclick="rmLayer()" class="btn">移除图层</button>
    </div>
</div>
<script src='https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=Map3D,AMap.DistrictLayer'></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 tileLayer = new AMap.TileLayer();

    var map = new AMap.Map('container', {
        zooms: [3, 15],
        center: [0, 20],
        showIndoorMap: false,
        zoom: 3,
        isHotspot: false,
        defaultCursor: 'pointer',
        touchZoomCenter: 1,
        pitch: 0,
//        mapStyle: 'amap://styles/midnight',
        layers: [
            tileLayer,
            disWorld
        ],
        viewMode: '3D',
        resizeEnable: true
    });

    document.getElementsByClassName('amap-mcode')[0].innerHTML = '- GS(2019)6379号、GS(2019)756号'
    function addLayer() {
        disWorld.setMap(map);
        document.getElementsByClassName('amap-mcode')[0].innerHTML = '- GS(2019)6379号、GS(2019)756号'

    }

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

    }
</script>
</body>
</html>
0 0 投票数
文章评分