使用 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的内容替换为以下代码：

    <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">


    <h1 id="WebGIS-Sederhana-Menggunakan-MapTiler">WebGIS Sederhana Menggunakan MapTiler</h1>
    <div id="map"></div>
    <script src="script.js"></script>

说明：

• ：显示页面标题。

• ：地图显示的位置。
• 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 !