Renderizar dados personalizados em um mapa raster

  • Artigo

Este artigo descreve como usar o comando Obter imagem estática do mapa com a funcionalidade de composição de imagem . A funcionalidade de composição de imagem suporta a recuperação de blocos raster estáticos que contêm dados personalizados.

Seguem-se exemplos de dados personalizados:

  • Pinos personalizados
  • Etiquetas
  • Sobreposições de geometria

Gorjeta

Para mostrar um mapa simples em uma página da Web, geralmente é mais econômico usar o SDK da Web do Azure Maps do que usar o serviço de imagem estática. O SDK da Web usa blocos de mapa; e a menos que o usuário faça movimento panorâmico e amplie o mapa, eles geralmente gerarão apenas uma fração de uma transação por carregamento de mapa. O SDK da Web do Azure Maps tem opções para desabilitar o movimento panorâmico e o zoom. Além disso, o SDK da Web do Azure Maps fornece um conjunto mais avançado de opções de visualização de dados do que um serviço Web de mapa estático.

Pré-requisitos

Este artigo usa o aplicativo Postman , mas você pode usar um ambiente de desenvolvimento de API diferente.

Importante

Nos exemplos de URL, substitua {Your-Azure-Maps-Subscription-key} pela sua chave de subscrição do Azure Maps.

Renderizar pinos com etiquetas e uma imagem personalizada

Nota

O procedimento nesta seção requer uma conta do Azure Maps na camada de preços Gen1 ou Gen2. A camada de preços Gen1 S0 da conta do Azure Maps dá suporte apenas a uma única instância do parâmetro pins . Ele permite renderizar até cinco pinos, especificados na solicitação de URL, com uma imagem personalizada.

Aposentadoria da camada de preços do Azure Maps Gen1

O nível de preços Gen1 foi preterido e será desativado em 15/09/26. O nível de preços Gen2 substitui o nível de preços Gen1 (S0 e S1). Se sua conta do Azure Maps tiver o nível de preço Gen1 selecionado, você poderá alternar para o preço Gen2 antes de ser desativado, caso contrário, ele será atualizado automaticamente. Para obter mais informações, consulte Gerenciar a camada de preços da sua conta do Azure Maps.

Obter imagem estática com pinos e etiquetas personalizados

Para obter uma imagem estática com pinos e etiquetas personalizados:

  1. No aplicativo Postman, selecione Novo.

  2. Na janela Criar novo, selecione Solicitação HTTP.

  3. Insira um nome de solicitação para a solicitação, como Obter imagem estática do mapa.

  4. Selecione o método HTTP GET .

  5. Insira o seguinte URL:

    https://atlas.microsoft.com/map/static/png?subscription-key={Your-Azure-Maps-Subscription-key}&api-version=2022-08-01&layer=basic&style=main&zoom=12&center=-73.98,%2040.77&pins=custom%7Cla15+50%7Cls12%7Clc003b61%7C%7C%27CentralPark%27-73.9657974+40.781971%7C%7Chttps%3A%2F%2Fsamples.azuremaps.com%2Fimages%2Ficons%2Fylw-pushpin.png

  6. Selecione Enviar.

  7. O serviço retorna a seguinte imagem:

    A custom pushpin with a label.

Renderizar um polígono com cor e opacidade

Nota

O procedimento nesta seção requer uma conta do Azure Maps Gen1 (S1) ou nível de preço Gen2.

Você pode modificar a aparência de um polígono usando modificadores de estilo com o parâmetro path .

Para renderizar um polígono com cor e opacidade:

  1. No aplicativo Postman, selecione Novo.

  2. Na janela Criar novo, selecione Solicitação HTTP.

  3. Insira um nome de solicitação para a solicitação, como GET Polygon.

  4. Selecione o método HTTP GET .

  5. Insira a seguinte URL para o serviço de renderização :

    https://atlas.microsoft.com/map/static/png?api-version=2022-08-01&style=main&layer=basic&sku=S1&zoom=14&height=500&Width=500&center=-74.040701, 40.698666&path=lc0000FF|fc0000FF|lw3|la0.80|fa0.50||-74.03995513916016 40.70090237454063|-74.04082417488098 40.70028420372218|-74.04113531112671 40.70049568385827|-74.04298067092896 40.69899904076542|-74.04271245002747 40.69879568992435|-74.04367804527283 40.6980961582905|-74.04364585876465 40.698055487620714|-74.04368877410889 40.698022951066996|-74.04168248176573 40.696444909137|-74.03901100158691 40.69837271818651|-74.03824925422668 40.69837271818651|-74.03809905052185 40.69903971085914|-74.03771281242369 40.699340668780984|-74.03940796852112 40.70058515602143|-74.03948307037354 40.70052821920425|-74.03995513916016 40.70090237454063
&subscription-key={Your-Azure-Maps-Subscription-key}

  6. O serviço retorna a seguinte imagem:

    Render an opaque polygon.

Renderizar um círculo e pinos com etiquetas personalizadas

Nota

O procedimento nesta seção requer uma conta do Azure Maps Gen1 (S1) ou nível de preço Gen2.

Você pode modificar a aparência dos pinos adicionando modificadores de estilo. Por exemplo, para tornar os pinos e seus rótulos maiores ou menores, use o modificador "estilo de sc escala". Esse modificador usa um valor maior que zero. Um valor de 1 é a escala padrão. Valores maiores que 1 tornam os pinos maiores e valores menores que 1 os tornam menores. Para obter mais informações sobre modificadores de estilo, consulte o parâmetro Path do comando Get Map Static Image .

Para renderizar um círculo e pinos com rótulos personalizados:

  1. No aplicativo Postman, selecione Novo.

  2. Na janela Criar novo, selecione Solicitação HTTP.

  3. Insira um nome de solicitação para a solicitação, como GET Polygon.

  4. Selecione o método HTTP GET .

  5. Insira a seguinte URL para o serviço de renderização :

    https://atlas.microsoft.com/map/static/png?api-version=2022-08-01&style=main&layer=basic&zoom=14&height=700&Width=700&center=-122.13230609893799,47.64599069048016&path=lcFF0000|lw2|la0.60|ra1000||-122.13230609893799 47.64599069048016&pins=default|la15+50|al0.66|lc003C62|co002D62||'Microsoft Corporate Headquarters'-122.14131832122801  47.64690503939462|'Microsoft Visitor Center'-122.136828 47.642224|'Microsoft Conference Center'-122.12552547454833 47.642940335653996|'Microsoft The Commons'-122.13687658309935  47.64452336193245&subscription-key={Your-Azure-Maps-Subscription-key}

  6. Selecione Enviar.

  7. O serviço retorna a seguinte imagem:

    Render a circle with custom pushpins.

  8. Em seguida, altere a cor dos pinos modificando o modificador de co estilo. Se você observar o pins valor do parâmetro (pins=default|la15+50|al0.66|lc003C62|co002D62|), observe que a cor atual é #002D62. Para alterar a cor para #41d42a, substitua #002D62 por #41d42a. Agora o pins parâmetro é pins=default|la15+50|al0.66|lc003C62|co41D42A|. A solicitação se parece com a seguinte URL:

    https://atlas.microsoft.com/map/static/png?api-version=2022-08-01&style=main&layer=basic&zoom=14&height=700&Width=700&center=-122.13230609893799,47.64599069048016&path=lcFF0000|lw2|la0.60|ra1000||-122.13230609893799 47.64599069048016&pins=default|la15+50|al0.66|lc003C62|co41D42A||'Microsoft Corporate Headquarters'-122.14131832122801  47.64690503939462|'Microsoft Visitor Center'-122.136828 47.642224|'Microsoft Conference Center'-122.12552547454833 47.642940335653996|'Microsoft The Commons'-122.13687658309935  47.64452336193245&subscription-key={Your-Azure-Maps-Subscription-key}

  9. Selecione Enviar.

  10. O serviço retorna a seguinte imagem:

    Render a circle with updated pushpins.

Da mesma forma, você pode alterar, adicionar e remover outros modificadores de estilo.

Próximos passos

Renderizar - Obter imagem estática do mapa