介绍

开始学习 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的内容替换为以下代码：

    
    
    
    
    
    


    
WebGIS Sederhana Menggunakan MapTiler
    

    

解释：

• : 显示页面标题。

• : 地图显示的位置。
• 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：指index.html中id为map的元素。
• style：MapTiler 中地图样式的 URL。将 YOUR_MAPTILER_API_KEY 替换为您的 API 密钥。
• center：地图中心地理坐标（雅加达）。
• zoom：地图的初始缩放级别。



4。将标记添加到地图（可选）：

• 如果要在地图上添加标记，请在地图初始化下添加以下代码。
• 标记将显示在指定的坐标处。

const marker = new maplibregl.Marker()
  .setLngLat([106.8272, -6.1751]) // Koordinat Jakarta
  .addTo(map);



第 5 步：运行和测试项目

1。运行项目：

• 编写完代码后，单击 Replit 中的“运行”按钮。 Replit 将打开一个包含我们创建的地图的网页。 观察结果：



• 来自 MapTiler 的交互式地图将显示在网页上。
• 我们可以放大、缩小和平移地图来查看不同的部分。



以下是我们所做的 Replit 的结果：

我们已经完成了这个简单的 WebGIS 项目，您可以在以下链接简单 WebGIS 源中查看结果。

该项目展示了如何使用 HTML、CSS、JavaScript 和 MapTiler API 构建简单的 WebGIS 应用程序。您可以自己尝试或使用它作为更复杂项目的基础。

通过遵循这些步骤，我们已经使用 Replit 和 MapTiler 成功创建了一个简单的 WebGIS 应用程序。本指南旨在帮助初学者了解 HTML、CSS 和 JavaScript 的 Web 开发基础知识，同时学习创建交互式地图。

鼓励和谢谢，希望有用！