---
title: "การแสดงแผนที่ 3D"
description: "ตัวอย่างนี้จะแสดงวิธีการแสดงแผนที่แบบ 3D บนแผนที่ Longdo Map"
canonical_url: "https://map.longdo.com/docs/v3/javascript/etc/map-3d/"
last_updated: "2026-09-16T20:17:28.944Z"
---

# การแสดงแผนที่ 3D

API ของ Overlay ที่ Longdo Map มีอยู่แล้ว — [Marker](/javascript/marker/create-marker) และ [Shape](/javascript/geometry/shapes) — เหมาะสำหรับการทำเครื่องหมายแบบ 2D บนแผนที่ เช่น หมุด พื้นที่ที่มีป้ายกำกับ หรือเส้นทางที่วาดไว้ แต่ควรเลือกใช้โมเดล 3D จริงเมื่อสิ่งที่ต้องการนำเสนอมีมิติความลึกและจำเป็นต้องมองเห็นเป็นวัตถุจากมุมมองต่างๆ ไม่ใช่ไอคอนแบนๆ เช่น อาคาร ยานพาหนะ เฟอร์นิเจอร์ริมถนน หรือแลนด์มาร์กที่มีรูปทรงจริง Longdo Map v3 แสดงผลผ่าน **MapLibre GL JS** และตัว Renderer ของมัน (`map.Renderer`) สามารถรองรับ Deck.gl Layer เพื่อนำโมเดล GLTF จากภายนอกมาผสมผสานเข้ากับฉาก 3D เดียวกันได้โดยตรง ทำให้ใช้กล้อง แสง และการทดสอบความลึกร่วมกับแผนที่ แทนที่จะลอยอยู่ด้านบนแบบ HTML overlay ทั่วไป

### การตั้งค่าแผนที่ให้แสดงผลแบบ 3D

การกำหนดค่า `pitch` ตอนสร้างแผนที่จะปรับมุมกล้องให้เอียงออกจากมุมมองบนลงล่างแบบปกติ นี่คือสิ่งที่ทำให้โมเดล 3D ที่วางอยู่เหนือพื้นแผนที่มองเห็นได้จริง แทนที่จะเห็นเป็นเพียงขอบบางๆ หรือถูกซ่อนอยู่

```javascript
map = new longdo.Map({
  placeholder: document.getElementById("map"),
  location: { lon: 100.669222, lat: 13.935112 },
  zoom: 17,
  pitch: 45, // Essential for viewing 3D objects properly
});
```

### การกำหนดตำแหน่งโมเดล 3D

แต่ละรายการใน array `data` จะอธิบายตำแหน่งและลักษณะการแสดงผลของโมเดล ได้แก่ พิกัดภูมิศาสตร์ (พร้อมความสูง) ตัวคูณขนาด สีพื้นฐาน ระยะเลื่อนตำแหน่ง และมุมหมุน

```javascript
const scale = 2;

const data = [
  {
    coordinates: [100.669222, 13.935112, 0], // [longitude, latitude, altitude]
    scale: [scale, scale, scale], // Size multiplier [x, y, z axis]
    color: [0, 255, 0, 255], // Base color tint (RGBA)
    translation: [0, 0, 0], // Offset from base coordinates
    orientation: [0, 0, 0], // Rotation [pitch, yaw, roll]
  },
];
```

### การแสดงผลโมเดลด้วย Deck.gl Layer

`map.Renderer` สามารถรองรับ `MapboxLayer` ของ Deck.gl ที่ห่อหุ้ม `ScenegraphLayer` ไว้ภายใน ซึ่งทำหน้าที่โหลดและแสดงผลโมเดล 3D แบบ GLTF จากภายนอก ตามพิกัดที่กำหนดไว้ข้างต้น

> **สิ่งที่ต้องมีก่อน: window.deck มาจากไหน** คุณไม่จำเป็นต้องเพิ่มแท็ก `<script>` แยกสำหรับ Deck.gl เอง สคริปต์ SDK v3 ตัวเดียวกันจากหน้า [เริ่มต้นใช้งาน](/javascript/installation) — `https://api.longdo.com/map3/?key=[YOUR-KEY-API]` — จะโหลดทั้ง `maplibre-gl.js` และ `deck-gl.js` แบบ asynchronous หลังจาก `longdo.Map` พร้อมใช้งานแล้ว ซึ่งเป็นตัวที่กำหนดค่า `window.maplibregl` และ `window.deck` ให้ เนื่องจากการโหลดนี้เกิดขึ้นแบบ asynchronous การเรียกใช้ `window.deck` เร็วเกินไปจะทำให้เกิด error `window.deck is undefined` — อย่าสมมติว่ามันพร้อมใช้งานทันทีที่ `longdo.Map` มีอยู่ ให้ตรวจสอบก่อนสร้าง Layer (เช่น เช็คว่า `window.deck` มีค่าหรือไม่ หรือหน่วงเวลาตรวจสอบสั้นๆ) แทนที่จะเรียกใช้ทันทีที่ map object ถูกสร้างขึ้น

