我对 CartoDB 相当陌生(这很棒,顺便说一句)并使用 CartoDB.js 构建自定义可视化,但我的解决方案在初始加载时非常慢(需要大约 1 分钟才能加载),这基于此处的文档我相信这是在我的 SQL 中使用 CTE 的结果(我在他们的 GUI 上确认了这张地图:http ://cdb.io/1hL3pzF ,没有 CTE 会快得多);但是我还没有看到对另一种方法的引用-有人对此有很好的解决方案吗?
我假设为查询分配了一个默认名称(例如,在 cartodb.com GUI 中,关联 CartoCSS 使用您开始使用的任何表......)但尚未看到参考。
这是我的工作方法的一个jsfiddle ,也在这里:
HTML
<div id="map"></div>
CSS
#map { position: absolute; top: 5px; left: 3px; height: 400px; width: 600px; }
JS
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: '© <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);