2015-10-05 87 views
0

我创建了一个显示城市间火车连接的cartodb地图。为此,我创建了两个数据库:第一个(城市)包含有关城市,路线,订单的信息。例如城市:汉堡路线:1个订单:1个,城市:吕贝克路线:1个订单:2个。在第二个数据库(verbindungen)中,我在具有相同路线编号的城市之间划了一条线。在我的地图中,我将每个数据库添加为一个图层。 当我加载地图时只显示城市。现在我想能够点击一个城市,只有来自/去往这个城市的连接应该显示出来。Cartodb显示点击路线

这是到目前为止我的代码:

var sql = new cartodb.SQL({ user: 'docu', format: 'geojson' }); 

    function showFeature(route) { 
     sql.execute("select*from verbindungen where route = {{route}}", {route: route}).done(function(geojson) { 
     if (route) { 
      map.removeLayer(route); 
     } 
     route = L.geoJson(geojson, { 
      style: { 
      color: "#000", 
      opacity: 0.65 
      } 
     }).addTo(map); 
     }); 
    } 

cartodb.createLayer(map, layerUrl) 
.addTo(map) 
.on('done', function(layer) { 

layer.setInteraction(true); 

var sublayerVerbindungen = layer.getSubLayer(1); 
sublayerVerbindungen.hide() 
var sublayerCities = layer.getSubLayer(0); 
sublayerCities.show(); 

sublayerTerminals.on('featureClick', function(e, latlng, pos, data) { 
    showFeature(data.route) 
}); 
}) 
.on('error', function() { 
    //log the error 
}); 

我试图用这个例子:http://bl.ocks.org/javisantana/d20063afd2c96a733002

回答

0

我已经解决了我的问题:

cartodb.createLayer(map, layerUrl, 
{https: true, 
      legends: false, 
      cartodb_logo:false, 
      layerIndex: 1 
}) 
.addTo(map) 
.on('done', function(layer) { 



var sublayerVerbindungen = layer.getSubLayer(1); 
sublayerVerbindungen.hide(); 
sublayerVerbindungen.setInteractivity('cartodb_id, a_route, the_geom, informationen_zur_route'); 
sublayerVerbindungen.setInteraction(true); 

var sublayerCities = layer.getSubLayer(0); 
sublayerCities.show(); 
sublayerCities.setInteractivity('cartodb_id, a_route, the_geom'); 
sublayerCities.setInteraction(true); 

sublayerCities.on('featureClick', function(e, latlng, pos, data) { 
    console.log(data.a_route); 
    var newSql = "SELECT * FROM verbindungen WHERE a_route=" + data.a_route; 
    console.log(newSql); 
    sublayerVerbindungen.setSQL(newSql); 
    sublayerVerbindungen.show(); 
}); 
}) 
.on('error', function() { 
    //log the error 
});