สร้าง WebGIS ด้วย Leaflet และ MapLibre: คู่มือสำหรับวิศวกรสำรวจ

2026-04-16T22:02:28+07:00|ทีม WAIPIA|อ่าน 8 นาที

ในยุคที่ข้อมูลสำรวจทุกชุดถูกเก็บในรูปแบบดิจิทัล คำถามที่วิศวกรและช่างสำรวจหลายคนเริ่มถามคือ "จะนำข้อมูลพิกัดและ GeoJSON เหล่านี้ขึ้นแสดงบนเว็บให้ลูกค้าดูได้อย่างไร?" คำตอบอยู่ที่ WebGIS — และเครื่องมือที่ทรงพลังที่สุดในขณะนี้คือ Leaflet และ MapLibre GL JS ซึ่งทั้งสองตัวเป็น Open Source ใช้ฟรี และรองรับข้อมูลสำรวจได้อย่างสมบูรณ์

บทความนี้จะพาคุณตั้งแต่ต้นจนจบ ตั้งแต่ความเข้าใจพื้นฐานของ WebGIS ไปจนถึงการเขียนโค้ดแสดงข้อมูลจากงานสำรวจจริงบนแผนที่ออนไลน์

WebGIS คืออะไร และทำไมวิศวกรสำรวจถึงต้องรู้จัก

ภาพแสดงประโยชน์ของ WebGIS และตารางเปรียบเทียบ Desktop GIS vs WebGIS สำหรับวิศวกรสำรวจ

WebGIS (Web-based Geographic Information System) คือระบบแผนที่และข้อมูลเชิงพื้นที่ที่ทำงานผ่านเว็บเบราว์เซอร์ โดยไม่ต้องติดตั้งโปรแกรมพิเศษ ผู้ใช้เพียงเปิดเว็บไซต์ก็สามารถดูแผนที่, ค้นหาข้อมูล, และวิเคราะห์ผลได้ทันที

สำหรับวิศวกรสำรวจ WebGIS มีประโยชน์ในหลายด้าน:

รายงานผลให้ลูกค้า — นำเสนอตำแหน่งหมุดสำรวจ, เส้นทาง, หรือขอบเขตโครงการบนแผนที่แบบ Interactive แทนการส่งไฟล์ PDF
ติดตามงานภาคสนาม — แสดงตำแหน่ง GPS Real-time ของทีมสำรวจ
วิเคราะห์ข้อมูล — Overlay ข้อมูล Survey หลายชั้นบนแผนที่เดียวกัน
แชร์ข้อมูล GIS — แสดงไฟล์ Shapefile, GeoJSON, หรือ KML บนเว็บโดยไม่ต้องใช้ ArcGIS Online

ความแตกต่างระหว่าง WebGIS กับ Desktop GIS

รายการ	Desktop GIS (QGIS/ArcGIS)	WebGIS (Leaflet/MapLibre)
การติดตั้ง	ต้องติดตั้งบนเครื่อง	ไม่ต้องติดตั้ง เปิดเบราว์เซอร์ได้เลย
การแชร์	ส่งไฟล์ให้กัน	แชร์ URL ลิงก์
ประสิทธิภาพ	สูง รองรับข้อมูลขนาดใหญ่	ขึ้นกับการออกแบบ
ค่าใช้จ่าย	มีทั้งฟรีและเสียเงิน	ส่วนใหญ่ฟรี
การพัฒนา	ใช้งานได้ทันที	ต้องเขียนโค้ด HTML/JS

Leaflet vs MapLibre GL JS: เลือกใช้อะไรดีสำหรับงานสำรวจ?

ตารางเปรียบเทียบ Leaflet vs MapLibre GL JS ครบทุกคุณสมบัติสำหรับงานสำรวจ

ก่อนเริ่มเขียนโค้ด ต้องตัดสินใจก่อนว่าจะใช้ไลบรารีไหน เพราะทั้งสองมีจุดแข็งต่างกัน

Leaflet — เรียบง่าย เริ่มต้นได้เร็ว

Leaflet เป็นไลบรารีแผนที่ JavaScript ที่ได้รับความนิยมสูงสุดในโลก ด้วยขนาดเพียง ~42KB มันรองรับ Raster Tiles (PNG/JPEG) เป็นหลัก เหมาะสำหรับ:

