Panduan Lengkap untuk Mempelajari HTML, CSS dan JavaScript dengan Replit untuk Mencipta WebGIS Mudah Menggunakan MapTiler

Pengenalan

Memulakan perjalanan mempelajari pengaturcaraan webGIS boleh menjadi satu cabaran, terutamanya jika kita baru dalam dunia HTML, CSS dan JavaScript. Nasib baik, dengan alatan seperti Replit, kita boleh mula belajar dengan cara yang mudah dan langsung. Artikel ini akan membimbing anda melalui langkah-langkah asas untuk mencipta aplikasi WebGIS mudah menggunakan MapTiler. Dengan tutorial ini, kami akan belajar cara membuat peta interaktif yang boleh diakses dari mana-mana sahaja, hanya dengan menggunakan penyemak imbas kami.

Langkah 1. Buat Akaun dan Projek pada Replit

1. Daftar untuk Replit:

• Buka Replit
• Klik butang "Daftar" di penjuru kanan sebelah atas.
• Pilih kaedah pendaftaran yang diingini (Google, GitHub atau e-mel).
• Selepas pendaftaran berjaya, kami akan diarahkan ke papan pemuka Replit.

2. Mencipta Projek Baharu:

• Dalam papan pemuka Replit, klik butang "Buat Repl".
• Dalam bahagian Templat, pilih "HTML, CSS, JS".
• Beri nama projek kami, contohnya "WebGIS-Simple".
• Klik "Buat Repl" untuk mencipta projek. Setelah projek dibuat, kita akan melihat tiga fail utama: index.html, style.css dan script.js. Fail ini akan digunakan untuk membina halaman web kami.

Langkah 2: Menyediakan Struktur HTML

1. Memahami Struktur HTML Asas:

• Buka fail index.html dalam Replit.
• index.html ialah fail yang menentukan struktur dan kandungan asas halaman web kami.

2. Menambah Elemen untuk Peta:

• Ganti kandungan index.html dengan kod berikut:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
93f0f5c25f18dab9d176bd4f6de5d30e
    1fc2df4564f5324148703df3b6ed50c1
    4f2fb0231f24e8aef524fc9bf9b9874f
    b2386ffb911b14667cb8f0f91ea547a7WebGIS Sederhana6e916e0f7d1e588d4f442bf645aedb2f
    468dcf7b0ee61aef03af1a1fbe6725fc
    dbef08e381c0b8a41a4e7da66fde548d2cacc6d41bbb37262a98f745aa00fbf0
    f048bc6a849959de0baf2924e721825f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    4a249f0d628e2318394fd9b75b4636b1WebGIS Sederhana Menggunakan MapTiler473f0a7621bec819994bb5020d29372a
    cfb086edc64cb2ae2da2bfe40f81af9d16b28748ea4df4d9c2150843fecfba68
    84cf5d7ad8199c88ca1d921cae010baf2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Penjelasan:

• 4a249f0d628e2318394fd9b75b4636b1 : Memaparkan tajuk halaman.
• 11c63e2d6f8c9ca79f15e3d71a2fcdfe : Tempat di mana peta akan dipaparkan.
• Maplibre GL: Digunakan untuk memaparkan peta daripada MapTiler.

Langkah 3: Menambah Gaya dengan CSS

1. Menambahkan CSS untuk Paparan Peta:

• Buka fail style.css.
• Ganti kandungan fail style.css dengan kod berikut:

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
}

#map {
  width: 100%;
  height: 500px;
  margin-top: 20px;
}

h1 {
  text-align: center;
  color: #333;
}

Penjelasan:

• badan, html: Tetapkan jidar dan pelapik supaya peta boleh menggunakan keseluruhan skrin.
• #map: Menetapkan saiz peta kepada lebar penuh dan ketinggian 500px.
• h1: Menetapkan paparan tajuk di tengah-tengah halaman.

Nota: bahagian gaya ini boleh dilaraskan mengikut reka bentuk dan keperluan anda sendiri dengan melihat kod gaya di sini W3 Schools

Langkah 4: Mengintegrasikan MapTiler dengan JavaScript

1. Mendapatkan API Key daripada MapTiler

• Buka MapTiler.
• Klik "Daftar" di penjuru kanan sebelah atas.
• Isi borang pendaftaran dengan e-mel atau daftar menggunakan akaun Google.
• Selepas mendaftar, kami akan dibawa ke papan pemuka MapTiler.

2. Dapatkan Kunci API:

• Dalam papan pemuka MapTiler, klik pada tab "Kunci API".
• Anda akan melihat kunci API lalai yang disediakan oleh MapTiler.
• Jika anda ingin mencipta kunci API baharu, klik butang "Buat kunci baharu".
• Beri nama kunci API baharu, contohnya "WebGIS-Simple", dan klik "Create".
• Salin kunci API yang baru kami buat. Kunci API ini akan digunakan untuk mengakses peta dalam projek kami.

3. Mencipta Peta Interaktif:

• Buka fail script.js.
• Tambahkan kod berikut ke dalam script.js:

const map = new maplibregl.Map({
  container: 'map', // ID dari elemen div tempat peta akan dirender
  style: 'https://api.maptiler.com/maps/basic/style.json?key=YOUR_MAPTILER_API_KEY', // URL ke gaya peta dari MapTiler dan bagian API KEY masukan API KEY anda
  center: [106.8272, -6.1751], // Koordinat pusat peta (Jakarta)
  zoom: 10 // Level zoom peta
});

Penjelasan:

• container: Mengacu pada elemen dengan id map di index.html.
• style: URL ke gaya peta dari MapTiler. Gantilah YOUR_MAPTILER_API_KEY dengan API key Anda.
• center: Koordinat geografis pusat peta (Jakarta).
• zoom: Level zoom awal dari peta.



4. Menambahkan Marker pada Peta (Opsional):

• Jika ingin menambahkan marker pada peta, tambahkan kode berikut di bawah inisialisasi peta.
• Marker akan ditampilkan pada koordinat yang ditentukan.

const marker = new maplibregl.Marker()
  .setLngLat([106.8272, -6.1751]) // Koordinat Jakarta
  .addTo(map);

Langkah 5: Menjalankan dan Menguji Proyek

1. Menjalankan Proyek:

• Setelah kita selesai menulis kode, klik tombol "Run" di Replit. Replit akan membuka halaman web yang berisi peta yang sudah kita buat. Mengamati Hasilnya:

• Peta interaktif dari MapTiler akan ditampilkan di halaman web.
• kita bisa memperbesar, memperkecil, dan menggeser peta untuk melihat berbagai bagian.

Berikut Adalah Hasil Replit yang sudah kita buat:

Kita telah menyelesaikan proyek WebGIS sederhana ini dan bisa dilihat hasilnya di tautan berikut ini Source WebGIS Sederhana.

Proyek ini menunjukkan bagaimana menggunakan HTML, CSS, JavaScript, dan API MapTiler untuk membangun aplikasi WebGIS sederhana. Anda bisa mencoba sendiri atau menjadikan ini sebagai dasar untuk proyek yang lebih kompleks.

Dengan mengikuti langkah-langkah ini, kita telah berhasil membuat aplikasi WebGIS sederhana menggunakan Replit dan MapTiler. Panduan ini dirancang untuk pemula agar bisa memahami dasar-dasar pengembangan web dengan HTML, CSS, dan JavaScript sambil belajar membuat peta interaktif.

Semangat dan Terima kasih, semoga bermanfaat !

Atas ialah kandungan terperinci Panduan Lengkap untuk Mempelajari HTML, CSS dan JavaScript dengan Replit untuk Mencipta WebGIS Mudah Menggunakan MapTiler. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!