Mapbox GL AddLayer: Skąd pochodzą obrazy ikon

10

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.

tobias47n9e
źródło
Czy sprawdziłeś sekcję „odniesienie do stylu” w dokumentacji API?
Tangnar
3
Moim zdaniem nie jest to dobrze wyjaśnione. Chciałbym zobaczyć dobrze wyjaśniony przykład roboczy.
tobias47n9e

Odpowiedzi:

13

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:

map.addLayer({
    "id": "pointclick",
    type: 'symbol',
    source: 'pointclick',
    "layout": {
        "icon-image": "harbor_icon",
        "icon-size":1.5
    },
    "paint": {}
});

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.wprowadź opis zdjęcia tutaj

CCantey
źródło
0

Jak powiedziano w dokumentach sprite : Przejdź"sprite": "https://link" do swojego stylu, gdzie linkjest 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'.

mikroprzestrzeń
źródło