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 markers
sumber saya sendiri ? Contohnya tidak didokumentasikan dengan baik.
Jawaban:
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:
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.
sumber
Anda juga dapat menggunakan ikon eksternal / yang dihasilkan seolah-
icon-image
olah Anda menggunakanmap.loadImage()
danmap.addImage()
terlebih dahulu.Contoh:
Tambahkan ikon ke peta
Tambahkan ikon yang dihasilkan ke peta
sumber
Seperti yang dikatakan dalam dokumen sprite : Lulus
"sprite": "https://link"
ke gaya Anda, di manalink
tautan 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'
.sumber