งานที่ต้องการเริ่มต้นเร็ว ไม่ซับซ้อน
แสดง Markers, Lines, Polygons บน Basemap
นำเข้าข้อมูล GeoJSON จากงานสำรวจ
ผู้เริ่มต้นที่ยังไม่คุ้นกับ JavaScript มากนัก

MapLibre GL JS — ทรงพลัง รองรับ 3D

MapLibre GL JS คือ Fork ของ Mapbox GL JS ที่เป็น Open Source เต็มตัว ใช้เทคโนโลยี WebGL ในการ Render ทำให้:

แสดงแผนที่ 3D ได้ (เช่น แสดงค่าความสูง DEM)
รองรับ Vector Tiles ประสิทธิภาพสูง
Zoom ราบรื่น หมุนมุมมองได้
เหมาะกับโปรเจกต์ขนาดใหญ่หรือต้องการแสดงผล 3D

ตารางเปรียบเทียบ

คุณสมบัติ	Leaflet	MapLibre GL JS
ขนาดไลบรารี	~42KB	~900KB
การเรียนรู้	ง่าย	ปานกลาง
รองรับ 3D	ไม่รองรับ (native)	รองรับ
Vector Tiles	ผ่าน Plugin	รองรับ native
Raster Tiles	รองรับ native	รองรับ
GeoJSON	รองรับ native	รองรับ native
Community	ใหญ่มาก	กำลังเติบโต

คำแนะนำ: ถ้าเพิ่งเริ่มต้นหรือต้องการแสดงจุด/เส้น/พื้นที่บน Basemap — เลือก Leaflet ถ้าต้องการแผนที่ 3D, Performance สูง หรือ Vector Tiles — เลือก MapLibre GL JS

เริ่มต้นสร้างแผนที่ด้วย Leaflet

ขั้นตอน 5 ขั้นในการสร้างแผนที่ด้วย Leaflet และตัวเลือก Basemap สำหรับงานสำรวจ

มาเริ่มต้นกันด้วยโค้ดง่ายๆ ที่สามารถเปิดในเบราว์เซอร์ได้ทันที

ขั้นตอนที่ 1: สร้างไฟล์ HTML พื้นฐาน

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebGIS สำรวจ — WAIPIA</title>
  
  <!-- โหลด Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  
  <style>
    body { margin: 0; }
    #map { height: 100vh; width: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>

  <!-- โหลด Leaflet JS -->
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script>
    // สร้างแผนที่ ตั้ง Center ที่กรุงเทพฯ, Zoom 13
    const map = L.map('map').setView([13.7563, 100.5018], 13);

    // เพิ่ม Basemap จาก OpenStreetMap
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors',
      maxZoom: 19
    }).addTo(map);
  </script>
</body>
</html>

บันทึกไฟล์นี้เป็น index.html แล้วเปิดในเบราว์เซอร์ — คุณจะเห็นแผนที่ OpenStreetMap ทันที โดยไม่ต้องติดตั้งอะไรเพิ่ม

ขั้นตอนที่ 2: เลือก Basemap ที่เหมาะสม

สำหรับงานสำรวจ บางครั้ง OpenStreetMap อาจไม่เพียงพอ ลองใช้ภาพถ่ายดาวเทียมแทน:

// Basemap ภาพถ่ายดาวเทียม (Esri)
const satellite = L.tileLayer(
  'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
  { attribution: '© Esri', maxZoom: 19 }
).addTo(map);

// Basemap Topographic
const topo = L.tileLayer(
  'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
  { attribution: '© OpenTopoMap', maxZoom: 17 }
);

// สร้าง Layer Control ให้สลับ Basemap ได้
const baseMaps = {
  "ภาพถ่ายดาวเทียม": satellite,
  "Topographic": topo
};

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

นำข้อมูลสำรวจขึ้นแผนที่ — Markers, GeoJSON และ Popup

ไดอะแกรมแสดง 3 ประเภทข้อมูลสำรวจบน Leaflet: Markers หมุดสำรวจ, GeoJSON ขอบเขต, Polyline เส้นทาง Traverse

ส่วนที่วิศวกรสำรวจจะใช้บ่อยที่สุดคือการนำข้อมูลพิกัดจากงานจริงขึ้นแสดงบนแผนที่

แสดงหมุดสำรวจ (Survey Control Points)

// ข้อมูลหมุดสำรวจ (ตัวอย่าง)
const controlPoints = [
  { id: "BM-001", lat: 13.7563, lng: 100.5018, elev: 12.34, desc: "หมุดอ้างอิงหลัก" },
  { id: "BM-002", lat: 13.7580, lng: 100.5050, elev: 13.12, desc: "หมุดระดับ A" },
  { id: "BM-003", lat: 13.7540, lng: 100.4990, elev: 11.87, desc: "หมุดระดับ B" }
];

// สร้าง Marker พร้อม Popup แสดงข้อมูล
controlPoints.forEach(point => {
  L.marker([point.lat, point.lng])
    .bindPopup(`
      <b>${point.id}</b><br>
      ${point.desc}<br>
      ละติจูด: ${point.lat}<br>
      ลองจิจูด: ${point.lng}<br>
      ระดับ: ${point.elev} ม. (MSL)
    `)
    .addTo(map);
});

นำเข้าข้อมูล GeoJSON จากงานสำรวจ

ไฟล์ GeoJSON เป็นรูปแบบที่ QGIS และซอฟต์แวร์สำรวจส่วนใหญ่ Export ออกมาได้ Leaflet รองรับโดยตรง:

// โหลด GeoJSON จากไฟล์ (ต้องรันผ่าน Web Server)
fetch('survey-boundary.geojson')
  .then(response => response.json())
  .then(data => {
    L.geoJSON(data, {
      style: {
        color: '#ff7800',      // สีเส้นขอบ
        weight: 3,             // ความหนาของเส้น
        opacity: 1,
        fillColor: '#ffb347',  // สีพื้น
        fillOpacity: 0.3
      },
      onEachFeature: (feature, layer) => {
        if (feature.properties) {
          layer.bindPopup(`
            <b>${feature.properties.name || 'ขอบเขตโครงการ'}</b><br>
            พื้นที่: ${feature.properties.area_rai || '-'} ไร่
          `);
        }
      }
    }).addTo(map);
  });

แสดงเส้นทางสำรวจ (Survey Traverse)

// จุดพิกัดเส้นทาง Traverse (ลำดับ)
const traversePoints = [
  [13.7563, 100.5018],
  [13.7570, 100.5030],
  [13.7555, 100.5045],
  [13.7540, 100.5035],
  [13.7545, 100.5020]
];

// วาดเส้น Traverse
const traverseLine = L.polyline(traversePoints, {
  color: '#0066cc',
  weight: 3,
  dashArray: '8, 4'  // เส้นประ
}).addTo(map);

// Fit แผนที่ให้ครอบคลุมเส้นทางทั้งหมด
map.fitBounds(traverseLine.getBounds());

MapLibre GL JS: แผนที่ 3D และ Vector Tiles สำหรับงานขั้นสูง

ภาพแสดงฟีเจอร์ MapLibre GL JS: Pitch/Bearing 3D, Vector Tiles, addSource/addLayer พร้อมโค้ดตัวอย่าง

เมื่อโปรเจกต์ต้องการแสดง ข้อมูลความสูง (DEM/DSM) หรือแผนที่แบบ 3D MapLibre GL JS คือตัวเลือกที่ดีที่สุด

ติดตั้งและสร้างแผนที่ MapLibre พื้นฐาน

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>WebGIS 3D — WAIPIA</title>
  <link href="https://unpkg.com/maplibre-gl@4.0.0/dist/maplibre-gl.css" rel="stylesheet" />
  <style>
    body { margin: 0; }
    #map { height: 100vh; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/maplibre-gl@4.0.0/dist/maplibre-gl.js"></script>
  <script>
    const map = new maplibregl.Map({
      container: 'map',
      style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
      center: [100.5018, 13.7563],  // [lng, lat] — สังเกตลำดับกลับจาก Leaflet
      zoom: 12,
      pitch: 45,    // เอียงมุมมอง 45 องศา
      bearing: -15  // หมุนแผนที่ -15 องศา
    });

    // เพิ่ม Navigation Control
    map.addControl(new maplibregl.NavigationControl());
  </script>
</body>
</html>

เพิ่ม Marker และ Popup ใน MapLibre

// เพิ่ม Marker
new maplibregl.Marker({ color: '#ff7800' })
  .setLngLat([100.5018, 13.7563])  // [lng, lat]
  .setPopup(
    new maplibregl.Popup({ offset: 25 })
      .setHTML('<b>BM-001</b><br>ระดับ: 12.34 ม.')
  )
  .addTo(map);

