Anteckning
Åtkomst till den här sidan kräver auktorisering. Du kan prova att logga in eller ändra kataloger.
Åtkomst till den här sidan kräver auktorisering. Du kan prova att ändra kataloger.
Bilder kan användas med HTML-markörer och olika lager i Azure Maps Web SDK:
- Symbolskikt kan återge punkter på kartan med en bildikon. Symboler kan också återges längs en linjebana.
- Polygonskikt kan återges med en fyllningsmönsterbild.
- HTML-markörer kan återge punkter med hjälp av bilder och andra HTML-element.
För att säkerställa bra prestanda med lager läser du in bilderna i mappningsbildens sprite-resurs innan du återger dem. IconOptions från SymbolLayer förinstallerar som standard ett par markörbilder i en handfull färger i kartbildens sprite. Dessa markörbilder och mer är tillgängliga som SVG-mallar. De kan användas för att skapa bilder med anpassade skalor eller användas som kundens primära och sekundära färg. Totalt finns det 42 bildmallar: 27 symbolikoner och 15 polygonfyllningsmönster.
Bildmallar kan läggas till i map image sprite-resurser med hjälp map.imageSprite.createFromTemplate
av funktionen . Med den här funktionen kan upp till fem parametrar skickas in.
createFromTemplate(id: string, templateName: string, color?: string, secondaryColor?: string, scale?: number): Promise<void>
id
är en unik identifierare som du skapar.
id
Tilldelas till avbildningen när den läggs till i mappningsbildens sprite. Använd den här identifieraren i lagren för att ange vilken bildresurs som ska återges. Anger templateName
vilken bildmall som ska användas. Alternativet color
anger den primära färgen på bilden och secondaryColor
alternativen anger bildens sekundära färg. Alternativet scale
skalar avbildningsmallen innan den tillämpas på bildspriten. När avbildningen tillämpas på bildspriten konverteras den till en PNG. För att säkerställa skarp återgivning är det bättre att skala upp bildmallen innan du lägger till den i sprite än att skala upp den i ett lager.
Den här funktionen läser asynkront in bilden i bildspriten. Därför returnerar den ett löfte om att du kan vänta tills den här funktionen har slutförts.
Följande kod visar hur du skapar en avbildning från en av de inbyggda mallarna och sedan använder den med ett symbollager.
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'
}
}));
});
Använda en bildmall med ett symbollager
När en bildmall har lästs in i kartbildens sprite kan den återges som en symbol i ett symbollager genom att referera till bildresurs-ID:t i image
alternativet iconOptions
.
Exemplet på symbolskiktet med den inbyggda ikonmallen visar hur du gör detta genom att återge ett symbolskikt med hjälp av marker-flat
bildmallen med en teal primär färg och en vit sekundär färg, som du ser i följande skärmbild.
Källkoden för det här exemplet finns i Exempelkod för symbolskikt med inbyggd ikonmallexempelkod.
Använd en bildmall längs en linjeväg
När en bildmall har lästs in i kartbildens sprite kan den återges längs en linjes bana genom att lägga till en LineString i en datakälla och använda ett symbolskikt med alternativet lineSpacing
samt referera till ID:t för bildresursen i image
i alternativet iconOptions
.
Linjeskiktet med den inbyggda ikonmallen visar hur du gör detta. Som du ser i följande skärmbild renderar den en röd linje på kartan och använder ett symbollager med hjälp av bildmallen car
med en dodgerblå primärfärg och en vit sekundär färg. Källkoden för det här exemplet finns i Exempelkod för linjeskikt med inbyggd ikonmall.
Tips
Om bildmallen pekar uppåt anger rotation
du ikonalternativet för symbolskiktet till 90 om du vill att det ska peka i samma riktning som linjen.
Använda en bildmall med ett polygonlager
När en bildmall har lästs in i kartbildens sprite kan den återges som ett fyllningsmönster i ett polygonlager genom att referera till bildresurs-ID:t i fillPattern
alternativet för lagret.
Exemplet fyll polygon med inbyggd ikonmall visar hur du återger ett polygonskikt med hjälp av dot
bildmallen med en röd primär färg och en transparent sekundär färg, som du ser i följande skärmbild. Källkoden för det här exemplet finns i Fyll polygon med inbyggd ikonmallsexempelkod.
Tips
Genom att sätta den sekundära färgen för fyllningsmönster blir det enklare att se den underliggande kartan samtidigt som det primära mönstret bevaras.
Använda en bildmall med en HTML-markör
En bildmall kan hämtas med hjälp av atlas.getImageTemplate
funktionen och användas som innehåll i en HTML-markör. Mallen kan skickas till htmlContent
alternativet för markören och sedan anpassas med alternativen color
, secondaryColor
och text
.
HTML-markören med det inbyggda ikonmallexemplet visar detta med hjälp av mallen marker-arrow
med en röd primär färg, en rosa sekundär färg och ett textvärde på "00", som du ser i följande skärmbild. Källkoden för det här exemplet finns i HTML-markör med inbyggd ikonmallsexempelkod.
Tips
Bildmallar kan också användas utanför kartan. funktionen getImageTemplate returnerar en SVG-sträng som har platshållare. {color}
, {secondaryColor}
, {scale}
, . {text}
Ersätt dessa platshållarvärden för att skapa en giltig SVG-sträng. Du kan sedan antingen lägga till SVG-strängen direkt i HTML DOM eller konvertera den till en data-URI och infoga den i en bildtagg. Till exempel:
//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);
Skapa anpassade återanvändbara mallar
Om programmet använder samma ikon i olika moduler eller om du skapar en modul som lägger till fler bildmallar kan du enkelt lägga till och hämta dessa ikoner från Azure Maps Web SDK. Använd följande statiska funktioner i atlas
namnområdet.
Name | Returtyp | beskrivning |
---|---|---|
addImageTemplate(templateName: string, template: string, override: boolean) |
Lägger till en anpassad SVG-avbildningsmall i atlasnamnområdet. | |
getImageTemplate(templateName: string, scale?: number) |
sträng | Hämtar en SVG-mall efter namn. |
getAllImageTemplateNames() |
string[] | Hämtar en SVG-mall efter namn. |
SVG-avbildningsmallar stöder följande platshållarvärden:
Platshållare | beskrivning |
---|---|
{color} |
Den primära färgen. |
{secondaryColor} |
Den sekundära färgen. |
{scale} |
SVG-avbildningen konverteras till en png-bild när den läggs till i kartbildens sprite. Den här platshållaren kan användas för att skala en mall innan den konverteras för att säkerställa att den återges tydligt. |
{text} |
Platsen där text återges när den används med en HTML-markör. |
Exemplet Lägg till anpassad ikon i atlasnamnområdet visar hur du tar en SVG-mall och lägger till den i Azure Maps Web SDK som en mall för återanvändbara ikoner, som du ser i följande skärmbild. Källkoden för det här exemplet finns i Lägg till mall för anpassad ikon i atlasnamnområdets exempelkod.
Lista över bildmallar
Den här tabellen visar alla bildmallar som för närvarande är tillgängliga i Azure Maps Web SDK. Mallnamnet är ovanför varje bild. Som standard är den primära färgen blå och den sekundära färgen är vit. För att göra den sekundära färgen lättare att se på en vit bakgrund har följande bilder den sekundära färgen inställd på svart.
Symbolikonmallar
markör
tjock markör
markörcirkel
platt markör
markör-kvadrat
markörfyrkantkluster
markörpil
markör-boll-nål
markör-kvadrat-rundad
marker-square-rounded-cluster
flag
flagga-triangel
triangel
triangelns tjocklek
uppåtpekande triangelpil
triangel-pil-vänster
sexhörning
hexagon-thick
sexhörningsrundad
sexhörningsrundad tjock
knappnål
pinrunda
rundad kvadrat
rundad-kvadrat-tjock
pil upp
pil-upp-tunn
bil
Mallar för polygonfyllningsmönster
kontrollant
schackmönstrad och roterad
cirklar
cirklar jämnt fördelade
diagonala linjer upp
diagonala linjer nedåt
diagonala ränder uppåt
diagonala ränder ner
rutnätslinjer
roterade rutnätslinjer
roterade rutnätsränder
x-fill
zig-zag
zig-zag-vertical
Prickar
Förinlästa bildikoner
Kartan förladdar en uppsättning ikoner i kartans bildsprite med hjälp av mallarna marker
, pin
och pin-round
. Dessa ikonnamn och deras färgvärden visas i följande tabell.
ikonnamn | färg | sekundärfärg |
---|---|---|
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 |
Prova nu-verktyget
Med följande verktyg kan du återge de olika inbyggda bildmallarna på olika sätt och anpassa de primära och sekundära färgerna och skala.
Nästa steg
Läs mer om de klasser och metoder som används i den här artikeln:
I följande artiklar finns fler kodexempel där bildmallar kan användas: