Criar um mapa

Artigo
07/04/2023

Este artigo mostra-lhe formas de criar um mapa e animar um mapa.

Carregar um mapa

Para carregar um mapa, crie uma nova instância da classe Mapa. Ao inicializar o mapa, transmita um ID do elemento DIV para compor o mapa e transmitir um conjunto de opções a utilizar ao carregar o mapa. Se as informações de autenticação predefinidas não forem especificadas no atlas espaço de nomes, estas informações têm de ser especificadas nas opções de mapa ao carregar o mapa. O mapa carrega vários recursos de forma assíncrona para o desempenho. Como tal, depois de criar a instância do mapa, anexe um ready evento ou load ao mapa e, em seguida, adicione mais código que interage com o mapa ao processador de eventos. O ready evento é acionado assim que o mapa tem recursos suficientes carregados para serem interagidos através de programação. O load evento é acionado depois de a vista de mapa inicial ter terminado de carregar completamente.

Também pode carregar vários mapas na mesma página, para obter o código de exemplo que demonstra o carregamento de vários mapas na mesma página, veja Vários Mapas na Azure Maps Exemplos. Para obter o código fonte deste exemplo, veja Código fonte de Vários Mapas.

Uma captura de ecrã que mostra a grelha de ajuste no mapa.

Dica

Pode utilizar as mesmas definições de autenticação e idioma ou diferentes ao utilizar vários mapas na mesma página.

Mostrar uma única cópia do mundo

Quando o mapa é ampliado num ecrã largo, são apresentadas várias cópias do mundo horizontalmente. Esta opção é ótima para alguns cenários, mas para outras aplicações é desejável ver uma única cópia do mundo. Este comportamento é implementado ao definir 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, existem vários tipos diferentes de opções que podem ser transmitidas para personalizar o funcionamento do mapa:

CameraOptions e CameraBoundOptions são utilizados para especificar a área que o mapa deve apresentar.
As ServiceOptions são utilizadas para especificar como o mapa deve interagir com os serviços que alimentam o mapa.
As StyleOptions são utilizadas para especificar que o mapa deve ser modelado e composto.
UserInteractionOptions são utilizados para especificar como o mapa deve chegar quando o utilizador está a interagir com o mapa.

Estas opções também podem ser atualizadas depois de o mapa ter sido carregado com as setCamerafunções , setServiceOptions, setStylee setUserInteraction .

Controlar a câmara do mapa

Existem duas formas de definir a área apresentada do mapa com a câmara de um mapa. Pode definir as opções da câmara ao carregar o mapa. Em alternativa, pode chamar a opção setCamera em qualquer altura depois de o mapa ter sido carregado para atualizar programaticamente a vista de mapa.

Definir a câmara

A câmara de mapa controla o que é apresentado no viewport da tela do mapa. As opções da câmara podem ser transmitidas para as opções de mapa quando forem inicializadas ou transmitidas para a função mapas setCamera .

// 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 o centro e o nível de zoom, fazem parte das propriedades CameraOptions .

Definir os limites da câmara

Uma caixa delimitadora pode ser utilizada para atualizar a câmara do mapa. Se a caixa delimitadora tiver sido calculada a partir de dados de ponto, muitas vezes é útil especificar um valor de preenchimento de píxeis nas opções da câmara para ter em conta o tamanho do ícone. Este preenchimento de píxeis ajuda a garantir que os pontos não caem da margem do viewport do mapa.

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

No código seguinte, um objeto Mapa é construído através de new atlas.Map(). As propriedades do mapa, como CameraBoundsOptions , por exemplo, podem ser definidas através da função setCamera da classe Mapa. Os limites e as propriedades de preenchimento são definidos com setCamera.

Animar a vista de mapa

Ao definir as opções da câmara do mapa, as opções de animação também podem ser definidas. Estas opções especificam o tipo de animação e duração que deve demorar a mover a câmara.

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

No código seguinte, o primeiro bloco de código cria um mapa e define os estilos de mapa enter e zoom. No segundo bloco de código, é criado um processador de eventos de clique para o botão animar. Quando este botão está selecionado, a setCamera função é 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>

Uma captura de ecrã a mostrar um mapa com um botão com o nome Animar Mapas que, quando premido, faz com que o mapa amplie ou reduza.

Transformações de pedidos

Por vezes, é útil poder modificar os pedidos HTTP feitos pelo controlo de mapa. Por exemplo:

Adicione mais cabeçalhos a pedidos de mosaico para serviços protegidos por palavra-passe.
Modificar URLs para executar pedidos através de um serviço proxy.

As opções de serviço do mapa têm uma transformRequest que pode ser utilizada para modificar todos os pedidos feitos pelo mapa antes de serem feitos. A transformRequest opção é uma função que utiliza dois parâmetros; um URL de cadeia e uma cadeia de tipo de recurso que indica para que serve o pedido. Esta função tem de devolver um resultado RequestParameters .

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

Ao utilizar uma transformação de pedido, tem de devolver um RequestParameters objeto que contenha uma url propriedade no mínimo. Seguem-se as propriedades que podem ser incluídas num RequestParameters objeto.

Opção	Tipo	Description
body	string	Um corpo do pedido POST.
credenciais	`'same-origin'` \| `'include'`	Utilizado para especificar a definição de credenciais de pedido de origem cruzada (CORs). Utilize "incluir" para enviar cookies com pedidos de várias origens.
cabeçalhos	objeto	Os cabeçalhos a enviar com o pedido. O objeto é um par de valores chave de valor de valores de cadeia.
método	`'GET'` \| `'POST'` \| `'PUT'`	O tipo de pedido a fazer. A predefinição é `'GET'`.
tipo	`'string'` \| `'json'` \| `'arrayBuffer'`	O formato do corpo de resposta POST.
url	string	O URL a pedir.

Os tipos de recursos mais relevantes para o conteúdo que adicionar ao mapa estão listados na seguinte tabela:

Tipo de Recurso	Description
Imagem	Um pedido para uma imagem para utilização com um SymbolLayer ou o ImageLayer.
Fonte	Um pedido de informações de origem, como um pedido TileJSON. Alguns pedidos dos estilos de mapa base também utilizam este tipo de recurso ao carregar informações de origem.
Mosaico	Um pedido de uma camada de mosaico (raster ou vetor).
WFS	Um pedido de um `WfsClient` no módulo de E/S Espacial para um Serviço de Funcionalidades Web OGC. Para obter mais informações, veja Ligar a um serviço WFS.
WebMapService	Um pedido do `OgcMapLayer` no módulo de E/S Espacial para um serviço WMS ou WMTS. Para obter mais informações, veja Adicionar uma camada de mapa do Open Geospatial Consortium (OGC).

Seguem-se alguns tipos de recursos, normalmente ignorados, que são transmitidos através da transformação do pedido e estão relacionados com os estilos de mapa base: StyleDefinitions, Style, SpriteImage, SpriteJSON, Glyphs, Attribution.

O exemplo seguinte mostra como modificar todos os pedidos para o tamanho https://example.com ao adicionar um nome de utilizador e palavra-passe como cabeçalhos ao pedido.

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>'
    }
});