开始学习 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中文网其他相关文章！
