Введение

Начать изучение программирования WebGIS может быть непросто, особенно если мы новичок в мире HTML, CSS и JavaScript. К счастью, с помощью таких инструментов, как Replit, мы можем начать обучение простым и прямым способом. В этой статье описаны основные шаги по созданию простого приложения WebGIS с использованием MapTiler. С помощью этого урока мы научимся создавать интерактивные карты, к которым можно получить доступ откуда угодно, просто используя наш браузер.

Шаг 1. Создайте учетную запись и проект в Replit

1. Зарегистрируйтесь на Replit:

• Открыть Replit
• Нажмите кнопку «Зарегистрироваться» в правом верхнем углу.
• Выберите желаемый способ регистрации (Google, GitHub или электронная почта).
• После успешной регистрации мы будем перенаправлены на панель управления Replit.

2. Создание нового проекта:

• На панели инструментов Replit нажмите кнопку «Создать Repl».
• В разделе «Шаблон» выберите «HTML, CSS, JS».
• Назовите наш проект, например «WebGIS-Simple».
• Нажмите «Создать реплику», чтобы создать проект. После создания проекта мы увидим три основных файла: index.html, style.css и script.js. Эти файлы будут использоваться для создания нашей веб-страницы.

Шаг 2. Настройка структуры HTML

1. Понимание базовой структуры HTML:

• Откройте файл index.html в Replit.
• 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: устанавливает размер карты на полную ширину и высоту 500 пикселей.
• h1: устанавливает отображение заголовка в середине страницы.



Примечание: этот раздел стилей можно настроить в соответствии с вашим собственным дизайном и потребностями, посмотрев код стиля здесь W3 Schools

Шаг 4. Интеграция MapTiler с JavaScript

1. Получение ключа API от MapTiler

• Откройте MapTiler.
• Нажмите «Зарегистрироваться» в правом верхнем углу.
• Заполните регистрационную форму по электронной почте или зарегистрируйтесь, используя учетную запись Google.
• После регистрации мы попадем в панель управления MapTiler.



2. Получение ключа API:

• На панели управления MapTiler нажмите вкладку «Ключи API».
• Вы увидите ключ API по умолчанию, предоставленный MapTiler.
• Если вы хотите создать новый ключ 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
});

Объяснение:

• контейнер: относится к элементу с картой идентификаторов в index.html.
• style: URL-адрес стиля карты из MapTiler. Замените YOUR_MAPTILER_API_KEY своим ключом API.
• центр: географические координаты центра карты (Джакарта).
• zoom: начальный уровень масштабирования карты.



4. Добавление маркеров на карту (необязательно):

• Если вы хотите добавить маркер на карту, добавьте следующий код в разделе инициализации карты.
• Маркер будет отображаться по указанным координатам.

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



Шаг 5. Запуск и тестирование проекта

1. Текущий проект:

• Как только мы закончим писать код, нажмите кнопку «Выполнить» в Replit. Replit откроет веб-страницу, содержащую созданную нами карту. Наблюдение за результатами:



• На веб-странице будет отображаться интерактивная карта из MapTiler.
• мы можем увеличивать, уменьшать масштаб и перемещать карту, чтобы увидеть разные части.



Вот результаты реплита, который мы сделали:

Мы завершили этот простой проект WebGIS, и вы можете увидеть результаты по следующей ссылке Simple WebGIS Source.

В этом проекте показано, как использовать HTML, CSS, JavaScript и API MapTiler для создания простого приложения WebGIS. Вы можете попробовать сами или использовать это как основу для более сложного проекта.

Следуя этим шагам, мы успешно создали простое приложение WebGIS с использованием Replit и MapTiler. Это руководство предназначено для новичков, которые хотят понять основы веб-разработки с использованием HTML, CSS и JavaScript и научиться создавать интерактивные карты.

Поощрение и спасибо, надеюсь, это будет полезно!