Ikona zestawu Mapbox dla featureLayer

Question

Mam problem z ustawieniem ikony dla warstwy obiektów. Wciąż otrzymuję layer.setIcon is not a function i podobne błędy. Jak mogę zmienić styl ikony dla tej warstwy?

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

nie jestem pewien dlaczego, ale żadne z proponowanych rozwiązań dla mnie pracować. Zamiast tego muszę przetestować warstwy warstwy.

 layer.on('layeradd', function(e) { 
      var marker = e.layer, feature = marker.feature; 
      e.layer.getLayers().forEach(function(marker) { 
       marker.setIcon(L.mapbox.marker.icon({ 
        'marker-color': '#8834bb', 
        'marker-size': 'large', 
        'marker-symbol': 'restaurant' 
       })); 
      }) 
     }); 

Answer 2

Możesz użyć prostego stylu do stylizacji geojsona. Wygląda na to, że musi się to wydarzyć przed dodaniem go do warstwy obiektów. Możesz spróbować uruchomić eachLayer zamiast pętli for, a następnie dodać tę warstwę do innej warstwy obiektów, gdy geojson ma odpowiedni styl/ikony. Zostało to zmodyfikowane w stosunku do oryginału example. Lub możesz użyć funkcji Leaflet pointToLayer, jak pokazano poniżej.

var key = 'your key here' 
 
L.mapbox.accessToken = key; 
 
var map = L.mapbox.map('map') 
 
    .setView([37.8, -96], 3); 
 

 
var geojson = [ 
 
    { 
 
    type: 'Feature', 
 
    geometry: { 
 
     type: 'Point', 
 
     coordinates: [-77.031952, 38.913184] 
 
    }, 
 
    properties: { 
 
     title: 'Title' 
 
    } 
 
    } 
 
]; 
 
//Option A - set the properties of the geojson using the simple style spec supported in mapbox.js for mapbox feature layers 
 

 
/*for(i = 0; i < geojson.length; i++) { 
 
    geojson[i].properties['marker-color'] = '#63b6e5'; 
 
    geojson[i].properties['marker-size'] = 'large'; 
 
    geojson[i].properties['marker-symbol'] = 'rocket'; 
 
}*/ 
 

 
//Option B - use the native leaflet function for points - very simple and extendable to other icon plugins 
 
var features = L.geoJson(geojson, { 
 
    pointToLayer: function(feature, latlng){ 
 
    return new L.marker(latlng, { 
 
     icon: L.mapbox.marker.icon({ 
 
     'marker-color': '#00f', 
 
     'marker-symbol': 'star' 
 
     }) 
 
    }) 
 
    } 
 
}).addTo(map);

body { margin:0; padding:0; } 
 
    .map { position:absolute; top:0; bottom:0; width:100%; }

<script src="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js"></script> 
 
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' /> 
 
<div id='map' class='map'></div>

Answer 3

Można spojrzeć na https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker/ i http://leafletjs.com/examples/custom-icons/ aby uzyskać więcej informacji, ale podobno można dopasować swoje potrzeby:

• użyciu własną ikoną stylu. (Pierwszy)

i/lub

• użyciu GeoJSON pliku ikoną stylu. (DRUGI)

Kod:

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); 

zakładając wygląd pliku GeoJSON takiego:

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' 
     } 
    } 
}];