Biểu tượng thiết lập hộp bản đồ cho featureLayer

Question

Tôi đang gặp một số vấn đề với việc đặt biểu tượng cho lớp đối tượng địa lý. Tôi tiếp tục nhận được layer.setIcon is not a function và các lỗi tương tự. Làm cách nào để thay đổi kiểu biểu tượng cho lớp này?

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

Tôi không chắc chắn lý do tại sao, nhưng không ai trong số các giải pháp được đề nghị làm việc cho tôi. Thay vào đó, tôi phải lặp qua các lớp của lớp.

 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

Bạn có thể sử dụng thông số kiểu đơn giản để tạo kiểu geojson. Có vẻ như điều này cần phải xảy ra trước khi bạn thêm nó vào lớp đối tượng địa lý. Bạn có thể thử chạy eachLayer thay vì vòng lặp for, sau đó thêm lớp đó vào một lớp đối tượng khác, khi geojson có kiểu/biểu tượng bạn muốn. Điều này được sửa đổi từ example gốc. Hoặc bạn có thể sử dụng chức năng pointToLayer của Leaflet như hình dưới đây.

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

Bạn có thể có một cái nhìn tại https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker/ và http://leafletjs.com/examples/custom-icons/ để có thêm thông tin, nhưng dường như bạn có thể phù hợp với nhu cầu của bạn:

• sử dụng biểu tượng của bạn phong cách riêng. (FIRST)

và/hoặc

• sử dụng GeoJSON file icon phong cách. (THỨ HAI)

Mã:

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

giả giao diện tập tin GeoJSON như thế này:

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