Javascript 使用join提高自定义CartoDB图层可视化的性能

我对CartoDB相当陌生（顺便说一句，这是非常棒的），并且使用CartoDB.js来构建自定义可视化，但是我的解决方案在初始加载时非常慢（加载大约需要1分钟以上），基于我相信的文档，这是在我的SQL中使用CTE的结果（我在这个地图的GUI上确认了这一点：，没有CTE，速度要快得多）；但是我还没有看到其他方法的参考——有人有好的解决方案吗

我假设有一个默认名称分配给查询（例如在cartodb.com GUI中，关联的CartoCSS使用您开始使用的任何表…），但尚未看到引用

以下是我的工作方法的一部分，也包括：

HTML

JS

var-map=newl.map（'map'）；
/*这是可行的，但相当缓慢。。。
从cartodb调用查询的结果是什么？
*/
var cartocss=“#摘要_tbl{多边形填充：#F1EEF6；多边形不透明度：0.8；线条颜色：#FFF；线条宽度：0.5；线条不透明度：1；}”；
cartocss=cartocss+'#摘要(待定)[甲烷如果对任何人都有帮助，更好的方法是使用库将此函数移动到后端-我真傻，从一开始就不这么做。
如果对任何人有帮助，更好的方法是使用库将此函数移动到后端-我真傻，从一开始就不这么做真的

<div id="map"></div>

#map { position: absolute; top: 5px; left: 3px; height: 400px; width: 600px; }

    var map = new L.map('map');

/* this works but is quite slow...
what is result of query called from cartodb?
*/
var cartocss = '#summary_tbl{ polygon-fill: #F1EEF6; polygon-opacity: 0.8; line-color: #FFF; line-width: 0.5; line-opacity: 1;}';
cartocss = cartocss + '#summary_tbl [ methane <= 158.47731712611244] { polygon-fill: #91003F; }';
    cartocss = cartocss + '#summary_tbl [ methane <= 135] { polygon-fill: #CE1256; }';
    cartocss = cartocss + '#summary_tbl [ methane <= 120.95519348268839] { polygon-fill: #E7298A; }';
    cartocss = cartocss + '#summary_tbl [ methane <= 112.3529411764706] { polygon-fill: #DF65B0; }';
    cartocss = cartocss + '#summary_tbl [ methane <= 108.42857142857143] { polygon-fill: #C994C7; }';
    cartocss = cartocss + '#summary_tbl [ methane <= 104.09859154929578] { polygon-fill: #D4B9DA; }';
    cartocss = cartocss + '#summary_tbl [ methane <= 98.36206896551724] { polygon-fill: #F1EEF6; }';

var sql_summ = "WITH summary_tbl AS (SELECT avg(n.methane) as methane, count(n.cartodb_id) record_count, h.the_geom_webmercator ";
    sql_summ = sql_summ + "FROM nurve_sample_boston_0828 n JOIN hex_base_v500m h ON ST_Within(n.the_geom, h.the_geom) ";
    sql_summ = sql_summ + "GROUP BY h.the_geom_webmercator) SELECT methane, the_geom_webmercator FROM summary_tbl";

var cbd_layer = {
  user_name: 'crshunter', // Required
  type: 'cartodb', // Required
  sublayers: [{
    sql: sql_summ,
    cartocss: cartocss, // Required
    interactivity: "methane"
  }]
};

$(document).ready(function () {
    map.on('load', function(e){
        // grab OSM basemap for context
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        cartodb.createLayer(map, cbd_layer).addTo(map);
    });
});

var startPosition = new L.LatLng(42.3601, -71.0589); // Boston, MA
map.setView(startPosition, 12);