Cartodb点击显示路线

Question

我用 cartodb 创建了一张地图，显示了城市之间的火车连接。为此，我创建了两个数据库：第一个（城市）包含有关城市、路线、顺序的信息。例如城市：汉堡路线：1 order:1、city:lübeck route:1 order:2。在第二个数据库 (verbindungen) 中，我在具有相同路线编号的城市之间划了一条线。在我的地图中，我将每个数据库添加为一个图层。当我加载地图时，只显示城市。现在我希望能够单击一个城市，并且应该只显示该城市的连接 from/to。

到目前为止，这是我的代码：

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

Answer 1

我已经解决了我的问题：

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
});

Cartodb点击显示路线

Cartodb show route on click

javascript

cartodb