Adicionar uma camada de imagem a um mapa

Este artigo mostra-lhe como sobrepor uma imagem a um conjunto fixo de coordenadas. Eis alguns exemplos de diferentes tipos de imagens que podem ser sobrepostos em mapas:

• Imagens capturadas a partir de drones
• Plantas do piso do edifício
• Imagens de mapa históricas ou outras especializadas
• Esquemas de sites de tarefas
• Imagens de radar meteorológico

Dica

Um ImageLayer é uma forma fácil de sobrepor uma imagem num mapa. Tenha em atenção que os browsers podem ter dificuldade em carregar uma imagem grande. Neste caso, considere dividir a sua imagem em mosaicos e carregá-la no mapa como um TileLayer.

A camada de imagem suporta os seguintes formatos de imagem:

• JPEG
• PNG
• BMP
• GIF (sem animações)

Adicionar uma camada de imagem

O seguinte código sobrepõe uma imagem de um mapa de Newark, Nova Jérsia, a partir de 1922 no mapa. Um ImageLayer é criado ao transmitir um URL para uma imagem e coordena os quatro cantos no formato [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
    ]
}));

Para obter um exemplo totalmente funcional que mostre como sobrepor uma imagem de um mapa de Newark New Jersey de 1922 como uma camada de Imagem, veja Simple Image Layer in the Azure Maps Samples (Simple Image Layer in the Azure Maps Samples). Para obter o código fonte deste exemplo, veja Código fonte de Camada de Imagem Simples.

Importar um ficheiro KML como sobreposição de terra

Este exemplo demonstra como adicionar informações de sobreposição do solo KML como uma camada de imagem no mapa. As sobreposições de terreno KML fornecem coordenadas norte, sul, leste e oeste e uma rotação no sentido contrário aos ponteiros do relógio. Contudo, a camada de imagem espera coordenadas para cada canto da imagem. A sobreposição de solo KML neste exemplo destina-se à catedral de Chartres e é proveniente da Wikimedia.

O código utiliza a função estática getCoordinatesFromEdges da classe ImageLayer . Calcula os quatro cantos da imagem com as informações norte, sul, leste, oeste e rotação da sobreposição do solo KML.

Para obter um exemplo totalmente funcional que mostre como utilizar uma Sobreposição do Solo KML como Camada de Imagem, veja Sobreposição do Solo KML como Camada de Imagem no Azure Maps Exemplos. Para obter o código fonte deste exemplo, veja Sobreposição do Solo KML como código fonte da Camada de Imagem.

Dica

Utilize as getPixels funções e getPositions da classe de camada de imagem para converter entre coordenadas geográficas da camada de imagem posicionada e as coordenadas de píxeis de imagem local.

Personalizar uma camada de imagem

A camada de imagem tem muitas opções de estilo. Para obter um exemplo totalmente funcional que mostre como as diferentes opções da camada de imagem afetam a composição, veja Opções de Camada de Imagem no Azure Maps Exemplos. Para obter o código fonte deste exemplo, veja Código fonte de Opções de Camada de Imagem.

Passos seguintes

Saiba mais sobre as classes e métodos utilizados neste artigo:

ImageLayer

ImageLayerOptions

Veja os seguintes artigos para obter mais exemplos de código para adicionar aos mapas:

Adicionar uma camada de mosaico