Partilhar via

Adicionar uma camada de mosaico a um mapa

  • Artigo

Este artigo mostra como sobrepor uma camada de mosaico no mapa. As camadas de mosaico permitem-lhe sobrepor imagens sobre mosaicos de mapas base do Azure Maps. Para obter mais informações sobre o sistema de mosaico do Azure Maps, consulte Níveis de zoom e grade de blocos.

Uma camada de mosaico é carregada em blocos de um servidor. Essas imagens podem ser pré-renderizadas ou renderizadas dinamicamente. As imagens pré-renderizadas são armazenadas como qualquer outra imagem em um servidor usando uma convenção de nomenclatura que a camada de mosaico entende. As imagens renderizadas dinamicamente usam um serviço para carregar as imagens quase em tempo real. Há três convenções de nomenclatura de serviço de bloco diferentes suportadas pela classe TileLayer do Azure Maps:

  • X, Y, notação de zoom - X é a coluna, Y é a posição da linha do bloco na grade de blocos e a notação Zoom um valor baseado no nível de zoom.
  • Notação quadkey - Combina informações de x, y e zoom em um único valor de cadeia de caracteres. Esse valor de cadeia de caracteres se torna um identificador exclusivo para um único bloco.
  • Caixa Delimitadora - Especifique uma imagem no formato de coordenadas da caixa delimitadora: {west},{south},{east},{north}. Esse formato é comumente usado por serviços de mapeamento da Web (WMS).

Gorjeta

Um TileLayer é uma ótima maneira de visualizar grandes conjuntos de dados no mapa. Não só uma camada de mosaico pode ser gerada a partir de uma imagem, os dados vetoriais também podem ser renderizados como uma camada de mosaico também. Ao renderizar dados vetoriais como uma camada de bloco, o controle de mapa só precisa carregar os blocos que são menores em tamanho de arquivo do que os dados vetoriais que eles representam. Essa técnica é comumente usada para renderizar milhões de linhas de dados no mapa.

A URL de bloco passada para uma camada de bloco deve ser uma URL http ou https para um recurso TileJSON ou um modelo de URL de bloco que usa os seguintes parâmetros:

  • {x} - Posição X da telha. Também precisa {y} e {z}.
  • {y} - Posição Y da telha. Também precisa {x} e {z}.
  • {z} - Nível de zoom da telha. Também precisa {x} e {y}.
  • {quadkey} - Identificador quadkey de mosaico baseado na convenção de nomenclatura do sistema de mosaicos do Bing Maps.
  • {bbox-epsg-3857} - Uma string de caixa delimitadora com o formato {west},{south},{east},{north} no Sistema de Referência Espacial EPSG 3857.
  • {subdomain} - Um espaço reservado para os valores de subdomínio, se especificado o subdomain é adicionado.
  • {azMapsDomain} - Um espaço reservado para alinhar o domínio e autenticação de solicitações de bloco com os mesmos valores usados pelo mapa.

Adicionar uma camada de mosaico

Este exemplo mostra como criar uma camada de mosaico que aponta para um conjunto de mosaicos. Este exemplo usa o sistema de mosaico de zoom x, y. A fonte desta camada de mosaico é o projeto OpenSeaMap, que contém cartas náuticas crowd sourced. Idealmente, os usuários veriam claramente os rótulos das cidades enquanto navegam no mapa ao visualizar os dados do radar. Esse comportamento pode ser implementado inserindo a camada de mosaico abaixo da labels camada.

//Create a tile layer and add it to the map below the label layer.
map.layers.add(new atlas.layer.TileLayer({
    tileUrl: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
    opacity: 0.8,
    tileSize: 256,
    minSourceZoom: 7,
    maxSourceZoom: 17
}), 'labels');

