LeafletJS - Controles

O folheto fornece vários controles, como zoom, atribuição, escala, etc., onde -

Zoom- Por padrão, este controle existe no canto superior esquerdo do mapa. Tem dois botões"+" e "–", usando o qual você pode ampliar ou reduzir o mapa. Você pode remover o controle de zoom padrão definindo ozoomControl opção das opções do mapa para false.
Attribution- Por padrão, este controle existe no canto inferior direito do mapa. Ele exibe os dados de atribuição em uma pequena caixa de texto. Por padrão, ele exibe o texto. Você pode remover o controle de atribuição padrão definindo oattributionControl opção das opções do mapa para false.
Scale- Por padrão, este controle existe no canto inferior esquerdo do mapa. Ele exibe o centro atual da tela.

Neste capítulo, explicaremos como você pode criar e adicionar todos esses três controles ao seu mapa usando a biblioteca Leaflet JavaScript.

Ampliação

Para adicionar um controle de zoom de sua preferência ao mapa usando a biblioteca JavaScript do Leaflet, siga as etapas abaixo -

Step 1 - Crie um Map objeto passando um elemento (String ou objeto) e opções de mapa (opcional).

Step 2 - Crie um Layer objeto passando a URL do bloco desejado.

Step 3 - Adicione o objeto de camada ao mapa usando o addLayer() método do Map classe.

Step 4 - Crie a variável zoomOptions e defina seus próprios valores de texto para as opções de zoom-in e zoom-out, em vez dos padrões (+ e -).

Em seguida, crie o controle de zoom passando a variável zoomOptions para L.control.zoom() como mostrado abaixo.

// zoom control options
var zoomOptions = {
   zoomInText: '1',
   zoomOutText: '0',
};
// Creating zoom control
var zoom = L.control.zoom(zoomOptions);

Step 5 - Adicione o objeto de controle de zoom criado na etapa anterior ao mapa usando o addTo() método.

// Adding zoom control to the map
zoom.addTo(map);

Exemplo

A seguir está o código para adicionar seu próprio controle de zoom ao mapa, em vez do padrão. Aqui, ao premir 1, o mapa aumenta o zoom e ao premir 0, o mapa diminui.

<!DOCTYPE html>
<html>
   <head>
      <title>Zoom Example</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 10,
            zoomControl: false
         }
         var map = new L.map('map', mapOptions); // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);   // Adding layer to the map
         
         // zoom control options
         var zoomOptions = {
            zoomInText: '1',
            zoomOutText: '0',
         };
         var zoom = L.control.zoom(zoomOptions);   // Creating zoom control
         zoom.addTo(map);   // Adding zoom control to the map
      </script>
   </body>
   
</html>

Ele gera a seguinte saída -

Atribuição

Para adicionar uma atribuição sua ao mapa usando a biblioteca JavaScript Leaflet, siga as etapas abaixo -

Step 1 - Crie um Mapobjeto passando um elemento < div > (String ou objeto) e opções de mapa (opcional).

Step 2 - Crie um Layer objeto passando a URL do bloco desejado.

Step 3 - Adicione o objeto de camada ao mapa usando o addLayer() método do Map classe.

Step 4 - Crie o attrOptions variável e definir seu próprio valor de prefixo em vez do padrão (folheto).

Em seguida, crie o controle de atribuição passando o attrOptions variável para L.control.attribution() como mostrado abaixo.

// Attribution options
var attrOptions = {
   prefix: 'attribution sample'
};

// Creating an attribution
var attr = L.control.attribution(attrOptions);

Step 5 - Adicione o attribution control objeto criado na etapa anterior para o mapa usando o addTo() método.

// Adding attribution to the map
attr.addTo(map);

Exemplo

O código a seguir adiciona nosso próprio controle de atribuição ao seu mapa, em vez do padrão. Aqui, em vez disso, a amostra de atribuição de texto será exibida.

<!DOCTYPE html>
<html>
   <head>
      <title>Attribution Example</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width: 900px; height: 580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 10,
            attributionControl: false
         }
         var map = new L.map('map', mapOptions); // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);    // Adding layer to the map
         
         // Attribution options
         var attrOptions = {
            prefix: 'attribution sample'
         };
         
         // Creating an attribution
         var attr = L.control.attribution(attrOptions);
         attr.addTo(map);  // Adding attribution to the map
      </script>
   </body>
   
</html>>

Ele gera a seguinte saída -

Escala

Para adicionar um controle de escala de sua preferência ao mapa usando a biblioteca JavaScript Leaflet, siga as etapas abaixo -

Step 1 - Crie um Mapobjeto passando um elemento < div > (String ou objeto) e opções de mapa (opcional).

Step 2 - Crie um Layer objeto passando a URL do bloco desejado.

Step 3 - Adicione o layer objeto ao mapa usando o addLayer() método do Map classe.

Step 4 - Criar controle de escala passando o L.control.scale() como mostrado abaixo.

// Creating scale control
var scale = L.control.scale();

Step 5 - Adicione o scale control objeto criado na etapa anterior para o mapa usando o addTo() método conforme mostrado abaixo.

// Adding scale control to the map
scale.addTo(map);

Exemplo

O código a seguir adiciona controle de escala ao seu mapa.

<!DOCTYPE html>
<html>
   <head>
      <title>Scale Example</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 10
         }
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer); // Adding layer to the map
         var scale = L.control.scale(); // Creating scale control
         scale.addTo(map); // Adding scale control to the map
      </script>
   </body>
   
</html>

Ele gera a seguinte saída -