แสดงข้อมูล GeoJSON ใน MapLibre

map.on('load', () => {
  // เพิ่ม Source ข้อมูล
  map.addSource('survey-area', {
    type: 'geojson',
    data: {
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [[
          [100.4990, 13.7540],
          [100.5050, 13.7540],
          [100.5050, 13.7590],
          [100.4990, 13.7590],
          [100.4990, 13.7540]
        ]]
      },
      properties: { name: 'ขอบเขตโครงการ A', area_rai: 45.6 }
    }
  });

  // เพิ่ม Layer แสดงพื้นที่
  map.addLayer({
    id: 'survey-fill',
    type: 'fill',
    source: 'survey-area',
    paint: {
      'fill-color': '#ff7800',
      'fill-opacity': 0.3
    }
  });

  // เพิ่ม Layer เส้นขอบ
  map.addLayer({
    id: 'survey-outline',
    type: 'line',
    source: 'survey-area',
    paint: {
      'line-color': '#ff7800',
      'line-width': 3
    }
  });
});

ตัวอย่างการแสดงข้อมูล GNSS RTK บน WebGIS

Pipeline GNSS RTK สู่ WebGIS: CSV จาก Receiver → แปลงพิกัด WGS84 → GeoJSON → แสดงบน Leaflet พร้อม Popup

สถานการณ์จริง: นำไฟล์ CSV ที่ Export จาก GNSS Receiver มาแสดงบนแผนที่

แปลง CSV ของงาน GNSS เป็น GeoJSON

สมมุติว่าคุณมีไฟล์ CSV จากงาน GNSS RTK ดังนี้:

point_id,northing,easting,height,description
P001,1521234.567,669876.543,12.345,หมุด Control หลัก
P002,1521350.123,669920.456,13.210,มุมอาคาร A
P003,1521280.789,670015.321,12.890,มุมอาคาร B

ต้องแปลงจาก UTM Zone 47N (Indian 1975) เป็น WGS84 ก่อน จากนั้นสร้าง GeoJSON:

// ข้อมูลที่แปลงเป็น WGS84 แล้ว
const gnssPoints = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [100.5018, 13.7563] },
      properties: { id: "P001", height: 12.345, desc: "หมุด Control หลัก" }
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [100.5030, 13.7575] },
      properties: { id: "P002", height: 13.210, desc: "มุมอาคาร A" }
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [100.5045, 13.7567] },
      properties: { id: "P003", height: 12.890, desc: "มุมอาคาร B" }
    }
  ]
};

// แสดงบน Leaflet
const gnssLayer = L.geoJSON(gnssPoints, {
  pointToLayer: (feature, latlng) => {
    // ใช้ Circle Marker แทน Icon มาตรฐาน
    return L.circleMarker(latlng, {
      radius: 8,
      fillColor: '#e74c3c',
      color: '#fff',
      weight: 2,
      opacity: 1,
      fillOpacity: 0.9
    });
  },
  onEachFeature: (feature, layer) => {
    const p = feature.properties;
    layer.bindPopup(`
      <div style="min-width:150px">
        <b style="font-size:14px">${p.id}</b><br>
        <hr style="margin:4px 0">
        <b>คำอธิบาย:</b> ${p.desc}<br>
        <b>ความสูง:</b> ${p.height} ม. (Ellipsoidal)<br>
        <b>พิกัด:</b> ${feature.geometry.coordinates[1].toFixed(6)}N, 
                      ${feature.geometry.coordinates[0].toFixed(6)}E
      </div>
    `);
  }
}).addTo(map);

// ซูมไปยังข้อมูล
map.fitBounds(gnssLayer.getBounds().pad(0.1));

เพิ่ม Measurement Tool (วัดระยะและพื้นที่)

สำหรับงานสำรวจ การวัดระยะบนแผนที่เป็นสิ่งที่ขาดไม่ได้:

// ติดตั้ง Plugin: Leaflet.Measure
// <script src="https://unpkg.com/leaflet-measure@3.1.0/dist/leaflet-measure.js"></script>

L.control.measure({
  primaryLengthUnit: 'meters',
  secondaryLengthUnit: 'kilometers',
  primaryAreaUnit: 'sqmeters',
  secondaryAreaUnit: 'hectares',
  localization: 'en'
}).addTo(map);

Deploy WebGIS ขึ้น Server

เปรียบเทียบ 3 วิธี Deploy WebGIS: GitHub Pages, Netlify Drop, VPS+Nginx พร้อม URL และโค้ดตัวอย่าง

เมื่อพัฒนาเสร็จแล้ว การ Deploy ทำได้หลายวิธี:

วิธีที่ 1: GitHub Pages (ฟรี เหมาะกับโปรเจกต์ขนาดเล็ก)

# สร้าง Repository บน GitHub
git init
git add .
git commit -m "WebGIS Survey Map"
git remote add origin https://github.com/username/survey-map.git
git push -u origin main

# เปิด GitHub Pages ใน Settings → Pages → Branch: main

แผนที่จะออนไลน์ที่ https://username.github.io/survey-map/

วิธีที่ 2: Netlify Drop (เร็วที่สุด ใช้เวลา 1 นาที)

เข้าไปที่ netlify.com/drop แล้วลากโฟลเดอร์ทิ้งลงไป ระบบจะ Deploy อัตโนมัติ ได้ URL พร้อมใช้ทันที

วิธีที่ 3: รันบน VPS หรือ Cloud Server

# ติดตั้ง Nginx
sudo apt install nginx

# Copy ไฟล์เว็บไปที่
cp -r ./webgis/* /var/www/html/

# Start Nginx
sudo systemctl start nginx

เคล็ดลับสำหรับวิศวกรสำรวจ

3 เคล็ดลับสำคัญ: Coordinate System WGS84, Simplify GeoJSON, HTTPS สำหรับ Geolocation

ก่อนจบ ขอแนะนำสิ่งที่มักถูกมองข้ามในการทำ WebGIS สำหรับงานสำรวจ:

เรื่องระบบพิกัด (Coordinate System) — Leaflet และ MapLibre ใช้ WGS84 (EPSG:4326) เป็น Standard ถ้าข้อมูลของคุณอยู่ในระบบ UTM Zone 47N / Indian 1975 ต้องแปลงก่อนเสมอ สามารถใช้ QGIS หรือ proj4js library ในการแปลง

ขนาดไฟล์ GeoJSON — ถ้าข้อมูลมีจำนวนจุดมาก (เช่น Point Cloud หรือ Contour เส้นชั้นความสูงละเอียด) ให้ Simplify Geometry ก่อน ใช้คำสั่ง mapshaper หรือ QGIS Simplify เพื่อลดขนาดไฟล์

HTTPS บน Production — ฟีเจอร์ Geolocation ของเบราว์เซอร์ต้องการ HTTPS จึงจะทำงาน ถ้าต้องการแสดงตำแหน่ง GPS ของผู้ใช้ ต้องใช้ SSL Certificate

สรุป

WebGIS ด้วย Leaflet และ MapLibre GL JS เปิดโอกาสให้วิศวกรสำรวจสามารถนำข้อมูลที่เก็บมาจากภาคสนามมาแสดงผลบนเว็บได้อย่างมืออาชีพโดยไม่ต้องพึ่งพา GIS Software ราคาแพง ไม่ว่าจะเป็นหมุดสำรวจ เส้นทาง Traverse ขอบเขตโครงการ หรือข้อมูล GNSS RTK ก็สามารถนำขึ้นแผนที่ออนไลน์ได้ทั้งหมด

สำหรับผู้เริ่มต้น ให้เริ่มที่ Leaflet ก่อนเพราะเรียนรู้ง่ายและโค้ดน้อยกว่า เมื่อชำนาญแล้วค่อยขยับไป MapLibre GL JS เพื่อรองรับงานที่ต้องการ 3D และ Performance สูงขึ้น

หากต้องการพัฒนาระบบ WebGIS สำหรับองค์กรหรือโครงการสำรวจของคุณ ทีม WAIPIA Development พร้อมให้คำปรึกษาและรับพัฒนาระบบครบวงจร

บทความโดย ทีม WAIPIA Development — บริการสำรวจและแผนที่ครบวงจร โทรศัพท์: 095-7243421 | Line OA: @info_wd | เว็บไซต์: waipia.com

WebGISLeafletMapLibreGISแผนที่ดิจิทัลวิศวกรรมสำรวจ

← กลับไปบทความทั้งหมด