图层切换控件

图层切换控件(BasicControl.LayerSwitcher)，自定义图层组合。

源代码编辑器

<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/control/BasicControl/examples/layer-switcher.html -->
    <base href="//webapi.amap.com/ui/1.1/ui/control/BasicControl/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>图层切换控件</title>
    <style>
    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0px;
        font-size: 13px;
    }
    
    .container {
        width: 100%;
        height: 50%;
    }
    </style>
</head>

<body>
    <div id="container1" class="container"></div>
    <div id="container2" class="container"></div>
    <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=您申请的key值'></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
    <script type="text/javascript">
    AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {

        var layerCtrl1 = new BasicControl.LayerSwitcher({
            position: 'tr'
        });

        var map1 = new AMap.Map('container1', {
            //这里将layerCtrl中启用的图层传递给map
            layers: layerCtrl1.getEnabledLayers()
        });

        map1.addControl(layerCtrl1);

        var layerCtrl2 = new BasicControl.LayerSwitcher({
            theme: 'dark',
            //自定义基础图层
            baseLayers: [{
                id: 'tile',
                name: '图层A',
                layer: new AMap.TileLayer()
            }, {
                enable: true,
                id: 'satellite',
                name: '图层B',
                layer: new AMap.TileLayer.Satellite()
            }],
            //自定义覆盖图层
            overlayLayers: [{
                enable: true,
                id: 'traffic',
                name: '图层C',
                layer: new AMap.TileLayer.Traffic()
            }, {
                id: 'roadNet',
                name: '图层D',
                layer: new AMap.TileLayer.RoadNet()
            }]
        });

        var map2 = new AMap.Map('container2', {
            //这里将layerCtrl中启用的图层传递给map
            layers: layerCtrl2.getEnabledLayers()
        });

        map2.addControl(layerCtrl2);
    });
    </script>
</body>

</html>

控制台

清空

返回顶部示例中心常见问题智能客服