Wiele przykładów zawsze ładuje obraz ikony w ten sposób (na przykład tutaj: https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/ ):
map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}-15",
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
Gdzie jest przechowywana ta ikona i jak mogę połączyć się z lokalnym png lub svg? Lub jak mogę umieścić własne markers
źródło? Przykład nie jest zbyt dobrze udokumentowany.
Odpowiedzi:
Jeśli podążysz za przykładami, otrzymasz tylko duszki, które ładują się z arkuszem ikon danego stylu, co NIE JEST KONIECZNIE pasowaniem 1 do 1 z jakimkolwiek innym stylem.
np .: emerald-v8 NIE ma „ikony-obrazu”: „port-15”, podobnie jak w przykładzie wykorzystującym ulice-v8.
Aby zobaczyć listę dostępnych ikonek z odpowiednich stylów: https://github.com/mapbox/mapbox-gl-styles/tree/master/sprites
Mogę wybrać ikonę „harbour” z repozytorium emerald-v8 w następujący sposób:
Oto zasób, który pomógł mi zebrać to wszystko razem i wyjaśnia, jak tworzyć własne ikony: https://www.mapbox.com/help/custom-markers/#locate-mapbox-styles-images
EDYTOWAĆ:
Zasadniczo, aby dodać jedną z własnych ikon, przejdź do studia Mapbox, stwórz własny styl lub edytuj jedną z nich. Po prostu dodaj jeden ze swoich plików SVG, a następnie ta ikona stanie się dostępna w niestandardowym arkuszu sprite.
źródło
Możesz także użyć zewnętrznych / wygenerowanych ikon tak
icon-image
, jakbyś używałmap.loadImage()
imap.addImage()
pierwszy.Przykłady:
Dodaj ikonę do mapy
Dodaj wygenerowaną ikonę do mapy
źródło
Jak powiedziano w dokumentach sprite : Przejdź
"sprite": "https://link"
do swojego stylu, gdzielink
jest link do json genereted z spritezero-cli . spritezero-cli wygenerował duszek png z listy twoich ikon w formacie svg. Możesz używać ikon w warstwach symboli jako'icon-image'
.źródło