Para obter um exemplo totalmente funcional que mostra como criar uma camada de mosaico que aponta para um conjunto de mosaicos utilizando o sistema de mosaico de zoom x, y, consulte o exemplo Camada de mosaico com X, Y e Z nos Exemplos do Azure Maps. A origem da camada de mosaico neste exemplo é uma carta náutica do projeto OpenSeaMap, um projeto OpenStreetMaps licenciado sob ODbL. Para obter o código-fonte deste exemplo, consulte Camada de mosaico usando o código-fonte X, Y e Z.

A screenshot of map with a tile layer that points to a set of tiles using the x, y, zoom tiling system. The source of this tile layer is the OpenSeaMap project.

Adicionar um serviço de mapeamento da Web (WMS) OGC

Um serviço de mapeamento da web (WMTS) é um padrão do Open Geospatial Consortium (OGC) para servir imagens de dados de mapas. Há muitos conjuntos de dados abertos disponíveis nesse formato que você pode usar com o Azure Maps. Este tipo de serviço pode ser usado com uma camada de mosaico se o serviço suportar o EPSG:3857 sistema de referência de coordenadas (CRS). Ao usar um serviço WMS, defina os parâmetros de largura e altura para o valor suportado pelo serviço, certifique-se de definir esse valor na tileSize opção. Na URL formatada, defina o parâmetro do serviço com o BBOX {bbox-epsg-3857} espaço reservado.

Para obter um exemplo totalmente funcional que mostra como criar uma camada de mosaico que aponta para um Serviço de Mapeamento da Web (WMS), consulte o Exemplo de Camada de Mosaico do WMS nos Exemplos do Azure Maps. Para obter o código-fonte deste exemplo, consulte Código-fonte da camada de mosaico WMS.

A captura de tela a seguir mostra o exemplo WMS Tile Layer que sobrepõe um serviço de mapeamento da Web de dados geológicos do Serviço Geológico dos EUA (USGS) na parte superior do mapa e abaixo dos rótulos.

A screenshot of a world map with a tile layer that points to a Web Mapping Service (WMS).

Adicionar um serviço de mosaico de mapeamento da Web (WMTS) do OGC

Um serviço de mosaico de mapeamento da Web (WMTS) é um padrão do Open Geospatial Consortium (OGC) para servir sobreposições baseadas em mosaicos para mapas. Há muitos conjuntos de dados abertos disponíveis nesse formato que você pode usar com o Azure Maps. Esse tipo de serviço pode ser usado com uma camada de mosaico se o serviço suportar o sistema de referência de EPSG:3857 coordenadas ( GoogleMapsCompatible CRS). Ao usar um serviço WMTS, defina os parâmetros de largura e altura para o mesmo valor suportado pelo serviço, certifique-se de também definir esse valor na tileSize opção. No URL formatado, substitua os seguintes espaços reservados de acordo:

  • {TileMatrix} =>{z}
  • {TileRow} =>{y}
  • {TileCol} =>{x}

Para obter um exemplo totalmente funcional que mostra como criar uma camada de mosaico que aponta para um Serviço de Mosaico de Mapeamento da Web (WMTS), consulte o exemplo de Camada de mosaico WMTS nos Exemplos de Mapas do Azure. Para obter o código-fonte deste exemplo, consulte Código-fonte da camada de mosaico WMTS.

A captura de tela a seguir mostra o exemplo WMTS Tile Layer sobrepondo um serviço de mosaico de mapeamento da Web de imagens do Mapa Nacional do Serviço Geológico dos EUA (USGS) em cima de um mapa, abaixo de estradas e rótulos.

A screenshot of a map with a tile layer that points to a Web Mapping Tile Service (WMTS) overlay.

Personalizar uma camada de mosaico

A classe de camada de mosaico tem muitas opções de estilo. O exemplo de Opções de camada de mosaico é uma ferramenta para experimentá-las. Para obter o código-fonte deste exemplo, consulte Tile Layer Options sourcecode.

A screenshot of Tile Layer Options sample.

Próximos passos

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

Camada de telha

TileLayerOptions

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

Adicionar uma camada de imagem