hujung hadapan web
tutorial css
Panduan Lengkap untuk Mempelajari HTML, CSS dan JavaScript dengan Replit untuk Mencipta WebGIS Mudah Menggunakan MapTiler
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGIS Sederhana</title>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
</head>
<body>
<h1>WebGIS Sederhana Menggunakan MapTiler</h1>
<div id="map"></div>
<script src="script.js"></script>
</body>
</html>
Penjelasan:
-
: Memaparkan tajuk halaman.
-
: 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; }Salin selepas log masukPenjelasan:
- 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 });Salin selepas log masukPenjelasan:
- 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.
- Jika ingin menambahkan marker pada peta, tambahkan kode berikut di bawah inisialisasi peta.
- Marker akan ditampilkan pada koordinat yang ditentukan.
4. Menambahkan Marker pada Peta (Opsional):
const marker = new maplibregl.Marker() .setLngLat([106.8272, -6.1751]) // Koordinat Jakarta .addTo(map);
Salin selepas log masukLangkah 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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Menjadikan Peralihan Svelte Khas pertama anda
Mar 15, 2025 am 11:08 AM
API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Tunjukkan, jangan beritahu
Mar 16, 2025 am 11:49 AM
Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Membuat Bragdoc anda sendiri dengan sebelas
Mar 18, 2025 am 11:23 AM
Tidak kira tahap tahap anda sebagai pemaju, tugas yang kami selesaikan -sama ada besar atau kecil -membuat kesan besar dalam pertumbuhan peribadi dan profesional kami.
Vue 3
Apr 02, 2025 pm 06:32 PM
Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.
Apa yang ada perintah npm?
Mar 15, 2025 am 11:36 AM
Perintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.
