Cara menggunakan templat gambar

Artikel
06/27/2023

Gambar dapat digunakan dengan penanda HTML dan berbagai lapisan dalam Azure Maps Web SDK:

Lapisan simbol dapat merender titik di peta dengan ikon gambar. Simbol juga dapat dirender di sepanjang jalur garis.
Lapisan poligon dapat dirender dengan gambar pola isian.
Penanda HTML dapat merender titik menggunakan gambar dan elemen HTML lainnya.

Untuk memastikan performa yang baik pada lapisan, muat gambar ke dalam sumber daya sprite gambar peta sebelum rendering. Secara default, IconOptions dari SymbolLayer sebelumnya memuat beberapa gambar penanda dalam sejumlah warna ke dalam sprite gambar peta. Gambar penanda ini dan lainnya tersedia dalam templat SVG. Templat-templat ini dapat digunakan untuk membuat gambar dengan skala khusus, atau digunakan sebagai warna primer dan sekunder pelanggan. Secara keseluruhan, ada 42 templat gambar yang disediakan: 27 ikon simbol dan 15 pola isian poligon.

Templat gambar dapat ditambahkan ke sumber daya sprite gambar peta dengan menggunakan fungsi map.imageSprite.createFromTemplate. Fungsi ini memungkinkan untuk melewatkan hingga lima parameter;

createFromTemplate(id: string, templateName: string, color?: string, secondaryColor?: string, scale?: number): Promise<void>

id adalah pengidentifikasi unik yang Anda buat. id ditetapkan ke gambar saat ditambahkan ke sprite gambar peta. Gunakan pengidentifikasi ini di lapisan untuk menentukan sumber daya gambar mana yang akan dirender. templateName menentukan templat gambar mana yang akan digunakan. Opsi color mengatur warna utama gambar dan opsi secondaryColor mengatur warna sekunder gambar. Opsi scale menskalakan templat gambar sebelum menerapkannya ke sprite gambar. Ketika gambar diterapkan ke sprite gambar, gambar akan dikonversi menjadi PNG. Untuk memastikan rendering yang tajam, sebaiknya Anda tingkatkan skala templat gambar sebelum menambahkannya ke sprite, daripada meningkatkan skalanya dalam lapisan.

Fungsi ini secara asinkron memuat gambar ke dalam sprite gambar. Dengan demikian, ini mengembalikan Janji bahwa Anda dapat menunggu hingga fungsi ini selesai.

Kode berikut menunjukkan cara membuat gambar dari salah satu templat bawaan, lalu menggunakannya dengan lapisan simbol.

map.imageSprite.createFromTemplate('myTemplatedIcon', 'marker-flat', 'teal', '#fff').then(function () {

   //Add a symbol layer that uses the custom created icon.
   map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
      iconOptions: {
         image: 'myTemplatedIcon'
      }
   }));
});

Menggunakan templat gambar dengan lapisan simbol

Setelah templat gambar dimuat ke dalam sprite gambar peta, templat gambar dapat dirender sebagai simbol dalam lapisan simbol dengan merujuk ID sumber daya gambar dalam opsi image dari iconOptions.

Contoh templat lapisan Simbol dengan ikon bawaan menunjukkan cara melakukan ini dengan merender lapisan simbol menggunakan marker-flat templat gambar dengan warna utama teal dan warna sekunder putih, seperti yang ditunjukkan pada cuplikan layar berikut.

Untuk kode sumber untuk sampel ini, lihat Lapisan simbol dengan kode sampel templat ikon bawaan.

Menggunakan templat gambar di sepanjang jalur garis

Setelah templat gambar dimuat ke dalam sprite gambar peta, templat dapat dirender di sepanjang jalur garis dengan menambahkan LineString ke sumber data dan menggunakan lapisan simbol dengan opsi lineSpacing dan dengan merujuk ID sumber daya gambar dalam opsi image dari iconOptions.

