Question

我使用Cartodb的geojson在我的地图上画一条线。如何在这一行上设置一些样式？我不熟悉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。看看我为你制作的以下内容： 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不会接受此类异步操作的回调！

Answer 2

这是前一个答案的一些替代语法：

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

$.getJSON( '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',
            function (data) {
    linelayer.setGeoJSON(data);
    linelayer.setStyle({color: '#f00', weight: 4, opacity: 0.4});
}).fail(function( jqxhr, textStatus, error ) {
    var err = textStatus + ", " + error;
    //console.log( "Request Failed: " + err );
});

在mapbox / leaflet中的样式geojson线

2 个答案: