Mapbox seti simgesi featureLayer

Question

için bir özellik katman için bir simge ayarı ile bazı sorunlar yaşıyorum. layer.setIcon is not a function ve benzeri hatalar almaya devam ediyorum. Bu katmanın ikon stilini nasıl değiştirebilirim?

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

neden emin değilim, ancak önerilen çözümlerin hiçbiri benim için çalışıyor. Bunun yerine katmanın katmanları boyunca yinelemek zorundayım.

 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

Geojson stili için basit stil özelliklerini kullanabilirsiniz. Bu özellik katmanına eklemeden önce olması gereken gibi görünüyor. For döngüsünü yerine herLayer'ı çalıştırmayı deneyebilir, ardından geojson istediğiniz stile/simgelere sahip olduğunda bu katmanı başka bir özellik katmanına ekleyebilirsin. Bu, orijinal example'dan değiştirilmiştir. Veya aşağıda gösterildiği gibi Leaflet pointToLayer işlevini kullanabilirsiniz.

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

Daha fazla bilgi almak için https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker/ ve http://leafletjs.com/examples/custom-icons/ bakmak, ancak görünüşe göre size ihtiyacı uygun olabilir:

• Kendi simge stilini kullanarak. (İLK)

ve/veya GeoJSON dosya simgesi stilini kullanılarak

• . (İKİNCİ)

kodu: Böyle GeoJSON dosya göz varsayarak

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

:

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