将CartoDb图层添加到Leaflet图层控制中。

Question

我正在尝试在Leaflet地图上切换CartoDb图层的显示。我已经能够使用以下代码加载该图层：

       var layerUrl = 'http://ronh-aagis.cartodb.com/api/v1/viz/rotaryclubs_geo2/viz.json';

       var clubPts = cartodb.createLayer(map, layerUrl, {
           // The ST_AsGeoJSON(ST_Simplify(the_geom,.01)) as geometry will store a simplified GeoJSON representation of each polygon as an attribute we can pick up on hover

           query: 'select  *, ST_AsGeoJSON(the_geom) as geometry from {{table_name}}',

           interactivity: 'cartodb_id, geometry'
       })

                          .on('done', function(layer) {
                              map.addLayer(layer);

                          layer.on('featureOver', function(e, pos, latlng, data) {
                       $('.leaflet-container').css('cursor','pointer');

                       if (data.cartodb_id != point.cartodb_id) {
                           drawHoverPoint(data);
                       }
                       cartodb.log.log(pos, data);
                   });

                   layer.on('featureOut', function(e, pos, latlng, data) {
                       $('.leaflet-container').css('cursor','default')
                       removePoint();
                   });

                   layer.on('error', function(err) {
                       cartodb.log.log('error: ' + err);
                   });

               }).on('error', function() {
                   cartodb.log.log("some error occurred");
               });

然而，当我尝试将此图层添加到图层控件中时：

       var clubs = new L.LayerGroup();
       clubs.addLayer(clubPts);

我遇到了一个"Uncaught TypeError: Object # has no method 'onAdd'"的错误。有什么想法吗？谢谢！

- Ron House

---

你是否尝试在HTML头部同时加载leaflet.js和cartodb.js？如果你先加载了cartodb.js，然后又用leaflet.js覆盖了其中的一部分，那么这看起来就像是你会遇到的错误类型。 - Martin Burch

Answer 1

降低复杂度并快速上手的好方法是使用已经构建好的Leaflet插件，例如具有内置CartoDB支持的Vector Layers。请查看此处的演示。

http://jasonsanford.github.io/leaflet-vector-layers/demos/cartodb/

- snkashis