Sdílet prostřednictvím


Přidání vrstvy obrázku do mapy

V tomto článku se dozvíte, jak překrýt obrázek pevným souborem souřadnic. Tady je několik příkladů různých typů obrázků, které se dají překryty na mapách:

  • Obrázky zachycené z dronů
  • Stavební podlahové plány
  • Historické nebo jiné specializované obrázky map
  • Podrobné plány webů úloh
  • Obrázky radaru počasí

Tip

ImageLayer je snadný způsob, jak překrýt obrázek na mapě. Upozorňujeme, že prohlížeče můžou mít potíže s načtením velké image. V takovém případě zvažte rozdělení obrázku na dlaždice a jejich načtení do mapy jako TileLayer.

Vrstva obrázku podporuje následující formáty obrázků:

  • JPEG
  • PNG
  • BMP
  • GIF (žádné animace)

Přidání vrstvy obrázků

Následující kód překryje obrázek mapy Newark, New Jersey z roku 1922 na mapě. ImageLayer je vytvořen předáním adresy URL obrázku a souřadnice pro čtyři rohy ve formátu [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
    ]
}));

Plně funkční ukázka, která ukazuje, jak překrýt obrázek mapy Newark New Jersey z roku 1922 jako vrstvy obrázku, najdete v tématu Jednoduchá vrstva obrázků v ukázkách Azure Maps. Zdrojový kód pro tuto ukázku najdete ve zdrojovém kódu vrstvy jednoduché image.

Snímek obrazovky znázorňující mapu s obrázkem mapy Newark New Jersey z roku 1922 jako vrstvy obrázku

Import souboru KML jako překrytí země

Tato ukázka ukazuje, jak přidat základní informace KML jako vrstvu obrázku na mapě. Překryvy země KML poskytují severní, jižní, východní a západní souřadnice a proti směru hodinových ručiček. Vrstva obrázku ale očekává souřadnice pro každý roh obrázku. Základní překryv KML v této ukázce je určen pro katedrálu Chartres a pochází z Wikimedia.

Kód používá statickou getCoordinatesFromEdges funkci z Třídy ImageLayer . Vypočítá čtyři rohy obrázku pomocí informací o severní, jižní, východní, západní a rotaci překrytí země KML.

Plně funkční ukázka, která ukazuje, jak používat základní překryv KML jako vrstvu obrázku, najdete v ukázkách Azure Maps v tématu Základní překrytí KML jako vrstva obrázku. Zdrojový kód pro tuto ukázku najdete v tématu Základní překrytí KML jako zdrojový kód vrstvy obrázku.

Snímek obrazovky znázorňující mapu s překrytím země KML, která se zobrazuje jako vrstva obrázku

Tip

getPixels Pomocí funkcí getPositions třídy vrstvy obrázku můžete převést mezi geografickými souřadnicemi umístěné vrstvy obrázku a souřadnicemi obrazových pixelů místního obrázku.

Přizpůsobení vrstvy obrázku

Vrstva obrázku má mnoho možností stylů. Plně funkční ukázku, která ukazuje, jak různé možnosti vrstvy obrázku ovlivňují vykreslování, najdete v tématu Možnosti vrstvy obrázku v ukázkách Azure Maps. Zdrojový kód pro tuto ukázku najdete ve zdrojovém kódu Možnosti vrstvy obrázku.

Snímek obrazovky znázorňující mapu s panelem s různými možnostmi vrstvy obrázku, která má vliv na vykreslování V této ukázce můžete změnit možnosti stylů a zobrazit efekt, který má na mapě.

Další kroky

Další informace o třídách a metodách používaných v tomto článku:

Další ukázky kódu pro přidání do map najdete v následujících článcích: