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.


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



Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.