Görüntü şablonlarını kullanma

Makale
08/30/2024

Görüntüler, Azure Haritalar web SDK'sı içindeki HTML işaretçileri ve çeşitli katmanlarla kullanılabilir:

Sembol katmanları haritadaki noktaları bir resim simgesiyle işleyebilir. Simgeler bir çizgi yolu boyunca da işlenebilir.
Çokgen katmanlar bir dolgu deseni görüntüsüyle işlenebilir.
HTML işaretçileri görüntüleri ve diğer HTML öğelerini kullanarak noktaları işleyebilir.

Katmanlarla iyi bir performans sağlamak için, işlemeden önce görüntüleri harita görüntüsü sprite kaynağına yükleyin. SymbolLayer'ın IconOptions işlevi, bir dizi renkteki birkaç işaretçi görüntüsünü varsayılan olarak harita görüntüsü spritesine önceden yükler. Bu işaretçi görüntüleri ve daha fazlası SVG şablonları olarak kullanılabilir. Bunlar, özel ölçeklerle görüntü oluşturmak için veya müşteri birincil ve ikincil rengi olarak kullanılabilir. Toplamda sağlanan 42 resim şablonu vardır: 27 sembol simgesi ve 15 çokgen dolgu deseni.

görüntü şablonları, işlevini kullanarak harita görüntüsü sprite kaynaklarına map.imageSprite.createFromTemplate eklenebilir. Bu işlev en fazla beş parametrenin geçirilmesini sağlar;

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

id, oluşturduğunuz benzersiz bir tanımlayıcıdır. id, harita görüntüsü sprite'sine eklendiğinde görüntüye atanır. Hangi görüntü kaynağının işleneceğini belirtmek için katmanlarda bu tanımlayıcıyı kullanın. , templateName hangi görüntü şablonunun kullanılacağını belirtir. color seçeneği görüntünün birincil rengini, seçenekler ise secondaryColor görüntünün ikincil rengini ayarlar. seçeneği, scale görüntü şablonunu görüntü sprite'sine uygulamadan önce ölçeklendirir. Resim, görüntü spritesine uygulandığında PNG'ye dönüştürülür. Net işleme sağlamak için, görüntü şablonunu sprite eklemeden önce ölçeğini büyütmek, bir katmanda ölçeğini genişletmekten daha iyidir.

Bu işlev, görüntüyü zaman uyumsuz olarak görüntü spritesine yükler. Böylece, bu işlevin tamamlanmasını bekleyebileceğiniz bir Promise döndürür.

Aşağıdaki kod, yerleşik şablonlardan birinden görüntü oluşturmayı ve ardından bunu bir sembol katmanıyla kullanmayı gösterir.

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'
      }
   }));
});

Simge katmanıyla resim şablonu kullanma

Harita görüntüsü sprite'sine bir görüntü şablonu yüklendikten sonra, seçeneğindeki iconOptionsgörüntü kaynak kimliğine başvurarak bir simge katmanında image sembol olarak işlenebilir.

Yerleşik simgeli Simge katmanı şablon örneği, aşağıdaki ekran görüntüsünde gösterildiği gibi, resim şablonunu birincil renk ve beyaz ikincil renkle kullanarak marker-flat bir simge katmanını işleyerek bunun nasıl yapılacağını gösterir.

Bu örneğin kaynak kodu için bkz . Yerleşik simge şablonu örnek kodu içeren sembol katmanı.

Çizgi yolu boyunca resim şablonu kullanma

Harita görüntüsü sprite'sine bir görüntü şablonu yüklendikten sonra, bir veri kaynağına LineString eklenerek ve bir seçenek içeren lineSpacingbir sembol katmanı kullanılarak ve görüntü kaynağının kimliğine th iconOptionsseçeneğinde image başvurarak çizginin yolu boyunca işlenebilir.

