開始學習 webGIS 程式設計之旅可能是一個挑戰，特別是如果我們是 HTML、CSS 和 JavaScript 世界的新手。幸運的是，有了像Replit這樣的工具，我們可以用簡單直接的方式開始學習。本文將引導您完成使用 MapTiler 建立簡單 WebGIS 應用程式的基本步驟。透過本教程，我們將學習如何建立只需使用瀏覽器即可從任何地方存取的互動式地圖。
1。註冊 Replit：
2。建立一個新專案：
1。了解基本 HTML 結構：
2。為地圖加入元素：
<!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>
說明：
1。為地圖視圖新增了 CSS：
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;
}
說明：
注意：此樣式部分可以根據自己的設計和需求進行調整，查看此處的樣式代碼 W3 Schools
1。從 MapTiler 取得 API 金鑰
2。取得 API 金鑰：
3。建立互動式地圖：
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
});
說明：
4. Menambahkan Marker pada Peta (Opsional):
const marker = new maplibregl.Marker() .setLngLat([106.8272, -6.1751]) // Koordinat Jakarta .addTo(map);
1. Menjalankan Proyek:
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 !
以上是使用 Replit 學習 HTML、CSS 和 JavaScript 以使用 MapTiler 建立簡單 WebGIS 的完整指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
