---
title: "การสร้าง Heatmap บนแผนที่"
description: "ตัวอย่างนี้จะแสดงวิธีการสร้าง Heatmap บนแผนที่ Longdo Map โดยใช้ข้อมูล GeoJSON"
canonical_url: "https://map.longdo.com/docs/v3/javascript/marker/heatmap-marker/"
last_updated: "2026-09-16T20:17:28.965Z"
---

# การสร้าง Heatmap บนแผนที่

Longdo Map v3 รองรับ Heatmap Layer ในรูปแบบเดียวกับ MapLibre ซึ่งใช้แสดงความหนาแน่นของข้อมูลจุด เช่น ตำแหน่งแผ่นดินไหว ได้โดยตรงผ่าน `map.Layers.insert()` โดยไม่ต้องพึ่งไลบรารี Heatmap แยกต่างหาก

Heatmap เหมาะกับการแสดง *บริเวณที่ข้อมูลกระจุกตัวหนาแน่น* มากกว่าการเน้นจุดแต่ละจุด หากผู้ใช้งานต้องการระบุและโต้ตอบกับตำแหน่งแต่ละแห่งเมื่อซูมเข้า ให้ดู [Cluster Markers](/javascript/marker/cluster-marker) แทน — ซึ่งจะจัดกลุ่มจุดที่อยู่ใกล้กันเป็นคลัสเตอร์ที่คลิกได้และขยายออกเป็นหมุดย่อยเมื่อซูมเข้า แทนที่จะรวมทุกจุดเป็นพื้นผิวความหนาแน่นต่อเนื่อง

### วิธีการสร้าง Heatmap

เพิ่มแหล่งข้อมูล GeoJSON และ `layer` ชนิด `heatmap` จากนั้นกำหนดความเข้ม สี และรัศมีของ Heatmap ด้วย expression ที่คำนวณจากข้อมูลจริง แทนการวาดแต่ละจุดเอง

```javascript
var heatmapLayer = new longdo.Layer({
  sources: {
    earthquakes: {
      type: 'geojson',
      data: 'https://map.longdo.com/docs/earthquakes.geojson'
    }
  },
  layers: [
    {
      id: 'earthquakes-heat',
      type: 'heatmap',
      source: 'earthquakes',
      maxzoom: 9,
      paint: {
        'heatmap-weight': ['interpolate', ['linear'], ['get', 'mag'], 0, 0, 6, 1],
        'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, 9, 3],
        'heatmap-color': [
          'interpolate', ['linear'], ['heatmap-density'],
          0, 'rgba(33,102,172,0)',
          0.2, 'rgb(103,169,207)',
          0.4, 'rgb(209,229,240)',
          0.6, 'rgb(253,219,199)',
          0.8, 'rgb(239,138,98)',
          1, 'rgb(178,24,43)'
        ],
        'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 2, 9, 20],
        'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 7, 1, 9, 0]
      }
    }
  ]
});

map.Layers.insert(1, heatmapLayer);
```

### ตัวแปรของ Heatmap Layer

- `heatmap-weight`: ค่าน้ำหนักของแต่ละจุด — จะเป็น expression แบบต่อเนื่องที่คำนวณจากค่าตัวเลข (เช่น `mag` ด้านบน) หรือ expression แบบหมวดหมู่อย่าง `match` ก็ได้ (ดูด้านล่าง)
- `heatmap-intensity`: ความเข้มของ Heatmap ตามระดับ Zoom
- `heatmap-color`: สีของ Heatmap ตามความหนาแน่น (density)
- `heatmap-radius`: รัศมีของ Heatmap ตามระดับ Zoom
- `heatmap-opacity`: ความโปร่งใสของ Heatmap

### กำหนดน้ำหนักด้วยหมวดหมู่แทนค่าตัวเลข

ตัวอย่างด้านบนคำนวณ `heatmap-weight` จากค่าตัวเลขต่อเนื่อง (`mag`) แต่ข้อมูลบางชุดไม่มีสเกลตัวเลขที่เหมาะกับการ interpolate เช่น รายงานเหตุการณ์ที่ติดแท็กเป็น `'critical'` / `'moderate'` / `'minor'` ซึ่งไม่มีค่า "กึ่งกลาง" ที่มีความหมาย สำหรับข้อมูลลักษณะนี้ ให้กำหนด `heatmap-weight` ด้วย expression แบบ `match` แทน `interpolate`:

```javascript
'heatmap-weight': [
  'match', ['get', 'category'],
  'critical', 1,
  'moderate', 0.6,
  'minor', 0.3,
  0.1 // ค่าน้ำหนักสำรองสำหรับหมวดหมู่ที่ไม่ได้ระบุไว้
]
```

`match` จะตรวจสอบค่าคุณสมบัติ `category` ของแต่ละจุดข้อมูล แล้วคืนค่าน้ำหนักที่ตรงกับค่านั้น — โดยใช้ `0.1` เป็นค่าสำรองสำหรับค่าที่ไม่รู้จัก — แทนการคำนวณแบบ interpolate ตามช่วงตัวเลข

> **หมายเหตุ:** `heatmap-color` ไม่สามารถกำหนดจากคุณสมบัติของข้อมูลโดยตรงได้ — มันรับได้เฉพาะ expression ที่คำนวณจาก `['heatmap-density']` ซึ่งเป็นค่าที่ได้หลังจากผ่านการคำนวณ weight และ intensity แล้ว ไม่ใช่ค่าคุณสมบัติต้นทาง หากต้องการให้หมวดหมู่ (หรือคุณสมบัติอื่นใด) มีผลต่อการแสดงผล ต้องกำหนดผ่าน `heatmap-weight` ดังตัวอย่างด้านบนแทน

### เปลี่ยนเป็นหมุดวงกลมเมื่อซูมเข้า

เมื่อซูมเข้าในระดับสูง ให้เพิ่ม `circle` layer อีกชั้นบนแหล่งข้อมูลเดียวกัน เพื่อแสดงแผ่นดินไหวแต่ละครั้งเป็นจุดวงกลมแยกกัน โดยกำหนดขนาดและสีตามค่าความรุนแรง (magnitude) เมื่อผู้ใช้ซูมเข้าใกล้พอที่จะพิจารณาข้อมูลรายจุด

```javascript
{
  id: 'earthquakes-point',
  type: 'circle',
  source: 'earthquakes',
  minzoom: 7,
  paint: {
    'circle-radius': [
      'interpolate', ['linear'], ['zoom'],
      7, ['interpolate', ['linear'], ['get', 'mag'], 1, 1, 6, 4],
      16, ['interpolate', ['linear'], ['get', 'mag'], 1, 5, 6, 50]
    ],
    'circle-color': [
      'interpolate', ['linear'], ['get', 'mag'],
      1, 'rgba(33,102,172,0)',
      2, 'rgb(103,169,207)',
      3, 'rgb(209,229,240)',
      4, 'rgb(253,219,199)',
      5, 'rgb(239,138,98)',
      6, 'rgb(178,24,43)'
    ],
    'circle-stroke-color': 'white',
    'circle-stroke-width': 1,
    'circle-opacity': ['interpolate', ['linear'], ['zoom'], 7, 0, 8, 1]
  }
}
```

### การลบ Heatmap

ส่ง reference ของ layer เดิมกลับไปให้ `map.Layers.remove()`:

```javascript
map.Layers.remove(heatmapLayer);
```

> **หมายเหตุ:** `map.Layers.clear()` จะลบ layer ทั้งหมดบนแผนที่ ไม่ใช่แค่ Heatmap เท่านั้น — ควรใช้ `remove()` พร้อมระบุ reference เจาะจงเมื่อยังต้องการให้ layer อื่น (แผนที่พื้นฐาน, จราจร, layer กำหนดเองอื่น ๆ) คงอยู่ต่อไป

> **ดูเพิ่มเติม:** [Layers Documentation](https://api.longdo.com/map3/doc.html#Layers)

<code-section src="/snippet/v3/javascript/marker/heatmap-marker/script.js" title="">



</code-section>