Yerleşik simge şablonuna sahip Çizgi katmanı bunun nasıl yapılacağını gösterir. Aşağıdaki ekran görüntüsünde gösterildiği gibi, harita üzerinde kırmızı bir çizgi oluşturur ve dodger mavi birincil rengi ve beyaz ikincil rengi olan görüntü şablonunu kullanarak car bir sembol katmanı kullanır. Bu örneğin kaynak kodu için bkz . Yerleşik simge şablonu örnek kodu içeren çizgi katmanı.

İpucu

Resim şablonu işaret ederse, çizgiyle rotation aynı yöne işaret etmelerini istiyorsanız simge katmanının simge seçeneğini 90 olarak ayarlayın.

Çokgen katmanıyla resim şablonu kullanma

Harita görüntüsü sprite'sine bir görüntü şablonu yüklendikten sonra, katman seçeneğinde görüntü kaynak kimliğine başvurarak çokgen katmanında fillPattern dolgu deseni olarak işlenebilir.

Çokgeni yerleşik simgeyle doldur şablon örneği, aşağıdaki ekran görüntüsünde gösterildiği gibi, resim şablonunu kırmızı birincil renk ve saydam ikincil renkle kullanarak dot çokgen katmanın nasıl işlenip işlenileceğini gösterir. Bu örneğin kaynak kodu için bkz . Çokgeni yerleşik simge şablonu örnek koduyla doldurma.

İpucu

Dolgu desenlerinin ikincil rengini ayarlamak, temel haritanın daha kolay görülmesini sağlar ve birincil deseni sağlamaya devam eder.

HTML işaretçisi ile resim şablonu kullanma

Görüntü şablonu işlevi kullanılarak altas.getImageTemplate alınabilir ve HTML işaretçisinin içeriği olarak kullanılabilir. Şablon, işaretçi seçeneğine htmlContent geçirilebilir ve ardından , secondaryColorve text seçenekleri kullanılarak colorözelleştirilebilir.

Yerleşik simgeli HTML İşaretçisi şablon örneği, aşağıdaki ekran görüntüsünde gösterildiği gibi kırmızı birincil renk, pembe ikincil renk ve "00" metin değeri içeren şablonu kullanarak marker-arrow bunu gösterir. Bu örneğin kaynak kodu için bkz . Yerleşik simge şablonu örnek kodu içeren HTML İşaretçisi.

İpucu

Görüntü şablonları haritanın dışında da kullanılabilir. getImageTemplate funciton, yer tutucuları olan bir SVG dizesi döndürür; {color}, {secondaryColor}, {scale}, {text}. Geçerli bir SVG dizesi oluşturmak için bu yer tutucu değerlerini değiştirin. Ardından SVG dizesini doğrudan HTML DOM'a ekleyebilir veya bir veri URI'sine dönüştürebilir ve bir görüntü etiketine ekleyebilirsiniz. Örneğin:

//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);

Özel yeniden kullanılabilir şablonlar oluşturma

Uygulamanız farklı modüllerde aynı simgeyi kullanıyorsa veya daha fazla görüntü şablonu ekleyen bir modül oluşturuyorsanız, Azure Haritalar web SDK'sından kolayca bu simgeleri ekleyebilir ve alabilirsiniz. Ad alanında atlas aşağıdaki statik işlevleri kullanın.

Veri Akışı Adı	Dönüş Türü	Açıklama
`addImageTemplate(templateName: string, template: string, override: boolean)`		Atlas ad alanına özel bir SVG görüntü şablonu ekler.
`getImageTemplate(templateName: string, scale?: number)`	Dize	Ada göre bir SVG şablonu alır.
`getAllImageTemplateNames()`	string[]	Ada göre bir SVG şablonu alır.

SVG görüntü şablonları aşağıdaki yer tutucu değerleri destekler:

