12. Giới thiệu về WebGIS

Giới thiệu về WebGIS và tạo một ứng dụng WebGIS đơn giản.

Khái niệm WebGIS

WebGIS là gì

  • WebGIS (Web Geographic Information System) là hệ thống thông tin địa lý hoạt động trên nền tảng web – nói cách khác, nó cho phép bạn truy cập, xem, phân tích, và chia sẻ dữ liệu bản đồ thông qua trình duyệt internet.

Quan sát một hệ thống WebGIS

  • Truy cập: https://camatlas.icem.com.au/ (Cambodia Mekong Delta Atlas)
  • Quan sát:
    • Những lớp thông tin, và các nhóm lớp thông tin được sắp xếp trên giao diện
    • Sự hiển thị bản đồ: màu sắc, đường nét,
    • Các thành phần của bản đồ: legend, scale bar, …
Các Ưu điểm của WebGIS là gì?

  • Truy cập linh hoạt và mọi lúc, mọi nơi
    • Chỉ cần kết nối internet và trình duyệt web (hoặc ứng dụng di động).
    • Không bị giới hạn bởi hệ điều hành (Windows, MacOS, Linux, Android…).
    • Phù hợp cho người dùng ở nhiều vị trí địa lý khác nhau.
  • Không cần cài đặt phần mềm chuyên dụng
  • Chia sẻ và cộng tác dễ dàng
    • Dữ liệu được lưu trữ tập trung trên máy chủ, nên nhiều người có thể xem hoặc chỉnh sửa (nếu được cấp quyền).
    • Hỗ trợ truy cập công khai hoặc giới hạn cho nội bộ.
    • Có thể nhúng bản đồ vào website, báo cáo, hoặc chia sẻ qua link.

Vai trò của WebGIS

Hiện nay, WebGIS đóng vai trò rất quan trọng trong việc quản lý, chia sẻ và phân tích dữ liệu không gian, đặc biệt trong bối cảnh chuyển đổi số và dữ liệu mở. Có thể tóm gọn các vai trò chính như sau:

  • Công cụ chia sẻ dữ liệu không gian hiệu quả (như EarthExplorer của USGS)
    • Cho phép công khai hóa dữ liệu GIS tới cộng đồng hoặc chia sẻ nội bộ một cách nhanh chóng.
    • Hỗ trợ ra quyết định dựa trên dữ liệu chung, thay vì dữ liệu phân tán ở nhiều cá nhân. Ví dụ: các cổng dữ liệu mở của chính quyền, bản đồ dịch bệnh, bản đồ giám sát môi trường.
  • Nền tảng giám sát và quản lý theo thời gian thực (giống như Demo WebGIS giám sát bụi mịn sẽ giới thiệu ở cuối bài này)
    • Kết nối với cảm biến IoT, GPS, thiết bị đo đạc để cập nhật thông tin liên tục.
    • Giám sát cháy rừng, lũ lụt, ô nhiễm không khí, giao thông… ngay khi sự kiện xảy ra.
    • Giúp phản ứng nhanh hơn trong các tình huống khẩn cấp.
  • Hỗ trợ ra quyết định dựa trên phân tích không gian (giống như hệ thống CamAtlas giới thiệu ở trên)
    • Tích hợp các công cụ phân tích trên web: đo khoảng cách, phân tích vùng đệm, tìm kiếm nâng cao, phân tích chồng lớp dữ liệu (overlay).
    • Giúp các nhà quản lý, quy hoạch, và nhà nghiên cứu đưa ra giải pháp dựa trên thông tin trực quan.
  • Thúc đẩy minh bạch và tham gia cộng đồng (Mapillary, OpenStreetMap, Google Street View)
    • Người dân có thể truy cập, giám sát, và đóng góp dữ liệu (crowdsourcing).
    • Tăng tính minh bạch trong các dự án quy hoạch, bảo vệ môi trường, và dịch vụ công.

Thực hành: Tạo một WebGIS đơn giản

  • Bài học này không cung cấp kiến thức về IT hoặc khoa học máy tính một cách hệ thống.
  • Cách tiếp cận của bài học này là tìm hiểu cách tạo một ứng dụng WebGIS dành cho người không có kiến thức nền về phát triển web, dựa trên sự hỗ trợ của các công cụ AI như ChatGPT, Grok…

Chuẩn bị

  • Lập sẵn tài khoản để sử dụng các công cụ AI (miễn phí)
  • Lập sẵn tài khoản Github để phục vụ đưa trang WebGIS lên Internet. Mục đích là tận dụng tính năng Github Pages của Github để hosting trang webGIS.
    Github là gì?

    • GitHub là một nền tảng lưu trữ và quản lý mã nguồn (source code) trực tuyến, cho phép lập trình viên và nhóm phát triển lưu trữ, chia sẻ, cộng tác trên các dự án phần mềm bằng hệ thống Git.
    • Git = công cụ quản lý phiên bản mã nguồn.
    • GitHub = dịch vụ web dựa trên Git, giúp bạn làm việc nhóm, chia sẻ và theo dõi thay đổi của mã nguồn dễ dàng.

    Hosting là gì?

    • Hosting (dịch sang tiếng Việt thường gọi là lưu trữ web) là dịch vụ cho phép bạn đặt (lưu trữ) website hoặc ứng dụng web của mình trên một máy chủ (server) kết nối Internet, để người khác có thể truy cập qua tên miền (domain).
    • Có thể hình dung:
      • Website = là “ngôi nhà” tập hợp file HTML, CSS, JS, dữ liệu hình ảnh, cơ sở dữ liệu…
      • Hosting = mảnh đất để xây lên ngôi nhà.
      • Tên miền (domain) = “địa chỉ nhà” để người ta tìm đến.

Website, domain, và hosting
Website, domain, và hosting

Khởi tạo trang webGIS cơ bản đầu tiên

  • Đánh vào ChatGPT: Hãy tạo 1 webgis cơ bản
  • ChatGPT trả lời:

Thành phần cơ bản của một WebGIS
Frontend (Giao diện): hiển thị bản đồ, người dùng tương tác.
Backend (Tùy chọn): xử lý dữ liệu, API.
Map library: như Leaflet.js, OpenLayers, hoặc Mapbox GL JS.
Tile provider: như OpenStreetMap hoặc Mapbox.

Các bạn hãy tự tìm hiểu sâu các khái niệm được highlight ở box này.

Tùy vào mục tiêu và quy mô, webGIS có thể được xây dựng dựa trên nhiều cách tiếp cận khác nhau:

  • Nếu bạn chỉ cần bản đồ Leaflet + GeoJSON tĩnh → có thể dùng GitHub Pages (miễn phí).
  • Nếu cần WebGIS động, nhiều người truy cập, xử lý dữ liệu lớn → cần phải có backend, dùng VPS hoặc cloud server để chạy GeoServer và database PostGIS.
  • Ở Ví dụ này, ta sẽ xây dựng một WebGIS cơ bản dùng Leaflet.js + OpenStreetMap.Không cần backend, chạy được luôn với file .html.
  • Dưới đây là đoạn mã html mà ChatGPT đã tạo để thiết lập 1 webGIS cơ bản với các chức năng:
    • Title: WebGIS cơ bản với Leaflet
    • Đặt vị trí trung tâm ở Việt Nam
    • Thêm lớp nền OpenStreetMap
    • Thêm một Marker đặt tại Hà Nội, với label là:
      Hà Nội
      Thủ đô của Việt Nam
<!DOCTYPE html>
<html>
<head>
  <title>WebGIS cơ bản với Leaflet</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

  <style>
    #map {
      height: 100vh;
      width: 100%;
    }
  </style>
</head>
<body>

<h3 style="text-align:center;">WebGIS cơ bản với Leaflet.js</h3>
<div id="map"></div>

<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

<script>
  // Khởi tạo bản đồ và đặt vị trí trung tâm (tọa độ Việt Nam)
  var map = L.map('map').setView([14.0583, 108.2772], 6);

  // Thêm lớp nền từ OpenStreetMap
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);

  // Thêm 1 marker (ví dụ tại Hà Nội)
  var marker = L.marker([21.0285, 105.8544]).addTo(map);
  marker.bindPopup("<b>Hà Nội</b><br>Thủ đô của Việt Nam").openPopup();
</script>

</body>
</html>

Exercise 1: Publish webGIS cơ bản sử dụng Github pages

  • Copy nội dung đoạn mã trên, dán vào 1 file notepad và lưu lại thành tên index.html
    Dán mã html vào một file notepad và lưu lại dưới tên index.html
    Dán mã html vào một file notepad và lưu lại dưới tên index.html

Mở file index.html bằng trình duyệt web, chrome hoặc firefox
Mở file index.html bằng trình duyệt web, chrome hoặc firefox

  • Hãy sử dụng các chức năng Zoom để thử nghiệm.
  • Để publish webGIS, truy cập Github và đăng nhập tài khoản.
  • Tạo mới một repository, đặt tên là exercise1.
  • Repository (thường gọi tắt là repo) trong GitHub là nơi lưu trữ toàn bộ mã nguồn, tài liệu, và lịch sử thay đổi của một dự án. Chức năng của repo:
    • Lưu trữ mã nguồn & file dự án (code, hình ảnh, tài liệu…).
    • Theo dõi lịch sử thay đổi (ai sửa gì, khi nào).
    • Hỗ trợ cộng tác (nhiều người có thể clone, pull, push, tạo pull request).
    • Quản lý phiên bản (quay lại các bản cũ khi cần).
    • Chia sẻ công khai hoặc giới hạn quyền truy cập.

Tạo repository mới
Tạo repository mới

Đặt tên repo là exercise1
Đặt tên repo là exercise1

Ấn vào **Uploading an existing file** để đưa file index.html lên Github
Ấn vào Uploading an existing file để đưa file index.html lên Github

Khi đã quen với Github, bạn có thể dùng command terminal để thao tác bằng các lệnh. Chi tiết ở Github Docs

