MapTiler를 사용하여 간단한 WebGIS를 생성하기 위해 Replit을 사용하여 HTML, CSS 및 JavaScript를 학습하는 완벽한 가이드

소개

webGIS 프로그래밍을 배우는 여정을 시작하는 것은 어려울 수 있습니다. 특히 HTML, CSS, JavaScript 세계를 처음 접하는 경우에는 더욱 그렇습니다. 다행히 Replit과 같은 도구를 사용하면 간단하고 직접적인 방법으로 학습을 시작할 수 있습니다. 이 문서에서는 MapTiler를 사용하여 간단한 WebGIS 애플리케이션을 생성하는 기본 단계를 안내합니다. 이 튜토리얼을 통해 브라우저만 사용하면 어디에서나 액세스할 수 있는 대화형 지도를 만드는 방법을 배울 수 있습니다.

1단계. Replit에서 계정 및 프로젝트 생성

1. Replit에 가입하세요:

• Relplit 열기
• 오른쪽 상단의 '회원가입' 버튼을 클릭하세요.
• 원하는 등록 방법(Google, GitHub, 이메일)을 선택하세요.
• 등록이 성공적으로 완료되면 Replit 대시보드로 이동됩니다.

2. 새 프로젝트 만들기:

• Replit 대시보드에서 "Create 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

설명:

• 4a249f0d628e2318394fd9b75b4636b1 : 페이지 제목을 표시합니다.
• bde01ac7465ee2976057c72e58a313ba : 지도가 표시되는 위치입니다.
• 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 학교의 스타일 코드를 확인하여 자신의 디자인과 필요에 따라 조정할 수 있습니다

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 !

위 내용은 MapTiler를 사용하여 간단한 WebGIS를 생성하기 위해 Replit을 사용하여 HTML, CSS 및 JavaScript를 학습하는 완벽한 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!