leaflet - 为 featureLayer 设置 Mapbox 图标

Question

我在为要素图层设置图标时遇到了一些问题。我不断收到 layer.setIcon is not a function和类似的错误。如何更改此图层的图标样式？

 var layer = L.mapbox.featureLayer()
            .loadURL(attrs.geoJsonSource)
            .addTo(map);

        layer.on('ready', function() {
            this.eachLayer(function(layer){
                layer.setIcon(L.mapbox.marker.icon({
                    'marker-color': '#8834bb',
                    'marker-size': 'large',
                    'marker-symbol': 'restaurant'
                }))
            });
            map.fitBounds(featureLayer.getBounds());
        });

Answer 1

你可以看看https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker/和 http://leafletjs.com/examples/custom-icons/获取更多信息，但显然您可能适合您的需要:

使用 您自己的图标样式 . (第一)

和/或

使用 geoJSON 文件图标样式 . (第二)

编码:

var map = L.mapbox.map('map', 'mapbox.streets').setView([40, -74.50], 9);
var layer = L.mapbox.featureLayer().addTo(map);

layer.on('layeradd', function(e) {
    var marker = e.layer,feature = marker.feature;

    // TWO POSSIBILITIES

    // FIRST // your own method to define how icon will be rendered   
    marker.setIcon(L.mapbox.marker.icon({
        'marker-color': '#8834bb',
        'marker-size': 'large',
        'marker-symbol': 'restaurant' 
    }));

    // SECOND // use json directly to define how icon will be rendered   
    //marker.setIcon(L.mapbox.marker.icon(feature.properties.icon));
});

layer.setGeoJSON(geoJson);

假设 geoJSON 文件如下所示:

var geoJson = [{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-75.00, 40]
    },
    "properties": {
        "title": "Small astronaut",
        "icon": {
            'marker-color': '#0034bb',
            'marker-size': 'large',
            'marker-symbol': 'restaurant' 
        }
    }
}, {
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-74.00, 40]
    },
    "properties": {
        "title": "Big astronaut",
        "icon": {
            'marker-color': '#8834bb',
            'marker-size': 'large',
            'marker-symbol': 'restaurant' 
        }
    }
}];