javascript - 在 mapbox/leaflet 中设置 geojson 行的样式

Question

我使用 Cartodb 中的 geojson 在我的 map 上画一条线。我怎样才能在这条线上设置一些样式？我不熟悉 javascript，所以请多多包涵。这是我的行代码，包括我想要的样式:

    var mystyle = {
        "color": "#fff",
        "weight": 10,
        "opacity": 0.4
    };

var linelayer = L.mapbox.featureLayer()
.loadURL('http://aftonbladet2.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT ST_MakeLine(CDB_LatLng(latitude, longitude) ORDER BY created_date DESC) as the_geom FROM instagram')       
.addTo(map);

任何帮助将不胜感激!马丁

Answer 1

为此你必须使用setStyle。看看我为您制作的以下 plunk: http://plnkr.co/edit/Up6x7H?p=preview

有关更多样式选项，请访问 mapbox api @ https://www.mapbox.com/mapbox.js/api/v2.0.1/l-path/

这是实际的代码片段:

var linelayer = L.mapbox.featureLayer();
linelayer.loadURL('http://aftonbladet2.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT ST_MakeLine(CDB_LatLng(latitude, longitude) ORDER BY created_date DESC) as the_geom FROM instagram');
linelayer.addTo(map);

/* Need to wait for geoJSON to finish loading */
setTimeout(function(){
  linelayer.setStyle({color: '#f00', weight: 10, opacity: 0.4});
},1000);

在应用样式之前，您需要等待来自 loadURL(...) 的 geoJSON 完成加载。您必须找到更好的方法来做到这一点。

更新:您可以添加更多代码并自行获取 geoJSON。这增加了体积，但消除了使用不可预测的 setTimeout 的需要。

var linelayer = L.mapbox.featureLayer();
linelayer.addTo(map);

/* Fetch geoJSON manually and set styles in a predictable fashion */
$.ajax({
  url: 'http://aftonbladet2.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT ST_MakeLine(CDB_LatLng(latitude, longitude) ORDER BY created_date DESC) as the_geom FROM instagram',
  datatype: 'jsonp',
  success: function(data){
    linelayer.setGeoJSON(data);
    linelayer.setStyle({color: '#f00', weight: 10, opacity: 0.4});
  }
});

仍然无法相信 mapbox 不接受此类异步操作的回调!