通過加入提高自定義CartoDB圖層可視化的性能

我對CartoDB（這很棒，btw）相當新穎，並使用CartoDB.js構建自定義可視化，但我的解決方案在初始加載時相當慢（需要大約1分鐘加負載），其基於文檔here我相信上是我的SQL使用CTE（我確認了他們的GUI對於此映射的結果：http://cdb.io/1hL3pzF，多沒有CTE更快）;但是我還沒有看到提到的另一種方法 - 沒有任何人有一個很好的解決方案？通過加入提高自定義CartoDB圖層可視化的性能

我假設有一個默認名稱分配給查詢（例如，在cartodb.com圖形用戶界面的關聯CartoCSS使用任何表，你開始......），但尚未見過參考。

這是我的工作方法的jsfiddle，也在這裏：

HTML

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

CSS

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

來源

2015-09-05 claytonrsh

如果幫助FUL的人，一個更好的方法是使用cartodb-nodejs庫這一功能轉移到後臺 - 我傻的不能做到這一點從一開始真的。

來源

2015-09-07 20:26:06 claytonrsh

通過加入提高自定義CartoDB圖層可視化的性能

回答

相關問題