使用 Replit 学习 HTML、CSS 和 JavaScript 以使用 MapTiler 创建简单 WebGIS 的完整指南

简介

开始学习 webGIS 编程之旅可能是一个挑战，特别是如果我们是 HTML、CSS 和 JavaScript 世界的新手。幸运的是，有了Replit这样的工具，我们可以以简单直接的方式开始学习。本文将引导您完成使用 MapTiler 创建简单 WebGIS 应用程序的基本步骤。通过本教程，我们将学习如何创建只需使用浏览器即可从任何地方访问的交互式地图。

步骤 1. 在 Replit 上创建帐户和项目

1。注册 Replit：

• 打开 Repllit
• 点击右上角的“注册”按钮。
• 选择所需的注册方式（Google、GitHub 或电子邮件）。
• 注册成功后，我们将被引导至 Replit 仪表板。

2。创建一个新项目：

• 在 Replit 仪表板中，单击“创建 Repl”按钮。
• 在模板部分中，选择“HTML、CSS、JS”。
• 为我们的项目命名，例如“WebGIS-Simple”。
• 点击“Create Repl”创建项目。 项目创建后，我们将看到三个主要文件：index.html、style.css 和 script.js。这些文件将用于构建我们的网页。

第 2 步：设置 HTML 结构

1。了解基本 HTML 结构：

• 在Replit中打开index.html文件。
• index.html是决定我们网页的结构和基本内容的文件。

2。为地图添加元素：

• 将index.html的内容替换为以下代码：

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

说明：

• ：显示页面标题。

• ：地图显示的位置。
• Maplibre GL：用于显示来自 MapTiler 的地图。



第 3 步：使用 CSS 添加样式

1。为地图视图添加了 CSS：

• 打开 style.css 文件。
• 将 style.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;
}

说明：

• body, html：设置边距和填充，以便地图可以使用整个屏幕。
• #map：将地图尺寸设置为全宽和 500px 高度。
• h1：设置标题显示在页面中间。



注意：此样式部分可以根据自己的设计和需求进行调整，查看此处的样式代码 W3 Schools

第 4 步：将 MapTiler 与 JavaScript 集成

1。从 MapTiler 获取 API 密钥

• 打开 MapTiler。
• 点击右上角的“注册”。
• 通过电子邮件填写注册表或使用Google帐户注册。
• 注册后，我们将进入 MapTiler 仪表板。



2。获取 API 密钥：

• 在 MapTiler 仪表板中，单击“API 密钥”选项卡。
• 您将看到MapTiler提供的默认API密钥。
• 如果您想创建新的 API 密钥，请单击“创建新密钥”按钮。
• 为新的 API 密钥命名，例如“WebGIS-Simple”，然后单击“创建”。
• 复制我们刚刚创建的 API 密钥。该 API 密钥将用于访问我们项目中的地图。

3。创建交互式地图：

• 打开 script.js 文件。
• 在 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
});

说明：

• 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 !