Chọn file index.html để tải lên và sau đó ấn **Commit Changes**
Chọn file index.html để tải lên và sau đó ấn Commit Changes
Chuyển sang menu **Settings** > Ấn vào **Pages** ở dưới
Chuyển sang menu Settings > Ấn vào Pages ở dưới
Ở mục **Build and Deployment**, chuyển sang nhánh **main** > Ấn **Save**
Ở mục Build and Deployment, chuyển sang nhánh main > Ấn Save
Chuyển sang menu **Actions** để check xem trong quá trình build trang có lỗi gì không. Khi tất cả các quá trình được tick xanh nghĩa là trang đã được build thành công
Chuyển sang menu Actions để check xem trong quá trình build trang có lỗi gì không. Khi tất cả các quá trình được tick xanh nghĩa là trang đã được build thành công

Kết quả: https://tunghanu.github.io/exercise1/
Chúc mừng bạn đã triển khai thành công một trang webGIS.

Exercise 2: Thu nhỏ khu vực nghiên cứu và thêm một số lớp nền ảnh vệ tinh

Yêu cầu:

  • Zoom vào 1 khu vực nhỏ, ví dụ Trường Đại học Hà Nội
  • Thêm một lựa chọn các lớp nền khác là Google Hybrid, Google Satellite
<!DOCTYPE html>
<html>
<head>
  <title>WebGIS cơ bản với Leaflet, thêm lớp nền</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

  <style>
    #map {
      height: 100vh;
      width: 100%;
    }
  </style>
</head>
<body>

<h3 style="text-align:center;">WebGIS cơ bản với Leaflet.js, thêm lớp nền ảnh vệ tinh</h3>
<div id="map"></div>

<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

<script>
  // Khởi tạo bản đồ và đặt vị trí trung tâm (tọa độ Việt Nam)
  var map = L.map('map').setView([20.989470032335152, 105.79574580114927], 17);

 // Các layer nền
  var googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=y&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0','mt1','mt2','mt3'],
    attribution: '© Google Maps'
  });

  var googleSatellite = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0','mt1','mt2','mt3'],
    attribution: '© Google Satellite'
  });

  var googleTerrain = L.tileLayer('http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0','mt1','mt2','mt3'],
    attribution: '© Google Terrain'
  });

  var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap contributors'
  });

  // Thêm mặc định là Google Hybrid
  osm.addTo(map);

    // Tạo control chuyển đổi layer nền
  var baseMaps = {
    "🛰️ Google Hybrid": googleHybrid,
    "🌍 OpenStreetMap": osm,
    "🗺️ Google Satellite": googleSatellite,
    "⛰️ Google Terrain": googleTerrain
  };

  L.control.layers(baseMaps).addTo(map);

  // Thêm 1 marker (ví dụ tại Hà Nội)
  var marker = L.marker([20.989716969145746, 105.79573486594445]).addTo(map);
  marker.bindPopup("Trường Đại học Hà Nội").openPopup();
</script>

</body>
</html>

Chuyển đổi lớp nền bằng biểu tượng Layer
Chuyển đổi lớp nền bằng biểu tượng Layer

Exercise 3: Đưa một lớp vector lên webGIS

  • Trong exercise3, chúng ta sẽ đưa lớp bản đồ mật độ dân số huyện Chi Lăng, tỉnh Lạng Sơn đã giới thiệu ở Bài 8 lên webGIS, kèm theo legend.
  • Định dạng shapefile sẽ không phù hợp với web platforms. Dữ liệu cần phải được chuyển đổi sang định dạng geojson.
  • Trước tiên tính mật độ dân số cho các xã thuộc huyện Chi Lăng, Lạng Sơn (trước sáp nhập). Cách làm đã được giới thiệu trong Bài 11, phần zonal statistics
  • Các bạn hãy tự tư duy, với sự hỗ trợ của công cụ AI để làm bài thực hành này.

Kết quả exercise3: https://tunghanu.github.io/exercise3/

Kết quả exercise3: bản đồ mật độ dân số huyện Chi Lăng, tỉnh Lạng Sơn trên webGIS
Kết quả exercise3: bản đồ mật độ dân số huyện Chi Lăng, tỉnh Lạng Sơn trên webGIS

Final exercise (optional, advanced): triển khai một hệ thống webGIS giám sát bụi mịn PM2.5 cho miền Bắc Việt Nam

  • Dữ liệu giám sát bụi mịn PM2.5 [microgram/m3] được lấy từ Copernicus Atmosphere Monitoring Service (CAMS), đã giới thiệu ở Bài 10.
  • Bài thực hành này là tùy chọn. Các bạn hãy tự tư duy, với kiến thức từ Bài 10 và sự hỗ trợ của công cụ AI để triển khai hệ thống webGIS tương tự như thế này.
Source: PM2.5 layer from Copernicus Atmosphere Monitoring Service (CAMS)
👉 Theo dõi page Thầy Tùng HANU: GIS / Data Analysis https://www.facebook.com/thayTungHANU để trao đổi thông tin và nhận thông báo các bài viết mới về GIS, Sustainability & Climate Change, Data Analysis!
Webgis Leaflet
Previous

Last updated on Jun 22, 2025