Renderizar dados personalizados em um mapa de rasterizaçãoRender custom data on a raster map

Este artigo explica como usar o serviço de imagem estática, com a funcionalidade de composição de imagem, para permitir sobreposições sobre um mapa de rasterização.This article explains how to use the static image service, with image composition functionality, to allow overlays on top of a raster map. A composição de imagem inclui a capacidade de obter um bloco de varredura de volta, com dados adicionais como anotações personalizadas, rótulos e sobreposições de geometria.Image composition includes the ability to get a raster tile back, with additional data like custom pushpins, labels, and geometry overlays.

Para renderizar os pinos, rótulos e sobreposições de geometria personalizados, você pode usar o aplicativo do postmaster.To render custom pushpins, labels, and geometry overlays, you can use the Postman application. Você pode usar as APIs do serviço de dados do Azure Maps para armazenar e renderizar sobreposições.You can use Azure Maps Data Service APIs to store and render overlays.

Dica

Geralmente, é muito mais econômico usar o SDK para Web do Azure Maps para mostrar um mapa simples em uma página da Web do que usar o serviço de imagem estática.It is often much more cost effective to use the Azure Maps Web SDK to show a simple map on a web page than to use the static image service. O SDK da Web usa blocos de mapa e, a menos que o usuário se sobreponha e Aplique zoom no mapa, geralmente irá gerar apenas uma fração de uma transação por carga de mapa.The web SDK uses map tiles and unless the user pans and zooms the map, they will often generate only a fraction of a transaction per map load. Observe que o SDK da Web do Azure Maps tem opções para desabilitar o movimento panorâmico e o zoom.Note that the Azure Maps web SDK has options for disabling panning and zooming. Além disso, o SDK da Web do Azure Maps fornece um conjunto mais rico de opções de visualização de dados do que um serviço Web de mapa estático.Additionally, the Azure Maps web SDK provides a richer set of data visualization options than a static map web service does.

Pré-requisitosPrerequisites

Criar uma conta dos Mapas do AzureCreate an Azure Maps account

Para concluir os procedimentos deste artigo, primeiro você precisa criar uma conta do Azure Maps e obter sua chave de conta do Maps.To complete the procedures in this article, you first need to create an Azure Maps account and get your maps account key. Siga as instruções em criar uma conta para criar uma assinatura de conta do Azure Maps e siga as etapas em obter chave primária para obter a chave primária para sua conta.Follow instructions in Create an account to create an Azure Maps account subscription and follow the steps in get primary key to get the primary key for your account. Para obter mais informações sobre a autenticação nos Azure Mapas, confira Gerenciar a autenticação nos Azure Mapas.For more information on authentication in Azure Maps, see manage authentication in Azure Maps.

Renderizar anotações com rótulos e uma imagem personalizadaRender pushpins with labels and a custom image

Observação

O procedimento nesta seção requer uma conta do Azure Maps no tipo de preço S0 ou S1.The procedure in this section requires an Azure Maps account in pricing tier S0 or S1.

A camada S0 da conta do Azure Maps dá suporte a apenas uma única instância do pins parâmetro.The Azure Maps account S0 tier supports only a single instance of the pins parameter. Ele permite renderizar até cinco anotações, especificadas na solicitação de URL, com uma imagem personalizada.It allows you to render up to five pushpins, specified in the URL request, with a custom image.

Para renderizar anotações com rótulos e uma imagem personalizada, conclua estas etapas:To render pushpins with labels and a custom image, complete these steps:

  1. Crie uma coleção na qual armazenar as solicitações.Create a collection in which to store the requests. No aplicativo de postmaster, selecione novo.In the Postman app, select New. Na janela Criar, selecione Coleção.In the Create New window, select Collection. Nomeie a coleção e selecione o botão Criar.Name the collection and select the Create button.

  2. Para criar a solicitação, selecione Novo outra vez.To create the request, select New again. Na janela Criar, selecione Solicitação.In the Create New window, select Request. Insira um nome de solicitação para os pinos.Enter a Request name for the pushpins. Selecione a coleção que você criou na etapa anterior, como o local para salvar a solicitação.Select the collection you created in the previous step, as the location to save the request. Em seguida, selecione Salvar.Then, select Save.

    Criar uma solicitação no postmaster

  3. Selecione o método HTTP GET na guia Construtor e insira a URL a seguir para criar uma solicitação GET.Select the GET HTTP method on the builder tab and enter the following URL to create a GET request.

    https://atlas.microsoft.com/map/static/png?subscription-key={subscription-key}&api-version=1.0&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%2Fraw.githubusercontent.com%2FAzure-Samples%2FAzureMapsCodeSamples%2Fmaster%2FAzureMapsCodeSamples%2FCommon%2Fimages%2Ficons%2Fylw-pushpin.png
    

    Esta é a imagem resultante:Here's the resulting image:

    Um pino personalizado com um rótulo

Obter dados do armazenamento de dados do Azure MapasGet data from Azure Maps data storage

Observação

O procedimento nesta seção requer uma conta do Azure Maps no tipo de preço S1.The procedure in this section requires an Azure Maps account in pricing tier S1.

Você também pode obter o caminho e fixar as informações de localização usando a API de carregamento de dados.You can also obtain the path and pin location information by using the Data Upload API. Siga as etapas abaixo para carregar o caminho e os dados dos marcadores.Follow the steps below to upload the path and pins data.

  1. No aplicativo de postmaster, abra uma nova guia na coleção que você criou na seção anterior.In the Postman app, open a new tab in the collection you created in the previous section. Selecione o método HTTP POST na guia Construtor e insira a seguinte URL para fazer uma solicitação POST:Select the POST HTTP method on the builder tab and enter the following URL to make a POST request:

    https://atlas.microsoft.com/mapData/upload?subscription-key={subscription-key}&api-version=1.0&dataFormat=geojson
    
  2. Na guia params , insira os seguintes pares de chave/valor, que são usados para a URL de solicitação post.On the Params tab, enter the following key/value pairs, which are used for the POST request URL. Substitua o subscription-key valor pela sua chave de assinatura do Azure Maps.Replace the subscription-key value with your Azure Maps subscription key.

    Params de chave/valor no postmaster

  3. Na guia corpo , selecione o formato de entrada bruto e escolha JSON como o formato de entrada na lista suspensa.On the Body tab, select the raw input format and choose JSON as the input format from the dropdown list. Forneça este JSON como dados a serem carregados:Provide this JSON as data to be uploaded:

    {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "Polygon",
            "coordinates": [
              [
                [
                  -73.98235,
                  40.76799
                ],
                [
                  -73.95785,
                  40.80044
                ],
                [
                  -73.94928,
                  40.7968
                ],
                [
                  -73.97317,
                  40.76437
                ],
                [
                  -73.98235,
                  40.76799
                ]
              ]
            ]
          }
        },
        {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "LineString",
            "coordinates": [
              [
                -73.97624731063843,
                40.76560773817073
              ],
              [
                -73.97914409637451,
                40.766826609362575
              ],
              [
                -73.98513078689575,
                40.7585866048861
              ]
            ]
          }
        }
      ]
    }
    
  4. Selecione Enviar e revisar o cabeçalho de resposta.Select Send and review the response header. Após uma solicitação bem-sucedida, o cabeçalho Local conterá o URI de status para verificar o status atual da solicitação de upload.Upon a successful request, the Location header will contain the status URI to check the current status of the upload request. O URI de status deve ser do formato a seguir.The status URI would be of the following format.

    https://atlas.microsoft.com/mapData/{uploadStatusId}/status?api-version=1.0
    
  5. Copie seu URI de status e acrescente o parâmetro Subscription-Key a ele com o valor de sua chave de assinatura de conta do Azure Maps.Copy your status URI and append the subscription-key parameter to it with the value of your Azure Maps account subscription key. Use a mesma chave de assinatura de conta que você usou para carregar os dados.Use the same account subscription key that you used to upload the data. O formato do URI de status deve ser semelhante ao seguinte:The status URI format should look like the one below:

    https://atlas.microsoft.com/mapData/{uploadStatusId}/status?api-version=1.0&subscription-key={Subscription-key}
    
  6. Para obter o udId, abra uma nova guia no aplicativo do postmaster.To get the udId, open a new tab in the Postman app. Selecione obter método HTTP na guia Construtor. faça uma solicitação GET no URI de status.Select GET HTTP method on the builder tab. Make a GET request at the status URI. Se o upload de dados tiver sido bem-sucedido, você receberá um udId no corpo da resposta.If your data upload was successful, you'll receive a udId in the response body. Copie o udId.Copy the udId.

    {
       "udid" : "{udId}"
    }
    
  7. Use o udId valor recebido da API de carregamento de dados para renderizar recursos no mapa.Use the udId value received from the Data Upload API to render features on the map. Para fazer isso, abra uma nova guia na coleção que você criou na seção anterior.To do so, open a new tab in the collection you created in the preceding section. Selecione o método HTTP GET na guia Construtor, substitua {Subscription-Key} e {udId} por seus valores e insira essa URL para fazer uma solicitação GET:Select the GET HTTP method on the builder tab, replace the {subscription-key} and {udId} with your values, and enter this URL to make a GET request:

    https://atlas.microsoft.com/map/static/png?subscription-key={subscription-key}&api-version=1.0&layer=basic&style=main&zoom=12&center=-73.96682739257812%2C40.78119135317995&pins=default|la-35+50|ls12|lc003C62|co9B2F15||'Times Square'-73.98516297340393 40.758781646381024|'Central Park'-73.96682739257812 40.78119135317995&path=lc0000FF|fc0000FF|lw3|la0.80|fa0.30||udid-{udId}
    

    Aqui está a imagem de resposta:Here's the response image:

    Obter dados do armazenamento de dados do Azure Mapas

Renderizar um polígono com cor e opacidadeRender a polygon with color and opacity

Observação

O procedimento nesta seção requer uma conta do Azure Maps no tipo de preço S1.The procedure in this section requires an Azure Maps account in pricing tier S1.

É possível modificar a aparência de um polígono, usando modificadores de estilo com o parâmetro de caminho.You can modify the appearance of a polygon by using style modifiers with the path parameter.

  1. No aplicativo de postmaster, abra uma nova guia na coleção que você criou anteriormente.In the Postman app, open a new tab in the collection you created earlier. Selecione o método HTTP GET na guia Construtor e insira a seguinte URL para configurar uma solicitação GET para renderizar um polígono com cor e opacidade:Select the GET HTTP method on the builder tab and enter the following URL to configure a GET request to render a polygon with color and opacity:

    https://atlas.microsoft.com/map/static/png?api-version=1.0&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={subscription-key}
    

    Aqui está a imagem de resposta:Here's the response image:

    Renderizar um polígono opaco

Renderizar um círculo e anotações com rótulos personalizadosRender a circle and pushpins with custom labels

Observação

O procedimento nesta seção requer uma conta do Azure Maps no tipo de preço S1.The procedure in this section requires an Azure Maps account in pricing tier S1.

Você pode modificar a aparência dos Pins adicionando modificadores de estilo.You can modify the appearance of the pins by adding style modifiers. Por exemplo, para fazer anotações e seus rótulos maiores ou menores, use o sc modificador "estilo de escala".For example, to make pushpins and their labels larger or smaller, use the sc "scale style" modifier. Esse modificador usa um valor maior que zero.This modifier takes a value that's greater than zero. Um valor de 1 é a escala padrão.A value of 1 is the standard scale. Valores maiores que 1 tornarão os marcadores maiores e valores menores que 1 os tornarão menores.Values larger than 1 will make the pins larger, and values smaller than 1 will make them smaller. Para obter mais informações sobre modificadores de estilo, consulte parâmetros de caminho de serviço de imagem estática.For more information about style modifiers, see static image service path parameters.

Siga estas etapas para renderizar um círculo e anotações com rótulos personalizados:Follow these steps to render a circle and pushpins with custom labels:

  1. No aplicativo de postmaster, abra uma nova guia na coleção que você criou anteriormente.In the Postman app, open a new tab in the collection you created earlier. Selecione o método HTTP GET na guia Construtor e insira essa URL para fazer uma solicitação GET:Select the GET HTTP method on the builder tab and enter this URL to make a GET request:

    https://atlas.microsoft.com/map/static/png?api-version=1.0&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={subscription-key}
    

    Aqui está a imagem de resposta:Here's the response image:

    Renderizar um círculo com anotações personalizadas

  2. Para alterar a cor das anotações da última etapa, altere o modificador de estilo "co".To change the color of the pushpins from the last step, change the "co" style modifier. Observe pins=default|la15+50|al0.66|lc003C62|co002D62| que a cor atual seria especificada como #002D62 em CSS.Look at pins=default|la15+50|al0.66|lc003C62|co002D62|, the current color would be specified as #002D62 in CSS. Digamos que você queira alterá-lo para #41d42a.Let's say you want to change it to #41d42a. Escreva o novo valor de cor após o especificador "co", desta forma: pins=default|la15+50|al0.66|lc003C62|co41D42A| .Write the new color value after the "co" specifier, like this: pins=default|la15+50|al0.66|lc003C62|co41D42A|. Faça uma nova solicitação GET:Make a new GET request:

    https://atlas.microsoft.com/map/static/png?api-version=1.0&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={subscription-key}
    

    Aqui está a imagem de resposta depois de alterar as cores dos Pins:Here's the response image after changing the colors of the pins:

    Renderizar um círculo com anotações atualizadas

Da mesma forma, você pode alterar, adicionar e remover outros modificadores de estilo.Similarly, you can change, add, and remove other style modifiers.

Próximas etapasNext steps