Lägga till ett bildskikt på en karta

Den här artikeln visar hur du överlagrar en bild till en fast uppsättning koordinater. Här är några exempel på olika bildtyper som kan läggas över på kartor:

• Bilder tagna från drönare
• Planritningar för byggnad
• Historiska eller andra specialiserade kartbilder
• Skisser av jobbwebbplatser
• Väderradarbilder

Dricks

En ImageLayer är ett enkelt sätt att lägga över en bild på en karta. Observera att webbläsare kan ha svårt att läsa in en stor bild. I det här fallet bör du överväga att dela upp bilden i paneler och läsa in dem på kartan som en TileLayer.

Bildlagret stöder följande bildformat:

• JPEG
• PNG
• BMP
• GIF (inga animeringar)

Lägga till ett avbildningsskikt

Följande kod lägger över en bild av en karta över Newark, New Jersey, från 1922 på kartan. En ImageLayer skapas genom att skicka en URL till en bild och koordinater för de fyra hörnen i formatet [Top Left Corner, Top Right Corner, Bottom Right Corner, Bottom Left Corner].

//Create an image layer and add it to the map.
map.layers.add(new atlas.layer.ImageLayer({
    url: 'newark_nj_1922.jpg',
    coordinates: [
        [-74.22655, 40.773941], //Top Left Corner
        [-74.12544, 40.773941], //Top Right Corner
        [-74.12544, 40.712216], //Bottom Right Corner
        [-74.22655, 40.712216]  //Bottom Left Corner
    ]
}));

Ett fullständigt funktionellt exempel som visar hur du lägger över en bild av en karta över Newark New Jersey från 1922 som ett bildlager finns i Simple Image Layer i Azure Maps-exempel. Källkoden för det här exemplet finns i Simple Image Layer-källkod.

Importera en KML-fil som marköverlägg

Det här exemplet visar hur du lägger till INFORMATION om KML-marköverlägg som ett bildlager på kartan. KML-marköverlägg ger koordinaterna nord, syd, öst och väst samt en motsolsrotering. Men bildlagret förväntar sig koordinater för varje hörn av bilden. KML-marköverlägget i det här exemplet är för Chartres-katedralen, och den kommer från Wikimedia.

Koden använder den statiska getCoordinatesFromEdges funktionen från klassen ImageLayer . Den beräknar de fyra hörnen av bilden med hjälp av norr, söder, öst, väst och rotationsinformation för KML-marköverlägget.

Ett fullständigt funktionellt exempel som visar hur du använder ett KML Ground Overlay som bildlager finns i KML Ground Overlay as Image Layer (KML Ground Overlay) som bildlager i Azure Maps-exempel. Källkoden för det här exemplet finns i KML Ground Overlay as Image Layer source code (KML Ground Overlay as Image Layer source code).

Dricks

getPixels Använd funktionerna och getPositions i bildskiktsklassen för att konvertera mellan geografiska koordinater för det positionerade bildskiktet och koordinaterna för den lokala bildpunkt.

Anpassa ett bildlager

Bildlagret har många formatalternativ. Ett fullständigt funktionellt exempel som visar hur de olika alternativen i bildskiktet påverkar renderingen finns i Bildlageralternativ i Azure Maps-exempel. Källkoden för det här exemplet finns i Källkod för bildskiktsalternativ.

Nästa steg

Läs mer om de klasser och metoder som används i den här artikeln:

ImageLayer

ImageLayerOptions

I följande artiklar finns fler kodexempel att lägga till i dina kartor:

Lägga till ett panelskikt