Question

我刚刚开始使用MapBox，我遇到了一个令人困惑的问题。我使用以下代码创建了一个包含geoJSON图层的地图：

var map = L.mapbox.map('map', '<MapBoxID>');
            var zipLayer = L.mapbox.featureLayer('data/blah.json');
            zipLayer.addTo(map);
            zipLayer.setStyle({color: 'red'});

地图出现并显示geoJSON，但它忽略了样式。当我在浏览器中将最后一行复制到JS控制台时，它可以正常工作。

我在这里缺少什么？另外，我已经尝试了至少十几种不同的方式在featureLayer（）调用中直接包含选项中的样式，但没有任何效果。如何在创建要素图层时指定样式？

Answer 1

我在这里猜一点，因为我不太了解Mapbox JS，但听起来很像异步错误。奇怪的是，我没有在Mapbox或Leaflet API中看到有关此函数回调的任何内容。但是，您可以直接将GeoJSON传递给featureLayer（），因此我建议使用jQuery（或您选择的XHR库）来获取数据：

var map = L.mapbox.map('map', '<MapBoxID>');
var zipLayer;

$.getJSON('data/blah.json', function(data) {
    zipLayer = L.mapbox.featureLayer(data);
    zipLayer.addTo(map);
    zipLayer.setStyle({color: 'red'});
});

希望能够做到这一点。

Answer 2

我会使用内置的featureLayer函数，然后听它准备就绪。这应该有助于您指出正确的方向：

var featureLayer = L.mapbox.featureLayer()
    .loadURL('/example-single.geojson')
    .on('ready', function(layer) {
        this.eachLayer(function(marker) {
            // See the following for styling hints:
            // https://help.github.com/articles/mapping-geojson-files-on-github#styling-features
            marker.setIcon(L.mapbox.marker.icon({
                'marker-color': '#CC0000'
            }));
        });
    })
    .addTo(map);

Answer 3

您是否尝试在设置样式后添加zipLayer？

在MapBox中设置geoJSON要素图层样式

3 个答案: