---
title: "สร้างเลเยอร์แผนที่แบบกำหนดเอง (Custom Map Layers) ด้วย Longdo Map API"
description: "คู่มือการสร้างเลเยอร์แผนที่แบบกำหนดเอง (WMS, TMS, WMTS) บน Longdo Map API"
canonical_url: "https://map.longdo.com/docs/v2/javascript/maplayers/custommaplayer/"
last_updated: "2026-09-18T06:16:12.061Z"
---

# การใช้ Layer แบบ WMS TMS WMTS และแบบกำหนดเอง ร่วมกับ Longdo Map

ตัวอย่างนี้จะแสดงวิธีการนำชั้นข้อมูล (Layers) ในรูปแบบต่างๆ ที่ใช้กันอย่างแพร่หลายในงานด้าน GIS เช่น WMS (Web Map Service), TMS (Tile Map Service), WMTS (Web Map Tile Service) นำมาแสดงผลร่วมกับ Longdo Map API

<map-demo preset="custommaplayer-1">



</map-demo>

[Live example - Layer Map Creation](http://mapdemo.longdo.com/example/layermap-creation.html)

## วิธีการสร้าง layers Objects ในรูปแบบต่างๆ

1. การสร้าง Layer แบบ WMS (Web Map Service)

```js
var layer1 = new longdo.Layer('bluemarble_terrain', {
  type: longdo.LayerType.WMS,
  url: 'https://ms.longdo.com/mapproxy/service',
  zoomRange: { min: 1, max: 9 },
  refresh: 180,
  opacity: 0.5,
  weight: 10
});

map.Layers.add(layer1); // add layer
```

1. การสร้าง Layer แบบ TMS (Tile Map Service)

```js
var layer2 = new longdo.Layer('', {
  type: longdo.LayerType.TMS,
  url: 'https://ms.longdo.com/mapproxy/tms/1.0.0/bluemarble_terrain/EPSG3857',
  bound: {
    minLon: 100.122195, minLat: 14.249463,
    maxLon: 100.533496, maxLat: 14.480279
  }
});

map.Layers.add(layer2); // add layer
```

> **NOTE:** หากใช้ Layer แบบ TMS ที่ให้บริการโดย GeoServer ต้องใส่ option zoomOffset: 0 เพื่อให้ API ดึง tile จาก server โดยใช้ zoom ระดับเดียวกันกับ longdo Map

1. การสร้าง Layer แบบ WMTS (Web Map Tile Service)

```js
var layer3 = new longdo.Layer('bluemarble_terrain', {
  type: longdo.LayerType.WMTS_REST,
  url: 'https://ms.longdo.com/mapproxy/wmts',
  srs: 'GLOBAL_WEBMERCATOR',
}); 

map.Layers.add(layer3); // add layer
```

1. การสร้าง Layer แบบกำหนดเอง

```js
var layer4 = new longdo.Layer('test', {
  type: longdo.LayerType.Custom,
  url: function(projection, tile, zoom, hd) {
    return 'https://ms.longdo.com/mmmap/tile.php?key=demokeyfortestingonly&proj=' + projection.longdoName + '&zoom=' + zoom + '&x=' + tile.u + '&y=' + tile.v;
  },
  zoomRange: { min: 9, max: 16 },
  refresh: 180
});

map.Layers.add(layer4); // add layer
```

ตัวแปรต่างๆ ที่ใช้ในการสร้างชั้นข้อมูล (หากไม่ระบุ Parameter ใดๆ จะใช้ค่า Default ของ Parameters นั้นแทน)

- `name` : ชื่อของ Layer
- `type` : การกำหนดชนิดของ Layer
- `url` : ที่อยู่ของ Layer หรือฟังก์ชันที่รับตัวแปรดังนี้

  - `projection` : ชนิด projection ของ Layer เช่น epsg3857
  - `tile` : ตำแหน่งรูปแต่ละชิ้นในแผนที่
  - `zoom` : ระยะการซูมของแผนที่
  - `hd` : ต้องการแผนที่ความละเอียดสูงหรือไม่ (0 หรือ 1)
- `zoomRange` : ขอบเขตการซูม
- `refresh` : ระยะเวลาที่จะดึงข้อมูลใหม่อัตโนมัติ หน่วยเป็นมิลลิวินาที
- `opacity` : ค่าที่กำหนดความทึบหรือโปร่งใสของ Layer มีค่าในช่วง 0-1
- `weight` : ลำดับการซ้อนของ Layer ค่ายิ่งมากจะยิ่งอยู่ด้านล่าง
- `bound` : พื้นที่ที่ต้องการแสดง Layer
- `format` : ประเภทของรูป

  - WMS ใช้ 'image/jpeg'
  - TMS และ WMTS_REST ใช้ 'jpeg'

ดูเพิ่มเติม: [Documentation](http://api.longdo.com/map/doc/ref.php#LayerOptions)

## วิธีการลบ Layer ที่สร้างขึ้น

    การลบ Layer ตามที่ต้องการ (Remove Layer)

```js
map.Layers.remove(layer);
```

    การลบ Layers ทั้งหมด (Clear Layers)

```js
map.Layers.clear();
```

<code-section src="/snippet/v2/map-layers/03.js">



</code-section>