Jak używać szablonów obrazów

Artykuł
10/14/2024

Obrazy mogą być używane ze znacznikami HTML i różnymi warstwami w internetowym zestawie SDK usługi Azure Maps:

Warstwy symboli mogą renderować punkty na mapie z ikoną obrazu. Symbole można również renderować wzdłuż ścieżki linii.
Warstwy wielokątne można renderować za pomocą obrazu wzorca wypełnienia.
Znaczniki HTML mogą renderować punkty przy użyciu obrazów i innych elementów HTML.

Aby zapewnić dobrą wydajność w warstwach, przed renderowaniem załaduj obrazy do zasobu sprite obrazu mapy. IkonaOpcje symboli wstępnie ładuje kilka obrazów znaczników w kilku kolorach do sprite obrazu mapy, domyślnie. Te obrazy znaczników i inne są dostępne jako szablony SVG. Mogą służyć do tworzenia obrazów z niestandardowymi skalami lub używane jako podstawowy i pomocniczy kolor klienta. W sumie dostępnych jest 42 szablonów obrazów: 27 ikon symboli i 15 wzorów wypełnienia wielokątnych.

Szablony obrazów można dodawać do zasobów sprite obrazu mapy przy użyciu map.imageSprite.createFromTemplate funkcji . Ta funkcja umożliwia przekazanie maksymalnie pięciu parametrów;

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

Jest id to unikatowy identyfikator, który tworzysz. Element id jest przypisywany do obrazu po dodaniu go do elementu sprite obrazu mapy. Użyj tego identyfikatora w warstwach, aby określić zasób obrazu do renderowania. Parametr templateName określa, który szablon obrazu ma być używany. Opcja color ustawia podstawowy kolor obrazu, a secondaryColor opcje ustawiają pomocniczy kolor obrazu. Opcja scale skaluje szablon obrazu przed zastosowaniem go do sprite obrazu. Gdy obraz jest stosowany do sprite obrazu, jest konwertowany na PNG. Aby zapewnić renderowanie ostre, lepiej jest skalować szablon obrazu w górę przed dodaniem go do sprite, niż skalować go w górę w warstwie.

Ta funkcja asynchronicznie ładuje obraz do sprite obrazu. W związku z tym zwraca obietnicę, którą można poczekać na ukończenie tej funkcji.

Poniższy kod pokazuje, jak utworzyć obraz na podstawie jednego z wbudowanych szablonów, a następnie użyć go z warstwą symboli.

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

Używanie szablonu obrazu z warstwą symboli

Po załadowaniu szablonu obrazu do sprite obrazu mapy można go renderować jako symbol w warstwie symboli, odwołując się do identyfikatora zasobu obrazu w image opcji iconOptions.

Przykładowa warstwa symboli z wbudowanym szablonem ikon pokazuje, jak to zrobić, renderując warstwę symboli przy użyciu marker-flat szablonu obrazu z kolorem podstawowym i białym kolorem pomocniczym, jak pokazano na poniższym zrzucie ekranu.

Aby zapoznać się z kodem źródłowym dla tego przykładu, zobacz Warstwa symboli z wbudowanym kodem przykładowym szablonu ikony.

Używanie szablonu obrazu wzdłuż ścieżki linii

Po załadowaniu szablonu obrazu do sprite obrazu mapy można go renderować wzdłuż ścieżki wiersza, dodając element LineString do źródła danych i używając warstwy symboli z opcją lineSpacingi odwołując się do identyfikatora zasobu obrazu w image opcji iconOptions.

W szablonie Warstwa liniowa z wbudowaną ikoną pokazano, jak to zrobić. Jak pokazano na poniższym zrzucie ekranu, renderuje czerwoną linię na mapie i używa warstwy symboli przy użyciu car szablonu obrazu z niebieskim kolorem podstawowym i białym kolorem pomocniczym. Aby zapoznać się z kodem źródłowym dla tego przykładu, zobacz Przykładowy kod w warstwie liniowej z wbudowanym szablonem ikony.

Napiwek

Jeśli szablon obrazu wskazuje, ustaw rotation opcję ikony warstwy symboli na 90, jeśli chcesz, aby wskazywała ten sam kierunek co linia.

Używanie szablonu obrazu z warstwą wielokątną

Po załadowaniu szablonu obrazu do sprite obrazu mapy można go renderować jako wzorzec wypełnienia w warstwie wielokątnej, odwołując się do identyfikatora zasobu obrazu w fillPattern opcji warstwy.

Przykładowy szablon Fill z wbudowanym szablonem ikon pokazuje, jak renderować warstwę wielokątną przy użyciu dot szablonu obrazu z czerwonym kolorem podstawowym i przezroczystym kolorem pomocniczym, jak pokazano na poniższym zrzucie ekranu. Aby zapoznać się z kodem źródłowym dla tego przykładu, zobacz Fill polygon with built-in icon template sample code (Wypełnianie wielokąta za pomocą wbudowanego kodu szablonu ikony).

Napiwek

Ustawienie pomocniczego koloru wzorców wypełnienia ułatwia wyświetlanie bazowej mapy nadal będzie dostarczać wzorzec podstawowy.

Używanie szablonu obrazu ze znacznikiem HTML

Szablon obrazu można pobrać przy użyciu atlas.getImageTemplate funkcji i użyć jako zawartości znacznika HTML. Szablon można przekazać do htmlContent opcji znacznika, a następnie dostosować przy użyciu coloropcji , secondaryColori text .

Przykładowy znacznik HTML z wbudowanym szablonem ikon demonstruje to przy użyciu marker-arrow szablonu z czerwonym kolorem podstawowym, różowym kolorem pomocniczym i wartością tekstową "00", jak pokazano na poniższym zrzucie ekranu. Aby zapoznać się z kodem źródłowym dla tego przykładu, zobacz Znacznik HTML z wbudowanym kodem przykładowym szablonu ikony.

Napiwek

Szablony obrazów można również używać poza mapą. Funkcja getImageTemplate zwraca ciąg SVG zawierający symbole zastępcze; {color}, , {scale}{secondaryColor}, , {text}. Zastąp te wartości zastępcze, aby utworzyć prawidłowy ciąg SVG. Następnie możesz dodać ciąg SVG bezpośrednio do modelu DOM HTML lub przekonwertować go na identyfikator URI danych i wstawić go do tagu obrazu. Na przykład:

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

Tworzenie niestandardowych szablonów wielokrotnego użytku

Jeśli aplikacja używa tej samej ikony w różnych modułach lub jeśli tworzysz moduł, który dodaje więcej szablonów obrazów, możesz łatwo dodać i pobrać te ikony z internetowego zestawu SDK usługi Azure Maps. Użyj następujących funkcji statycznych w atlas przestrzeni nazw.

Nazwisko	Zwracany typ	opis
`addImageTemplate(templateName: string, template: string, override: boolean)`		Dodaje niestandardowy szablon obrazu SVG do przestrzeni nazw atlasu.
`getImageTemplate(templateName: string, scale?: number)`	string	Pobiera szablon SVG według nazwy.
`getAllImageTemplateNames()`	string[]	Pobiera szablon SVG według nazwy.

Szablony obrazów SVG obsługują następujące wartości zastępcze:

Symbol zastępczy	opis
`{color}`	Kolor podstawowy.
`{secondaryColor}`	Kolor pomocniczy.
`{scale}`	Obraz SVG jest konwertowany na obraz png po dodaniu do sprite obrazu mapy. Ten symbol zastępczy może służyć do skalowania szablonu, zanim zostanie przekonwertowany, aby upewnić się, że jest on renderowany wyraźnie.
`{text}`	Lokalizacja renderowania tekstu w przypadku użycia ze znacznikiem HTML.

Przykład Dodawanie szablonu ikony niestandardowej do przestrzeni nazw atlasu przedstawia sposób pobierania szablonu SVG i dodawania go do internetowego zestawu SDK usługi Azure Maps jako szablonu ikon wielokrotnego użytku, jak pokazano na poniższym zrzucie ekranu. Aby uzyskać kod źródłowy dla tego przykładu, zobacz Dodawanie niestandardowego szablonu ikony do przykładowego kodu przestrzeni nazw atlasu.

Lista szablonów obrazów

Ta tabela zawiera listę wszystkich szablonów obrazów dostępnych obecnie w internetowym zestawie SDK usługi Azure Maps. Nazwa szablonu znajduje się nad każdym obrazem. Domyślnie kolor podstawowy jest niebieski, a pomocniczy kolor jest biały. Aby ułatwić wyświetlanie koloru pomocniczego na białym tle, poniższe obrazy mają dodatkowy kolor ustawiony na.

Szablony ikon symboli

marker

znacznik-gruby

okrąg znacznikowy

marker-flat

ikona znacznika

ikona znacznika grubości

ikona koła znaczników

ikona znacznika płaskiego

kwadrat znacznikowy

klaster marker-square-cluster

strzałka znacznika

marker-ball-pin

ikona znacznika kwadratu

ikona marker-square-cluster

ikona znacznika-kulki

znacznik-kwadrat zaokrąglony

klaster z zaokrąglonym znacznikiem kwadratowym

flag

trójkąt flagowy

ikona znacznika zaokrąglonego kwadratem

ikona marker-square-rounded-cluster

trójkąt

trójkąt -gruby

trójkąt strzałka w górę

trójkąt strzałka w lewo

ikona trójkąta

ikona trójkąta o grubości

sześciokąt

hexagon-thick

sześciokątne zaokrąglone

ikona sześciokąta

ikona sześciokątnej grubości

sześciokątna ikona zaokrąglona

sześciokątna ikona o grubości

szpilka

przypinanie zaokrąglone

zaokrąglony kwadrat

zaokrąglony kwadrat o grubości

ikona pinezki

Ikona przypinania zaokrąglenia

ikona zaokrąglonego kwadratu

zaokrąglona ikona o grubości kwadratu

strzałka w górę

strzałka w górę-cienka

samochód

ikona samochodu

Szablony deseń wypełnienia wielokątnych

kontroler

obracane czeki

Okręgi

okręgi rozmieszczone

ikona sprawdzania

ikona obracania kontrolek

ikona okręgów

ikona okręgów rozmieszczonych w przestrzeni

ukośne linie w górę

ukośne linie w dół

ukośne paski w górę

ukośne paski w dół

ikona ukośnej linii w górę

ikona ukośnej linii w dół

ikona ukośnych pasków w górę

ikona ukośnych pasków w dół

linie siatki

obrócone linie siatki

obrócone paski siatki

wypełnienie x

ikona linii siatki

ikona obróconych linii siatki

ikona obróconych pasów siatki

Ikona x-fill

zig-zag

zig-zag-pionowy

Kropki

ikona zig-zag

ikona zig-zag-pionowa

Ikona kropek

Wstępnie załadowane ikony obrazów

Mapa wstępnie ładuje zestaw ikon do obrazu mapy sprite przy użyciu markerszablonów , pini pin-round . Te nazwy ikon i ich wartości kolorów są wymienione w poniższej tabeli.

nazwa ikony	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`

Wypróbuj teraz narzędzie

Za pomocą poniższego narzędzia można renderować różne wbudowane szablony obrazów na różne sposoby i dostosować kolory podstawowe i pomocnicze oraz skalę.