```javascript
const layer = new window.deck.MapboxLayer({
  id: "scenegraph-layer",
  type: window.deck.ScenegraphLayer,
  data,
  scenegraph:
    "https://map.longdo.com/docs/models/34M_17/34M_17.gltf", // URL to the 3D asset
  getPosition: (d) => d.coordinates,
  getScale: (d) => d.scale,
  getTranslation: (d) => d.translation,
  getOrientation: (d) => d.orientation,
  opacity: 1,
  _lighting: "pbr", // Physically Based Rendering for realistic lighting and shadows
  parameters: {
    depthTest: true, // Ensures the 3D object doesn't clip incorrectly through the map floor
  },
});

map.Renderer.addLayer(layer);
```

- `pitch` : มุมเอียงของกล้องที่กำหนดบนแผนที่ จำเป็นต่อการมองเห็นวัตถุ 3D
- `scenegraph` : URL ของโมเดล GLTF ที่ต้องการโหลด
- `getPosition` / `getScale` / `getTranslation` / `getOrientation` : ฟังก์ชันที่แมปแต่ละรายการใน `data` ไปยังตำแหน่งจริงของโมเดล
- `_lighting: "pbr"` : เปิดใช้การจำลองแสงแบบ Physically Based Rendering เพื่อให้เงาและแสงดูสมจริง
- `parameters.depthTest` : ป้องกันไม่ให้โมเดลทะลุผ่านพื้นผิวแผนที่

> **ดูเพิ่มเติม:** [Deck.gl ScenegraphLayer Documentation](https://deck.gl/docs/api-reference/geo-layers/scenegraph-layer)

### การวางโมเดล 3D หลายชิ้นพร้อมกัน

เนื่องจาก `data` เป็นเพียง array ธรรมดา `ScenegraphLayer` เดียวกันจึงสามารถวางโมเดล GLTF ตัวเดิมไว้ที่พิกัดหลายจุดได้ในคำสั่งเดียว โดยแต่ละรายการยังสามารถกำหนดสี ขนาด และมุมหมุนของตัวเองได้ วิธีนี้เหมาะสำหรับวัตถุที่ซ้ำกัน เช่น เสาไฟถนน ต้นไม้ หรือรถที่จอดเรียงกันหลายคัน แทนที่จะกำหนดวัตถุเดียวแบบตายตัว

```javascript
const scale = 1.5;

const buildings = [
  {
    coordinates: [100.669222, 13.935112, 0],
    scale: [scale, scale, scale],
    color: [0, 200, 255, 255], // สีฟ้า
    translation: [0, 0, 0],
    orientation: [0, 0, 0],
  },
  {
    coordinates: [100.6705, 13.9358, 0],
    scale: [scale, scale, scale],
    color: [255, 165, 0, 255], // สีส้ม
    translation: [0, 0, 0],
    orientation: [0, 90, 0], // หมุนให้หันไปคนละทิศทาง
  },
  {
    coordinates: [100.668, 13.9345, 0],
    scale: [scale * 0.75, scale * 0.75, scale * 0.75], // ขนาดย่อลง
    color: [255, 0, 100, 255], // สีชมพูบานเย็น
    translation: [0, 0, 0],
    orientation: [0, 180, 0],
  },
];

const multiLayer = new window.deck.MapboxLayer({
  id: "scenegraph-layer-multi",
  type: window.deck.ScenegraphLayer,
  data: buildings,
  scenegraph:
    "https://map.longdo.com/docs/models/34M_17/34M_17.gltf",
  getPosition: (d) => d.coordinates,
  getScale: (d) => d.scale,
  getTranslation: (d) => d.translation,
  getOrientation: (d) => d.orientation,
  opacity: 1,
  _lighting: "pbr",
  parameters: {
    depthTest: true,
  },
});

map.Renderer.addLayer(multiLayer);
```

<code-section src="/snippet/v3/javascript/etc/map-3d/script.js" title="">



</code-section>