Mapbox GL AddLayer: Dari mana gambar ikon berasal

10

Banyak contoh selalu memuat gambar ikon seperti ini (Sebagai contoh di sini: 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"
    }
});

Di mana ikon ini disimpan dan bagaimana saya bisa menautkan ke png atau svg lokal? Atau bagaimana saya bisa memasukkan markerssumber saya sendiri ? Contohnya tidak didokumentasikan dengan baik.

tobias47n9e
sumber
Apakah Anda memeriksa bagian 'referensi gaya' dari dokumen API?
Tangnar
3
Ini tidak dijelaskan dengan baik menurut pendapat saya. Akan senang melihat contoh kerja yang dijelaskan dengan baik.
tobias47n9e

Jawaban:

13

Jika Anda mengikuti contoh, Anda hanya mendapatkan sprite yang memuat dengan sprite sheet gaya khusus Anda, yang TIDAK SELALU cocok 1 hingga 1 dengan gaya lainnya.

mis: emerald-v8 TIDAK memiliki "icon-image": "harbour-15" seperti contoh yang menggunakan streets-v8.

Untuk melihat daftar sprite yang tersedia dari gaya yang sesuai: https://github.com/mapbox/mapbox-gl-styles/tree/master/sprites

Saya dapat memilih ikon "harbour" dari repositori emerald-v8 seperti:

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

Berikut adalah sumber daya yang membantu saya menggabungkan semuanya, dan itu menjelaskan cara membuat ikon Anda sendiri: https://www.mapbox.com/help/custom-markers/#locate-mapbox-styles-images

EDIT:

Pada dasarnya, untuk menambahkan salah satu ikon Anda sendiri, masuk ke studio Mapbox, buat gaya Anda sendiri, atau edit salah satu dari mereka. Cukup tambahkan salah satu SVG Anda sendiri, maka ikon itu akan tersedia untuk Anda ke dalam lembar sprite khusus Anda.masukkan deskripsi gambar di sini

CCantey
sumber
0

Seperti yang dikatakan dalam dokumen sprite : Lulus "sprite": "https://link"ke gaya Anda, di mana linktautan ke json dibuat dengan spritezero-cli . spritezero-cli dihasilkan png sprite dari daftar ikon Anda dalam format svg. Anda dapat menggunakan ikon di layer simbol sebagai 'icon-image'.

microspace
sumber