Question

抱歉，我对此很陌生。我想在这里找到与此类似的内容CartoDB multiple layer toggle，

只是我没有添加SQL查询图层，而是添加一个来自URL的图层。每个按钮应该激活一个图层，一次一个图层，并且始终只有一个图层可见。谢谢你的提示！最好的，Wolfram

<html>
<head>
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
  <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
  <!--[if lte IE 8]>
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
  <![endif]-->
  <style>
    html, body {width:100%; height:100%; padding: 0; margin: 0;}
    #cartodb-map { width: 100%; height:100%; background: black;}
    #menu { position: absolute; top: 5px; right: 10px; width: 400px; height:60px; background: transparent; z-index:10;}
    #menu a { 
      margin: 15px 10px 0 0;
      float: right;
      vertical-align: baseline;
      width: 100px;
      padding: 10px;
      text-align: center;
      font: bold 11px "Helvetica",Arial;
      line-height: normal;
      color: #555;
      border-radius: 4px;
      border: 1px solid #777777;
      background: #ffffff;
      text-decoration: none;
      cursor: pointer;
    }
    #menu a.selected,
    #menu a:hover { 
      color: #F84F40;
    }
  </style>

  <script>
    var map;
    function init(){
      // initiate leaflet map
      map = new L.Map('cartodb-map', { 
        center: [-22.8,-43.15],
        zoom: 10
      })

      L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png', {
        attribution: ' <a href="http://mapbox.com/about/maps" target="_blank"> </a>'
        }).addTo(map);

    }

      var layerUrl1 = 'https://riomapia.cartodb.com/api/v2/viz/d79239a6-51af-11e5-ba37-0e853d047bba/viz.json';
      var layerUrl2 = 'https://riomapia.cartodb.com/api/v2/viz/633f93e0-51b0-11e5-b512-0e4fddd5de28/viz.json';
      var layerUrl3 = 'https://riomapia.cartodb.com/api/v2/viz/4fa846f0-51b1-11e5-bd3c-0e853d047bba/viz.json';

    function showLayer(layerToShow) {

        //turn off all layers
        layer.forEach(function(i) {
            i.hide()
        });

        switch (layerToShow.id) {
            case "Renda1":
                layer.show(layerUrl1);
                break;
            case "Renda2":
                layer.show(layerUrl2);
                break;
            case "Renda3":
                layer.show(layerUrl3);
                break;
        }

        return true;
    }


  </script>
</head>
<body onload="init()">
  <div id='cartodb-map'></div>
  <div id='menu'>
    <a href="#Renda1" id="Renda1" class="button Renda1">Renda domiciliar por pessoa</a> 
    <a href="#Renda2" id="Renda2" class="button Renda2">Pessoas < R$ 140</a> 
    <a href="#Renda3" id="Renda3" class="button Renda3">Pessoas < R$ 70</a>
  </div>
</body>
</html>

Answer 1

我不确定你能做到这一点（但我不确定） - 然而，我看了你要链接的json文件，我看到数据来自Open Street Map。您是否尝试过查看本教程？

http://docs.cartodb.com/tutorials/osm.html

也许这会有所帮助？

CartoDB：按钮在图层之间切换

1 个答案: