Adicionar uma camada de bloco a um mapa usando o Azure Maps SDK do AndroidAdd a tile layer to a map using the Azure Maps Android SDK

Este artigo mostra como renderizar uma camada de bloco em um mapa usando o SDK do Android do Azure Maps.This article shows you how to render a tile layer on a map using the Azure Maps Android SDK. Camadas lado a lado permitem que você sobreponha imagens sobre peças de mapa base do Azure Mapas.Tile layers allow you to superimpose images on top of Azure Maps base map tiles. Obtenha mais informações sobre o sistema de mosaico do Azure Mapas na documentação Níveis de Zoom e grade lado a lado.More information on Azure Maps tiling system can be found in the Zoom levels and tile grid documentation.

Uma camada de bloco é carregada em blocos de um servidor.A Tile layer loads in tiles from a server. Essas imagens podem ser previamente renderizadas e armazenadas como qualquer outra imagem em um servidor, usando uma Convenção de nomenclatura que a camada de bloco compreende.These images can be pre-rendered and stored like any other image on a server, using a naming convention that the tile layer understands. Ou, essas imagens podem ser renderizadas com um serviço dinâmico que gera as imagens quase em tempo real.Or, these images can be rendered with a dynamic service that generates the images near real time. Há três convenções de nomenclatura de serviço de bloco diferentes com suporte pela classe TileLayer do Azure Maps:There are three different tile service naming conventions supported by Azure Maps TileLayer class:

  • X, Y, notação de Zoom - com base no nível de zoom, x é a coluna e y é a posição da linha do bloco na grade lado a lado.X, Y, Zoom notation - Based on the zoom level, x is the column and y is the row position of the tile in the tile grid.
  • Notação Quadkey - combinação x, y, informações de zoom em um valor de cadeia de caracteres única que é um identificador exclusivo para um bloco.Quadkey notation - Combination x, y, zoom information into a single string value that is a unique identifier for a tile.
  • Caixa delimitadora - as coordenadas da caixa de delimitação podem ser usadas para especificar uma imagem no formato {west},{south},{east},{north} que é normalmente usada por serviços de mapeamento de Web (WMS).Bounding Box - Bounding box coordinates can be used to specify an image in the format {west},{south},{east},{north} which is commonly used by Web Mapping Services (WMS).

Dica

Um TileLayer é uma ótima maneira para visualizar grandes conjuntos de dados no mapa.A TileLayer is a great way to visualize large data sets on the map. Não apenas uma camada de bloco pode ser gerada de uma imagem, mas os dados de vetor podem também ser renderizados como uma camada de peça.Not only can a tile layer be generated from an image, but vector data can also be rendered as a tile layer too. Por meio do processamento de dados de vetor, como uma camada lado a lado, o controle de mapa só precisa carregar os blocos que podem ser muito menores em tamanho de arquivo do que os dados vetoriais que representam.By rendering vector data as a tile layer, the map control only needs to load the tiles which can be much smaller in file size than the vector data they represent. Essa técnica é usada por muitas pessoas que precisam renderizar milhões de linhas de dados no mapa.This technique is used by many who need to render millions of rows of data on the map.

A URL do bloco passada para uma camada de peça deve ser uma URL http/https para um recurso de TileJSON ou um modelo de URL de bloco que usa os seguintes parâmetros:The tile URL passed into a Tile layer must be an http/https URL to a TileJSON resource or a tile URL template that uses the following parameters:

  • {x} - posição X do bloco.{x} - X position of the tile. Também precisa {y} e {z}.Also needs {y} and {z}.
  • {y} - posição Y do bloco.{y} - Y position of the tile. Também precisa {x} e {z}.Also needs {x} and {z}.
  • {z} -Nível de zoom do bloco.{z} - Zoom level of the tile. Também precisa {x} e {y}.Also needs {x} and {y}.
  • {quadkey} - identificador quadkey de bloco baseado a convenção de nomenclatura do sistema de blocos Bing Maps.{quadkey} - Tile quadkey identifier based on the Bing Maps tile system naming convention.
  • {bbox-epsg-3857} -Uma cadeia de caracteres de caixa delimitadora com o formato {west},{south},{east},{north} no sistema de referência espacial do EPSG 3857.{bbox-epsg-3857} - A bounding box string with the format {west},{south},{east},{north} in the EPSG 3857 Spatial Reference System.
  • {subdomain}-Um espaço reservado para os valores de subdomínio, se o valor de subdomínio for especificado.{subdomain} - A placeholder for the subdomain values, if the subdomain value is specified.

Pré-requisitosPrerequisites

Para concluir o processo neste artigo, você precisa instalar o Azure Maps SDK do Android para carregar um mapa.To complete the process in this article, you need to install Azure Maps Android SDK to load a map.

Adicionar uma camada de bloco ao mapaAdd a tile layer to the map

Este exemplo mostra como criar uma camada de bloco que aponta para um conjunto de blocos.This sample shows how to create a tile layer that points to a set of tiles. Esses blocos usam o sistema de divisão "x, y," zoom ".These tiles use the "x, y, zoom" tiling system. A origem dessa camada lado a lado é uma sobreposição de radar clima da Iowa Environmental Mesonet of Iowa State University.The source of this tile layer is a weather radar overlay from the Iowa Environmental Mesonet of Iowa State University.

Você pode adicionar uma camada de bloco ao mapa seguindo as etapas abaixo.You can add a tile layer to the map by following the steps below.

  1. Edite o layout de > res > activity_main.xml para que ele se pareça com o seguinte:Edit res > layout > activity_main.xml so it looks like the one below:

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
    
        <com.microsoft.azure.maps.mapcontrol.MapControl
            android:id="@+id/mapcontrol"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:mapcontrol_centerLat="40.75"
            app:mapcontrol_centerLng="-99.47"
            app:mapcontrol_zoom="3"
            />
    
    </FrameLayout>
    
  2. Copie o trecho de código a seguir para o método OnCreate () da sua MainActivity.java classe.Copy the following code snippet below into the onCreate() method of your MainActivity.java class.

    mapControl.onReady(map -> {
        //Add a tile layer to the map, below the map labels.
        map.layers.add(new TileLayer(
            tileUrl("https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{z}/{x}/{y}.png"),
            opacity(0.8f),
            tileSize(256)
        ), "labels");
    });
    

    O trecho de código acima Obtém primeiro uma instância de controle de mapa do Azure Maps usando o método de retorno de chamada Onreadal () .The code snippet above first obtains an Azure Maps map control instance using the onReady() callback method. Em seguida, ele cria um TileLayer objeto e passa uma URL de bloco do XYZ formatado para a tileUrl opção.It then creates a TileLayer object and passes a formatted xyz tile URL into the tileUrl option. A opacidade da camada é definida como 0.8 e como os blocos do serviço de bloco que estão sendo usados são blocos de 256 pixels, essas informações são passadas para a tileSize opção.The opacity of the layer is set to 0.8 and since the tiles from tile service being used are 256 pixel tiles, this information is passed into the tileSize option. Em seguida, a camada de bloco é passada para o Gerenciador de camadas do Maps.The tile layer is then passed into the maps layer manager.

    Depois de adicionar o trecho de código acima, seu MainActivity.java deve se parecer com o seguinte:After adding the code snippet above, your MainActivity.java should look like the one below:

    package com.example.myapplication;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import com.microsoft.azure.maps.mapcontrol.layer.TileLayer;
    import java.util.Arrays;
    import java.util.List;
    import com.microsoft.azure.maps.mapcontrol.AzureMaps;
    import com.microsoft.azure.maps.mapcontrol.MapControl;
    import static com.microsoft.azure.maps.mapcontrol.options.TileLayerOptions.tileSize;
    import static com.microsoft.azure.maps.mapcontrol.options.TileLayerOptions.tileUrl;
    
    public class MainActivity extends AppCompatActivity {
    
        static{
            AzureMaps.setSubscriptionKey("<Your Azure Maps subscription key>");
        }
    
        MapControl mapControl;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
    
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            mapControl = findViewById(R.id.mapcontrol);
    
            mapControl.onCreate(savedInstanceState);
    
            mapControl.onReady(map -> {
    
                //Add a tile layer to the map, below the map labels.
                map.layers.add(new TileLayer(
                    tileUrl("https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{z}/{x}/{y}.png"),
                    opacity(0.8f),
                    tileSize(256)
                ), "labels");
            });    
        }
    
        @Override
        public void onResume() {
            super.onResume();
            mapControl.onResume();
        }
    
        @Override
        public void onPause() {
            super.onPause();
            mapControl.onPause();
        }
    
        @Override
        public void onStop() {
            super.onStop();
            mapControl.onStop();
        }
    
        @Override
        public void onLowMemory() {
            super.onLowMemory();
            mapControl.onLowMemory();
        }
    
        @Override
        protected void onDestroy() {
            super.onDestroy();
            mapControl.onDestroy();
        }
    
        @Override
        protected void onSaveInstanceState(Bundle outState) {
            super.onSaveInstanceState(outState);
            mapControl.onSaveInstanceState(outState);
        }    
    }
    

Se você executar o aplicativo agora, deverá ver uma linha no mapa, como mostrado abaixo:If you run your application now, you should see a line on the map as seen below:

Linha do mapa do Android

Android map line

Próximas etapasNext steps

Consulte o artigo a seguir para saber mais sobre maneiras de definir estilos de mapaSee the following article to learn more about ways to set map styles