EN
全部下载
图层选择控件
源码
打开
编辑
复制

如果你想设置多个瓦片图层用于选择作为底图图层，你可以：

  1. 初始化地图时，创建一个GroupTileLayer作为底图图层，并将候选图层设为子图层
  2. 除了默认的底图图层，将其他子图层的visible属性设为false
  3. Layer Switcher控件会自动将所有子图层列出，供你选择底图
index.html
<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>空间与UI组件 - 图层选择控件</title>
  <style type="text/css">
    html,body{margin:0px;height:100%;width:100%}
    .container{width:100%;height:100%}
  </style>
  <link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
  <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
  <body>

    <div id="map" class="container"></div>
    <script>
      var map = new maptalks.Map('map', {
        center: [-0.113049,51.498568],
        zoom: 14,
        layerSwitcherControl: {
          'position'  : 'top-right',
          // title of base layers
          'baseTitle' : 'Base Layers',
          // title of layers
          'overlayTitle' : 'Layers',
          // layers you don't want to manage with layer switcher
          'excludeLayers' : [],
          // css class of container element, maptalks-layer-switcher by default
          'containerClass' : 'maptalks-layer-switcher'
        },
        baseLayer: new maptalks.GroupTileLayer('Base TileLayer', [
          new maptalks.TileLayer('Carto light',{
            'urlTemplate': 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
            'subdomains'  : ['a','b','c','d']
          }),
          new maptalks.TileLayer('Carto dark',{
            'visible' : false,
            'urlTemplate': 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
            'subdomains'  : ['a','b','c','d']
          })
        ])
      });

      var layer = new maptalks.VectorLayer('Vector Markers', [
        new maptalks.Marker(map.getCenter().add(0.01, 0.006)),
        new maptalks.Marker(map.getCenter().add(0.01, 0)),
        new maptalks.Marker(map.getCenter().add(0.01, -0.006))
      ]);
      layer.addTo(map);

      var layer2 = new maptalks.VectorLayer('Circle Markers', [
        new maptalks.Marker(map.getCenter().add(-0.01, 0.006)),
        new maptalks.Marker(map.getCenter().add(-0.01, 0)),
        new maptalks.Marker(map.getCenter().add(-0.01, -0.006))
      ], {
        style : [{
          filter : true,
          symbol : {
            markerType : 'ellipse',
            markerWidth : 20,
            markerHeight : 20,
            markerFill : '#f00',
            markerLineWidth : 2
          }
        }]
      });
      layer2.addTo(map);

    </script>
  </body>
</html>
已复制！