Lapisan Baris dengan templat ikon bawaan menunjukkan cara melakukan ini. Seperti yang ditunjukkan pada cuplikan layar berikut, ini merender garis merah di peta dan menggunakan lapisan simbol menggunakan car templat gambar dengan warna primer biru dodger dan warna sekunder putih. Untuk kode sumber untuk sampel ini, lihat Lapisan baris dengan kode sampel templat ikon bawaan.

Tip

Jika templat gambar menunjuk ke atas, atur opsi ikon rotation pada lapisan simbol ke 90; jika Anda ingin menunjuk ke arah yang sama dengan garis.

Menggunakan templat gambar dengan lapisan poligon

Setelah templat gambar dimuat ke dalam sprite gambar peta, templat dapat dirender sebagai pola isian dalam lapisan poligon dengan merujuk ID sumber daya gambar dalam opsi fillPattern pada lapisan.

Sampel templat Isi poligon dengan ikon bawaan menunjukkan cara merender lapisan poligon menggunakan dot templat gambar dengan warna primer merah dan warna sekunder transparan, seperti yang ditunjukkan pada cuplikan layar berikut. Untuk kode sumber untuk sampel ini, lihat Mengisi poligon dengan kode sampel templat ikon bawaan.

Tip

Mengatur warna sekunder pola isian membuatnya lebih mudah untuk memastikan bahwa peta yang mendasarinya tetap akan menyediakan pola primer.

Menggunakan templat gambar dengan penanda HTML

Templat gambar dapat diambil menggunakan fungsi altas.getImageTemplate dan digunakan sebagai konten penanda HTML. Templat dapat dimasukkan ke opsi htmlContent dari penanda, lalu disesuaikan menggunakan opsi color, secondaryColor, dan text.

Sampel templat ikon bawaan penanda HTML menunjukkan ini menggunakan marker-arrow templat dengan warna primer merah, warna sekunder merah muda, dan nilai teks "00", seperti yang ditunjukkan pada cuplikan layar berikut. Untuk kode sumber untuk sampel ini, lihat Penanda HTML dengan kode sampel templat ikon bawaan.

Tip

Templat gambar juga dapat digunakan di luar peta. Fungsi getImageTemplate mengembalikan string SVG yang memiliki tempat penampung; {color}, {secondaryColor}, {scale}, {text}. Ganti nilai tempat penampung ini untuk membuat string SVG yang valid. Anda kemudian dapat menambahkan string SVG langsung ke DOM HTML atau mengubahnya menjadi URI data dan memasukkannya ke dalam tag gambar. Contohnya:

//Retrieve an SVG template and replace the placeholder values.
var svg = atlas.getImageTemplate('marker').replace(/{color}/, 'red').replace(/{secondaryColor}/, 'white').replace(/{text}/, '').replace(/{scale}/, 1);

//Convert to data URI for use in image tags.
var dataUri = 'data:image/svg+xml;base64,' + btoa(svg);

Membuat templat kustom yang bisa digunakan kembali

Jika aplikasi Anda menggunakan ikon yang sama dalam modul yang berbeda atau jika Anda membuat modul yang menambahkan lebih banyak templat gambar, Anda dapat dengan mudah menambahkan dan mengambil ikon ini dari Azure Peta web SDK. Gunakan fungsi statis berikut pada namespace atlas.

Nama	Jenis Hasil	Deskripsi
`addImageTemplate(templateName: string, template: string, override: boolean)`		Menambahkan templat gambar SVG kustom ke namespace atlas.
`getImageTemplate(templateName: string, scale?: number)`	string	Mengambil templat SVG berdasarkan nama.
`getAllImageTemplateNames()`	string[]	Mengambil templat SVG berdasarkan nama.

Templat gambar SVG mendukung nilai-nilai tempat penampung berikut:

Placeholder	Deskripsi
`{color}`	Warna primer.
`{secondaryColor}`	Warna sekunder.
`{scale}`	Gambar SVG dikonversi menjadi gambar png ketika ditambahkan ke sprite gambar peta. Tempat penampung ini dapat digunakan untuk menskalakan templat sebelum dikonversi untuk memastikannya dirender dengan jelas.
`{text}`	Lokasi untuk merender teks saat digunakan dengan Penanda HTML.

Sampel Tambahkan templat ikon kustom ke namespace layanan atlas menunjukkan cara mengambil templat SVG, dan menambahkannya ke Azure Peta web SDK sebagai templat ikon yang dapat digunakan kembali, seperti yang ditunjukkan pada cuplikan layar berikut. Untuk kode sumber untuk sampel ini, lihat Menambahkan templat ikon kustom ke kode sampel namespace layanan atlas.

Daftar templat gambar

Tabel ini mencantumkan semua templat gambar yang saat ini tersedia dalam Azure Maps web SDK. Nama templat ada di atas setiap gambar. Secara default, warna primer adalah biru dan warna sekunder adalah putih. Untuk membuat warna sekunder lebih mudah dilihat pada latar belakang putih, warna sekunder untuk gambar-gambar berikut ini diatur ke hitam.

Templat ikon simbol

penanda

penanda-tebal

penanda-lingkaran

penanda-datar

ikon penanda

ikon penanda-tebal

ikon penanda-lingkaran

ikon penanda-datar

penanda-kotak

penanda-kotak-kluster

penanda-panah

penanda-bola-pin

ikon penanda-kotak

ikon penanda-kotak-kluster

ikon penanda-bola-pin

penanda-kotak-bulat

penanda-kotak-bulat-kluster

bendera

bendera-segitiga

ikon penanda-kotak-bulat

ikon penanda-kotak-bulat-kluster

segitiga

segitiga-tebal

segitiga-panah ke atas

segitiga-panah ke kiri

ikon segitiga

ikon segitiga-tebal

hexagon

heksagon-tebal

heksagon-bulat

heksagon-bulat-tebal

ikon heksagon

ikon heksagon-tebal

ikon heksagon-bulat

ikon heksagon-bulat-tebal

pin-bulat

bulat-kotak

bulat-kotak-tebal

ikon pin

ikon pin-bulat

ikon bulat-kotak

ikon bulat-kotak-tebal

panah ke atas

panah ke atas tipis

car

ikon mobil

Templat pola isian poligon

catur

catur-diputar

lingkaran

lingkaran-berjarak

ikon catur

ikon catur-diputar

ikon lingkaran

ikon lingkaran-berjarak

diagonal-garis-naik

diagonal-garis-turun

diagonal-strip-naik

diagonal-strip-turun

ikon diagonal-garis-naik

ikon diagonal-garis-turun

ikon diagonal-strip-naik

ikon diagonal-strip-turun

garis kisi

garis kisi-diputar

garis kisi-strip-diputar

x-isian

ikon garis kisi

ikon garis kisi-diputar

ikon garis kisi-strip-diputar

ikon x-isian

zig-zag

zig-zag-vertikal

titik

ikon zig-zag

ikon zig-zag-vertikal

ikon titik

Ikon gambar yang dimuat sebelumnya

Peta ini memuat serangkaian ikon ke dalam sprite gambar peta menggunakan templat marker, pin, dan pin-round. Nama ikon ini dan nilai warnanya tercantum dalam tabel berikut.

nama ikon	color	secondaryColor
`marker-black`	`#231f20`	`#ffffff`
`marker-blue`	`#1a73aa`	`#ffffff`
`marker-darkblue`	`#003963`	`#ffffff`
`marker-red`	`#ef4c4c`	`#ffffff`
`marker-yellow`	`#f2c851`	`#ffffff`
`pin-blue`	`#2072b8`	`#ffffff`
`pin-darkblue`	`#003963`	`#ffffff`
`pin-red`	`#ef4c4c`	`#ffffff`
`pin-round-blue`	`#2072b8`	`#ffffff`
`pin-round-darkblue`	`#003963`	`#ffffff`
`pin-round-red`	`#ef4c4c`	`#ffffff`

Alat “Coba sekarang”

Dengan alat berikut, Anda dapat merender berbagai templat gambar bawaan yang berbeda dengan berbagai cara serta menyesuaikan warna dan skala primer dan sekunder.