Criar um mapa

Este artigo mostra maneiras de criar um mapa e animar um mapa.

Como carregar um mapa

Para carregar um mapa, crie uma instância da classe Map. Ao inicializar o mapa, passe uma ID do elemento DIV para renderizar o mapa e passar um conjunto de opções a serem usadas ao carregar o mapa. Se as informações de autenticação padrão não forem especificadas no namespace atlas, elas precisarão ser especificadas nas opções de mapa ao carregar o mapa. O mapa carrega vários recursos de maneira assíncrona para o desempenho. Dessa forma, depois de criar a instância do mapa, anexe um evento ready ou load ao mapa e adicione mais código que interaja com o mapa para o manipulador de eventos. O evento ready é acionado assim que o mapa tem recursos suficientes carregados para interagir com programaticamente. O evento load é acionado depois que o modo de exibição de mapa inicial termina completamente de ser carregado.

Você também pode carregar vários mapas na mesma página, para obter um código de exemplo que demonstra o carregamento de vários mapas na mesma página, confira Vários Mapas nos Exemplos do Azure Mapas. Para obter o código-fonte deste exemplo, confira Código-fonte de Vários Mapas.

Mostrar uma só cópia do mundo

Quando o mapa for ampliado em uma tela ampla, várias cópias do mundo aparecerão horizontalmente. Essa opção é excelente para alguns cenários, mas, para outros aplicativos, é desejável ver uma só cópia do mundo. Esse comportamento é implementado configurando a opção Mapas renderWorldCopies como false.

//Only allow one copy of the world be rendered when zoomed out.
renderWorldCopies: false

Opções de mapa

Ao criar um mapa, há vários tipos diferentes de opções que podem ser passados para personalizar o funcionamento do mapa:

• CameraOptions e CameraBoundOptions são usadas para especificar a área que o mapa deve exibir.
• As ServiceOptions são usadas para especificar como o mapa deve interagir com os serviços que alimentam o mapa.
• As StyleOptions são usadas para especificar que o mapa deve ser estilizado e renderizado.
• UserInteractionOptions é usado para especificar como o mapa deve reagir quando o usuário está interagindo com o mapa.

Essas opções também podem ser atualizadas depois que o mapa tiver sido carregado usando as funções setCamera, setServiceOptions, setStyle e setUserInteraction.

Como controlar a câmera do mapa

Há duas maneiras de definir a área exibida do mapa usando a câmera de um mapa. Você pode definir as opções de câmera ao carregar o mapa. Você também pode chamar a opção setCamera a qualquer momento depois que o mapa for carregado para atualizar programaticamente a exibição do mapa.

Definir a câmera

A câmera do mapa controla o que é exibido no visor da tela do mapa. As opções de câmera podem ser passadas para as opções de mapa ao serem inicializadas ou passadas para a função setCamera de mapas.

// Set the camera options when creating the map.
// Map properties, such as center and zoom level, are part of the CameraOptions
var map = new atlas.Map('map', {
    center: [-122.33, 47.6],
    zoom: 12

    //Additional map options.
};

//Update the map camera at anytime using setCamera function.
map.setCamera({
    center: [-110, 45],
    zoom: 5 
});

As propriedades do mapa, como centro e nível de zoom, fazem parte das propriedades CameraOptions.

Defina os limites de câmera

Uma caixa delimitadora pode ser usada para atualizar a câmera do mapa. Se a caixa delimitadora foi calculada a partir de dados de ponto, geralmente é útil especificar um valor de preenchimento de pixel nas opções da câmera para considerar o tamanho do ícone. Esse preenchimento de pixel ajuda a garantir que os pontos não saiam da borda do visor do mapa.

map.setCamera({
    bounds: [-122.4, 47.6, -122.3, 47.7],
    padding: 10
});

No código acima, um objeto Map é construído por meio de new atlas.Map(). As propriedades do mapa, como CameraBoundsOptions, podem ser definidas por meio da função setCamera da classe Map. As propriedades de limites e preenchimento são definidas usando setCamera.

Animar a exibição do mapa

Ao configurar as opções de câmera do mapa, as opções de animação também podem ser definidas. Essas opções especificam o tipo de animação e a duração que deve levar para mover a câmera.

map.setCamera({
    center: [-122.33, 47.6],
    zoom: 12,
    duration: 1000,
    type: 'fly'  
});

No código a seguir, o primeiro bloco de código cria um mapa e define os estilos de mapa de inserção e zoom. No segundo bloco de código, um manipulador de eventos de clique é criado para o botão de animação. Quando esse botão é selecionado, a função setCamera é chamada com alguns valores aleatórios para CameraOptions e AnimationOptions.

<!DOCTYPE html>
 <html>
 <head>

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
  <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
  <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
  
  
    <script type="text/javascript">
    var map;
    
    function InitMap()
    {
        map = new atlas.Map('myMap', {
        center: [-122.33, 47.6],
        zoom: 12,
        view: 'Auto',
        style: 'road',

      
        // Add authentication details for connecting to Azure Maps.
        authOptions: {
          // Get an Azure Maps key at https://azuremaps.com/.
          authType: 'subscriptionKey',
          subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
        }      
      });
    }
    
    /* Animate map view to set camera location
       to random points on the map*/
    function animateMap() {
      map.setCamera({
      zoom: Math.random() *2 + 12,
      duration: 1000,
      type: 'fly'  
      });
    }
  </script>

  <style>
    button {
      position: absolute;
      top: 10px;
      left: 10px;
    }  
  </style>

</head>

<html style='width:100%;height:100%;'> 
  <body onload="InitMap()" style='width:100%;height:100%;padding:0;margin:0;'> 
    <div id='myMap' style='position:relative;width:100%;height:100%;'></div>
  <button onclick="animateMap()">Animate Maps</button>
  <div id="my-text-box"></div>
  </body>
</html>

Transformações de solicitação

Às vezes, é útil poder de modificar as solicitações HTTP feitas pelo controle de mapa. Por exemplo:

• Adicione mais cabeçalhos a solicitações de bloco para serviços protegidos por senha.
• Modifique as URLs para executar solicitações por meio de um serviço de proxy.

As opções de serviço do mapa têm uma transformRequest que pode ser usada para modificar todas as solicitações feitas pelo mapa antes de serem realizadas. A opção transformRequest é uma função que usa dois parâmetros; uma URL de cadeia de caracteres e uma cadeia de caracteres de tipo de recurso que indica para que a solicitação é usada. Essa função deve retornar um resultado de RequestParameters.

transformRequest: (url: string, resourceType: string) => RequestParameters

Ao usar uma transformação de solicitação, você deve retornar um objeto RequestParameters que contenha uma propriedade url no mínimo. Veja a seguir as propriedades que podem ser incluídas em um objeto RequestParameters.

Os tipos de recursos mais relevantes para o conteúdo adicionado ao mapa são listados na tabela a seguir:

Aqui estão alguns tipos de recursos, normalmente ignorados, que são passados pela solicitação de transformação e estão relacionados aos estilos de mapa base: StyleDefinitions, Style, SpriteImage, SpriteJSON, Glyphs, Attribution.

O exemplo a seguir mostra como modificar todas as solicitações de tamanho https://example.com adicionando um nome de usuário e uma senha como cabeçalhos para a solicitação.

var map = new atlas.Map('myMap', {
    transformRequest: function (url, resourceType) {
        //Check to see if the request is to the specified endpoint.
        if (url.indexOf('https://examples.com') > -1) {
            //Add custom headers to the request.
            return {
                url: url,
                header: {
                    username: 'myUsername',
                    password: 'myPassword'
                }
            };
        }

        //Return the URL unchanged by default.
        return { url: url };
    },

    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Key>'
    }
});

Próximas etapas

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

Consulte exemplos de código para adicionar funcionalidade ao seu aplicativo: