Вы можете посмотреть на https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker/ и http://leafletjs.com/examples/custom-icons/, чтобы получить больше информации, но, видимо, вы можете соответствовать вашим потребностям:
- используя свой собственный стиль значок. (FIRST)
и/или
- использованием 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'
}
}
}];
Где вы хотите сохранить стиль? На стороне geoJSON или непосредственно на стороне веб-страницы? –
Сторона веб-страницы да –
Итак, вы пытались использовать метод «ПЕРВЫЙ»? –