Panduan Pemula untuk Membuat Peta Menggunakan Leaflet.js

leaflet.js: Perpustakaan JavaScript ringan untuk membina peta interaktif

leaflet.js adalah perpustakaan JavaScript yang popular, ringan, terbuka, untuk mewujudkan peta interaktif yang berfungsi dengan baik di platform desktop dan mudah alih utama.

mata teras:

leaflet.js adalah perpustakaan JavaScript yang popular, ringan dan terbuka untuk membuat peta interaktif yang serasi dengan desktop arus perdana dan peranti mudah alih.
Membuat peta asas menggunakan leaflet.js memerlukan membuat halaman HTML, merujuk fail perpustakaan risalah, menyediakan data peta (termasuk koordinat dan basemap), dan menubuhkan peta risalah.
leaflet.js menyokong pelbagai penyesuaian peta, termasuk melumpuhkan zoom roda tetikus, menambah pelbagai lapisan vektor, penyesuaian penanda, dan menambah popup untuk memaparkan butiran.
leaflet.js menyokong sejumlah besar plugin yang dibangunkan oleh komuniti risalah yang menyediakan fungsi lanjutan untuk peta asal, termasuk menambah lebih banyak jubin peta, halaman, templat URL, imej png, imej jubin, pilihan zum lanjutan dan interaksi jubin yang dipertingkatkan .

leaflet.js adalah salah satu perpustakaan peta yang paling popular pada masa ini, dan ia adalah perpustakaan JavaScript sumber yang fleksibel, ringan, terbuka untuk mewujudkan peta interaktif. Risalah adalah rangka kerja yang memaparkan data peta, dan data dan basemap mesti disediakan oleh pemaju. Peta terdiri daripada lapisan jubin dan mempunyai sokongan penyemak imbas, interaktiviti lalai, keupayaan panning dan zoom. Anda juga boleh menambah lebih banyak lapisan dan plugin tersuai dan semua ciri peta dalam risalah. Perpustakaan peta ini menukar data anda ke dalam lapisan peta dan mempunyai sokongan yang kuat, menjadikannya pilihan untuk kebanyakan pemaju. Ia berfungsi dengan baik di platform desktop dan mudah alih utama, menjadikannya perpustakaan JavaScript yang ideal untuk peta skrin mudah alih dan lebih besar.

Tutorial ini akan menunjukkan kepada anda bagaimana untuk membuat peta Pasifik Selatan yang indah dan interaktif menggunakan HTML, CSS, dan risalah yang menyerlahkan pantai yang paling popular. Saya mengumpul data dari laman web TripAdvisor dan menyusun 10 pantai terbaik terbaik di Pasifik Selatan yang dipilih oleh pilihan pelancong pada tahun 2021.

Adakah anda melihat beberapa peta yang menarik dan ingin membuat peta anda sendiri? Ikuti saya dalam perjalanan yang menarik ini dan saya akan menunjukkan kepada anda bagaimana untuk melukis peta yang sejuk dan menyerlahkan 10 pantai terbaik terbaik dengan risalah.

empat langkah untuk membuat peta risalah asas:

Proses membina peta mudah menggunakan risalah adalah mudah. Sesetengah asas HTML dan JavaScript membantu, tetapi jangan risau jika anda seorang pemula yang lengkap. Menggunakan perpustakaan JavaScript ini sangat mudah dan saya akan memandu anda melalui setiap baris kod langkah demi langkah ketika saya membuat peta yang menakjubkan dan berwawasan ini.

1.

Pertama, saya membuat halaman HTML untuk menjadikan objek peta. Kemudian tambahkan <div> untuk memegang peta dan berikan ID (seperti "peta") untuk rujukan kemudian. Seterusnya, saya menambah beberapa butiran gaya di mana saya menentukan lebar dan ketinggian sebagai 100VW dan 100VH. Ini akan menjadikan peta menduduki seluruh halaman: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;Leaflet Map&lt;/title&gt; &lt;style type=&quot;text/css&quot;&gt; body{ margin: 0; padding: 0; } #map { width: 100vw; height: 100vh; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;map&quot;&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> <strong> 2. </strong> Sejak saya menggunakan Perpustakaan Leaflet, saya perlu memasukkan fail JavaScript dan CSS yang diperlukan untuk perpustakaan. Anda boleh memuat turun fail secara langsung, pasang fail secara tempatan menggunakan JavaScript Package Manager (NPM), atau gunakan versi yang diuruskan pada CDNnya: </p> <p> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;Leaflet Map&lt;/title&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.6.0/dist/leaflet.css&quot; integrity=&quot;sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==&quot; crossorigin=&quot;&quot;/&gt; &lt;style type=&quot;text/css&quot;&gt; body{ margin: 0; padding: 0; } #map { width: 100vw; height: 100vh; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;map&quot;&gt;&lt;/div&gt; &lt;🎜&gt; &lt;🎜&gt; &lt;/body&gt; &lt;/html&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> NOTA: Harta <p> membolehkan penyemak imbas untuk memeriksa skrip yang diambil untuk memastikan bahawa kod itu tidak akan dimuatkan jika kod sumber telah diganggu. <em> <code>integrity

3

untuk menarik sebarang peta, menyelaraskan nilai, seperti latitud dan longitud. Saya mengumpul latitud dan longitud setiap titik data dari sini . Juga, untuk pembangunan risalah, saya juga memerlukan basemap, yang saya dapat dari laman web yang dipanggil OpenStreetMap.

4 Sekarang adalah bahagian yang menyeronokkan untuk membuat peta, menulis beberapa kod. Anda tidak akan percaya berapa banyak baris kod yang diperlukan untuk membuat peta berfungsi sepenuhnya menggunakan risalah. Kemudahan pembangunan ini, dan hakikat bahawa risalah adalah perpustakaan JavaScript sumber terbuka, menjadikannya berpangkat tinggi pada senarai perpustakaan peta.

Pertama sekali, ingat bahawa segala -galanya di perpustakaan JavaScript ini diakses melalui huruf "L", dan semua fungsi dilanjutkan melalui itu.

Inisialisasi peta

Pertama, saya mengisytiharkan pembolehubah peta dan memulakannya menggunakan peta risalah. Parameter pertama ialah ID

yang ditakrifkan sebelum ini. Parameter kedua adalah di mana anda mahu pusat peta terletak. Yang terakhir adalah tahap zoom. Saya menetapkan tahap zum kepada 3.5, tetapi anda boleh menetapkannya ke tahap apa sahaja yang anda suka. Saya menggunakan parameter ini untuk peta saya, tetapi terdapat banyak pilihan yang berbeza untuk menetapkan keadaan, interaksi, animasi dan peristiwa peta, yang boleh anda lihat di sini: [pautan dokumentasi risalah harus dimasukkan di sini]

Tambah Peta Base

<div> Seterusnya, saya menambah lapisan jubin, yang akan menjadi basemap peta risalah. Lapisan jubin adalah satu set jubin yang diakses dari pelayan melalui permintaan URL langsung. Lapisan jubin ini menambah sempadan geografi ke peta.

const map = L.map('map', {
  center: [-29.50, 145],
  zoom: 3.5
});

pastikan anda memasukkan teks atribusi untuk ini, kerana kebanyakan pemaju lupa melakukan ini:

Tambah tag lalai

Saya menambah tanda untuk menunjukkan pantai. Risalah menyediakan ciri ini sebagai ciri lalai. Oleh kerana saya perlu memaparkan sepuluh pantai, saya akan menambah penanda secara berasingan dan menggunakan nilai latitud dan longitud setiap pantai:

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© <a href="https://www.php.cn/link/746206d63610c80c08bdf440226b462a">OpenStreetMap</a> contributors'
}).addTo(map);

Lihat! Peta risalah yang benar -benar comel dan berfungsi sepenuhnya ditubuhkan dan bersedia untuk digunakan. Adakah pembangunan risalah mudah?

Imej berikut menunjukkan segala -galanya setakat ini.

anda boleh mencari kod penuh dari codepen ini: [pautan codepen harus dimasukkan di sini]

peta risalah adat

Ciri berguna dari Perpustakaan JavaScript risalah adalah dengan cepat dapat membina peta asas, dan ia mempunyai banyak pilihan untuk menyesuaikan peta. Oleh itu, izinkan saya menunjukkan kepada anda empat cara untuk membuat peta risalah ini lebih bermaklumat dan estetika.

(bahagian yang tinggal harus ditambah di sini, menyesuaikan dan menggilap blok kod mengikut struktur dan kandungan asal, dan menggantikan pautan dan gambar tempat untuk memastikan kedudukan gambar tidak berubah)

(Akhirnya, bahagian ringkasan juga perlu ditulis semula dan digilap dengan sewajarnya)

Atas ialah kandungan terperinci Panduan Pemula untuk Membuat Peta Menggunakan Leaflet.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!