LeafletJS - Kontrol

Leaflet menyediakan berbagai kontrol seperti zoom, atribusi, skala, dll., Di mana -

Zoom- Secara default, kontrol ini ada di sudut kiri atas peta. Ini memiliki dua tombol"+" dan "–", yang dengannya Anda dapat memperbesar atau memperkecil peta. Anda dapat menghapus kontrol zoom default dengan mengaturzoomControl opsi dari opsi peta ke false.
Attribution- Secara default, kontrol ini ada di sudut kanan bawah peta. Ini menampilkan data atribusi dalam kotak teks kecil. Secara default, ini menampilkan teks. Anda dapat menghapus kontrol atribusi default dengan mengaturattributionControl opsi dari opsi peta ke false.
Scale- Secara default, kontrol ini ada di sudut kiri bawah peta. Ini menampilkan tengah layar saat ini.

Dalam bab ini, kami akan menjelaskan bagaimana Anda dapat membuat dan menambahkan ketiga kontrol ini ke peta Anda menggunakan pustaka JavaScript Leaflet.

Perbesar

Untuk menambahkan kontrol zoom Anda sendiri ke peta menggunakan pustaka JavaScript Leaflet, ikuti langkah-langkah yang diberikan di bawah ini -

Step 1 - Buat Map objek dengan melewatkan elemen (String atau objek) dan opsi peta (opsional).

Step 2 - Buat Layer objek dengan meneruskan URL ubin yang diinginkan.

Step 3 - Tambahkan objek lapisan ke peta menggunakan addLayer() metode dari Map kelas.

Step 4 - Buat variabel zoomOptions dan tentukan nilai teks Anda sendiri untuk opsi zoom-in dan zoom-out, bukan yang default (+ dan -).

Kemudian, buat kontrol zoom dengan meneruskan variabel zoomOptions ke L.control.zoom() seperti gambar dibawah.

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

Step 5 - Tambahkan objek kontrol zoom yang dibuat pada langkah sebelumnya ke peta menggunakan addTo() metode.

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

Contoh

Berikut adalah kode untuk menambahkan kontrol zoom Anda sendiri ke peta Anda, bukan yang default. Di sini, saat menekan 1, peta diperbesar, dan saat menekan 0, peta memperkecil.

<!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>

Ini menghasilkan output berikut -

Atribusi

Untuk menambahkan atribusi Anda sendiri ke peta menggunakan pustaka JavaScript Leaflet, ikuti langkah-langkah yang diberikan di bawah ini -

Step 1 - Buat Mapobjek dengan meneruskan elemen < div > (String atau objek) dan opsi peta (opsional).

Step 2 - Buat Layer objek dengan meneruskan URL ubin yang diinginkan.

Step 3 - Tambahkan objek lapisan ke peta menggunakan addLayer() metode dari Map kelas.

Step 4 - Buat attrOptions variabel dan tentukan nilai awalan Anda sendiri, bukan nilai default (selebaran).

Kemudian, buat kontrol atribusi dengan meneruskan attrOptions variabel untuk L.control.attribution() seperti gambar dibawah.

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

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

Step 5 - Tambahkan attribution control objek yang dibuat pada langkah sebelumnya ke peta menggunakan addTo() metode.

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

Contoh

Kode berikut menambahkan kontrol atribusi kita sendiri ke peta Anda, bukan yang default. Di sini, contoh atribusi teks akan ditampilkan.

<!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>>

Ini menghasilkan output berikut -

Skala

Untuk menambahkan kontrol skala Anda sendiri ke peta menggunakan pustaka JavaScript Leaflet, ikuti langkah-langkah yang diberikan di bawah ini -

Step 1 - Buat Mapobjek dengan meneruskan elemen < div > (String atau objek) dan opsi peta (opsional).

Step 2 - Buat Layer objek dengan meneruskan URL ubin yang diinginkan.

Step 3 - Tambahkan layer objek ke peta menggunakan addLayer() metode dari Map kelas.

Step 4 - Buat kontrol skala dengan melewatkan penggunaan L.control.scale() seperti gambar dibawah.

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

Step 5 - Tambahkan scale control objek yang dibuat pada langkah sebelumnya ke peta menggunakan addTo() metode seperti yang ditunjukkan di bawah ini.

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

Contoh

Kode berikut menambahkan kontrol skala ke peta Anda.

<!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>

Ini menghasilkan output berikut -