---
title: "การสร้างรูปทรงต่าง ๆ บนแผนที่"
description: "ตัวอย่างนี้จะแสดงวิธีการสร้างรูปทรงต่าง ๆ บนแผนที่ Longdo Map เช่น Polyline, Polygon, Circle, Dot, Donut, Rectangle"
canonical_url: "https://map.longdo.com/docs/v3/javascript/geometry/shapes/"
last_updated: "2026-09-24T18:04:48.593Z"
---

# การสร้างรูปทรงต่าง ๆ บนแผนที่

<map-demo preset="v3-shapes-1">



</map-demo>

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

```javascript
var polyline = new longdo.Polyline(
  [
    { lon: 100.5, lat: 13.75 },
    { lon: 100.52, lat: 13.75 },
  ],
  {
    lineWidth: 4,
    lineColor: 'rgba(24, 24, 27, 0.8)',
  },
);
map.Overlays.add(polyline);
```

## วิธีการสร้างเส้นประ (Dashed Line)

```javascript
var line = new longdo.Polyline(
  [
    { lon: 100.5, lat: 13.75 },
    { lon: 100.52, lat: 13.73 },
  ],
  {
    lineWidth: 4,
    lineColor: 'rgba(24, 24, 27, 0.8)',
    lineStyle: longdo.LineStyle.Dashed,
  },
);
map.Overlays.add(line);
```

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

```javascript
var polygon = new longdo.Polygon(
  [
    { lon: 100.5, lat: 13.75 },
    { lon: 100.52, lat: 13.75 },
    { lon: 100.52, lat: 13.73 },
    { lon: 100.5, lat: 13.73 },
  ],
  {
    label: 'ZONE A-1',
    lineWidth: 4,
    lineColor: 'rgba(24, 24, 27, 0.8)',
    fillColor: 'rgba(34, 197, 94, 0.3)',
    clickable: true,
    draggable: true,
  },
);
map.Overlays.add(polygon);
```

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

```javascript
var circle = new longdo.Circle(
  { lon: 100.53, lat: 13.74 },
  0.02, // radius in degrees
  {
    lineWidth: 2,
    lineColor: '#ff0000',
    fillColor: 'rgba(255, 0, 0, 0.2)',
  },
);
map.Overlays.add(circle);
```

## วิธีการสร้างจุด (Dot)

```javascript
var dot = new longdo.Dot(
  { lon: 100.51, lat: 13.74 },
  {
    lineWidth: 20,
    lineColor: 'rgba(239, 68, 68, 0.9)',
    draggable: true,
  },
);
map.Overlays.add(dot);
```

## วิธีการสร้าง Donut (รูปหลายเหลี่ยมแบบมีรู)

คั่นระหว่างวงรอบนอกกับวงรอบใน (รู) ด้วย `null`

```javascript
var donut = new longdo.Polygon(
  [
    { lon: 100.49, lat: 13.76 },
    { lon: 100.53, lat: 13.76 },
    { lon: 100.53, lat: 13.72 },
    { lon: 100.49, lat: 13.72 },
    null, // คั่นวงรอบนอกกับรู
    { lon: 100.505, lat: 13.75 },
    { lon: 100.515, lat: 13.75 },
    { lon: 100.515, lat: 13.73 },
    { lon: 100.505, lat: 13.73 },
  ],
  {
    lineWidth: 2,
    lineColor: 'rgba(147, 51, 234, 0.8)',
    fillColor: 'rgba(147, 51, 234, 0.4)',
    clickable: true,
  },
);
map.Overlays.add(donut);
```

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

```javascript
var rect = new longdo.Rectangle(
  { minLon: 100.5, minLat: 13.73, maxLon: 100.52, maxLat: 13.75 },
  {
    lineWidth: 2,
    lineColor: '#0000ff',
    fillColor: 'rgba(0, 0, 255, 0.2)',
  },
);
map.Overlays.add(rect);
```

### ตัวแปรที่สามารถกำหนดได้

- `label` : ป้ายข้อความสำหรับรูปทรง
- `lineWidth` : ความหนาของเส้น
- `lineColor` : สีของเส้น
- `fillColor` : สีพื้นของรูปทรง
- `clickable` : กำหนดว่ารูปทรงสามารถคลิกได้หรือไม่
- `draggable` : กำหนดว่ารูปทรงสามารถลากได้หรือไม่

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

# คำสั่งสำหรับ Overlays อื่น ๆ

ใน Longdo Map API ยังมีฟังก์ชันที่อำนวยความสะดวกนักพัฒนาในการใช้งาน Geometry เช่น

## การ List รายละเอียดของ Overlay ทั้งหมด บนแผนที่

```javascript
var listOverlays = map.Overlays.list();
console.log(listOverlays);
```

## การแสดงจำนวน Overlay ที่มีอยู่ทั้งหมดบนแผนที่

```javascript
var sizeOverlays = map.Overlays.size();
console.log(sizeOverlays);
```

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

<code-section src="/snippet/v3/javascript/geometry/shapes/script.js">



</code-section>