Yer tutucu	Açıklama
`{color}`	Birincil renk.
`{secondaryColor}`	İkincil renk.
`{scale}`	SVG görüntüsü, harita görüntüsü sprite'sine eklendiğinde png görüntüsüne dönüştürülür. Bu yer tutucu, bir şablonun açıkça işlendiğine emin olmak için dönüştürülmeden önce ölçeklendirmek için kullanılabilir.
`{text}`	HTML İşaretçisi ile kullanıldığında metnin işlenme konumu.

Atlas ad alanına özel simge şablonu ekleme örneği, aşağıdaki ekran görüntüsünde gösterildiği gibi bir SVG şablonunun nasıl alınıp Azure Haritalar web SDK'sına yeniden kullanılabilir bir simge şablonu olarak ekleneceğini gösterir. Bu örneğin kaynak kodu için bkz . Atlas ad alanı örnek koduna özel simge şablonu ekleme.

Resim şablonlarının listesi

Bu tabloda şu anda Azure Haritalar web SDK'sı içinde kullanılabilen tüm görüntü şablonları listelenir. Şablon adı her görüntünün üstündedir. Varsayılan olarak birincil renk mavi, ikincil renk ise beyazdır. İkincil rengin beyaz arka planda daha kolay görülmesini sağlamak için aşağıdaki görüntülerde ikincil renk siyah olarak ayarlanmıştır.

Simge simgesi şablonları

Işaretleyici

işaretleyici kalın

işaretçi daire

marker-flat

işaretçi simgesi

işaretçi kalın simgesi

işaretçi daire simgesi

düz işaretçi simgesi

işaretçi karesi

marker-square-cluster

işaretleyici-ok

marker-ball-pin

işaretçi-kare simgesi

marker-square-cluster simgesi

marker-ball-pin simgesi

işaretçi kare yuvarlatılmış

işaretçi kare yuvarlatılmış küme

flag

bayrak üçgeni

işaretçi kare yuvarlatılmış simgesi

marker-square-rounded-cluster icon

üçgen

üçgen kalın

yukarı üçgen ok

üçgen-ok-sol

üçgen simgesi

üçgen kalın simgesi

altıgen

hexagon-thick

altıgen yuvarlatılmış

altıgen yuvarlatılmış kalın

altıgen simgesi

altıgen kalın simgesi

altıgen yuvarlatılmış simge

altıgen yuvarlatılmış kalın simge

iğne

pin-round

yuvarlatılmış kare

yuvarlak kare-kalın

raptiye simgesi

yuvarla simgesi

yuvarlatılmış kare simgesi

yuvarlatılmış kare-kalın simgesi

yukarı ok

yukarı ok-ince

car

araba simgesi

Çokgen dolgu deseni şablonları

Denetleyicisi

dama döndürülmüş

Daire

aralıklı daireler

dama simgesi

dama döndürülmüş simgesi

daire simgesi

daire aralıklı simgesi

çapraz çizgi yukarı

çapraz çizgiler aşağı

çapraz çizgili yukarı

çapraz çizgili-aşağı

çapraz-çizgi-yukarı simgesi

çapraz çizgiler aşağı simgesi

çapraz çizgili-yukarı simgesi

çapraz çizgili-aşağı simgesi

kılavuz çizgileri

döndürülmüş kılavuz çizgileri

x dolgusu

kılavuz çizgileri simgesi

döndürülmüş kılavuz çizgileri simgesi

x-fill simgesi

zig-zag

zig-zag-vertical

Nokta

zig-zag simgesi

zig-zag-vertical simgesi

noktalar simgesi

Önceden yüklenmiş görüntü simgeleri

Harita, , pinve pin-round şablonlarını kullanarak bir dizi simgeyi harita görüntüsü sprite'sine markerönceden yükler. Bu simge adları ve renk değerleri aşağıdaki tabloda listelenmiştir.

simge adı	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`

Şimdi deneyin aracı

Aşağıdaki araçla, farklı yerleşik görüntü şablonlarını çeşitli şekillerde işleyebilir, birincil ve ikincil renkleri özelleştirebilir ve ölçeklendikleyebilirsiniz.