การแบ่งปันบริการ

เมื่อผู้ใช้ทำการนำเข้าข้อมูลจัดเก็บที่ 3D Store สามารถแบ่งปันข้อมูลเป็น API Services ได้ โดยผลลัพธ์ของ API Services อยู่ในรูปแบบ 3D Tiles มีโครงสร้างการจัดเก็บที่แตกต่างกันตามประเภทไฟล์ เช่น Batched 3D Model (bd3m), Point Cloud (pnts) ซึ่งสามารถนำไปใข้สำหรับการพัฒนาแผนที่เว็บไซต์ 3 มิติได้

โครงสร้างของ 3D Tiles

Root Tile : จุดเริ่มต้นของโครงสร้างข้อมูล
Children Tiles : ไฟล์ย่อยที่มีรายละเอียดเพิ่มขึ้น
Tileset.json : ไฟล์ metadata ที่กำหนดโครงสร้างของไทล์ทั้งหมด

Formats หลัก

.b3dm (Batched 3D Model) :ใช้สำหรับโมเดล 3D
.i3dm (Instanced 3D Model) :ใช้สำหรับโมเดลที่ซ้ำกัน เช่น เสาไฟ
.pnts (Point Cloud) : ใช้สำหรับข้อมูล Point Cloud
.cmpt (Composite Tile) : รวมหลายประเภทข้อมูลไว้ด้วยกัน

การแบ่งปัน API Services

ผู้ใช้งานสามารถทำการคัดลอก API Services เพื่อนำไปใช้สำหรับการพัฒนาแผนที่ 3 มิติิเชิงพื้นที่

ขั้นตอนการรับ 3D Tiles services

คลิกเลือก 3D Asset ที่ต้องการรับ 3D Tiles services
คลิกปุ่ม "แชร์" เพื่อคัดลอก URL ของ API Services

ตัวอย่างนำไปใช้งานในรูปแบบต่างๆ

ตัวอย่างการนำบริการ 3D Tiles ร่วมกับไลบรารีอื่นๆ เช่น CesiumJS และ MaplibreGL โดย API Services ที่เรียกใช้งานต้องระบุ API Key สามารถจัดการ API Key ได้ที่บริการการจัดการ (Management) เพิ่มเติมได้

CesiumJS 3D Tiles

ตัวอย่างการแสดงผล 3D Tiles ด้วย CesiumJS โดยโครงสร้างโค้ดอยู่ในรูปแบบ HTML, Javascrip ซึ่งได้มีโครงสร้างง่ายๆ ดังต่อไปนี้

สร้าง HTML element div ที่มี id="cesiumContainer" เพื่อใช้เป็นพื้นที่แสดงผลแผนที่
สร้างตัวแปรสำหรับจัดเก็บบริการ API 3D Tileset เพื่อใช้สำหรับแสดงผล ซึ่งจำเป็นต้องระบุ collectionID และ api_key ให้ถูกต้อง
เรียกใช้ฟังก์ชัน Cesium.Viewer() เพื่่อกำหนดค่าการแสดงผลเริ่มต้นให้กับข้อมูล 3 มิติเชิงพื้นที่
เพิ่ม 3D Tileset สำหรับเรนเดอร์แสดงผลข้อมูลด้วย viewer.scene.primitives.add(model)
ซูมไปยังโมเดล 3 มิติเมื่อเปิดเว็บไซต์ด้วย (viewer.zoomTo(model))

MapLibre GL 3D Tiles

ตัวอย่างการแสดงผล 3D Tiles ด้วย MapLibre GLโดยโครงสร้างโค้ดอยู่ในรูปแบบ HTML, Javascrip และได้มีการเรียกใช้ไลบรารี Deck.GL ซึ่งได้มีโครงสร้างง่ายๆ ดังต่อไปนี้

สร้าง HTML element div ที่มี id="map" เพื่อใช้เป็นพื้นที่แสดงผลแผนที่
สร้างตัวแปรเพื่อจัดเก็บคลาสสำหรับแสดงผลด้วย 3D Tiles
เรียกใช้ฟังก์ชันการแสดงผลที่ด้วย maplibregl.Map() และกำหนดการแสดงผลของแผนที่เริ่มต้น เช่น จุดกึ่งกลางการแสดงผลแผนที่, ระดับการซูม (Zoom level)
เพิ่มชั้นข้อมูลโดยใช้ฟังก์ชัน Tile3DLayer() และตั้งค่าการแสดงผล Tileset
เรียกใช้ฟังก์ชัน MapboxOverlay() เพื่อแสดงผล 3D Tiles และเรียกใช้ฟังก์ชัน map.addControl(overlay) เพื่อเพิ่มเลเยอร์ 3D Tiles ลงบนแผนที่

info

MapLibre GL JS เป็นไลบรารีสำหรับแสดงแผนที่ 2D/3D แต่ไม่ได้รองรับ 3D Tiles โดยตรง จึงใช้ฟังก์ชันของ Deck.GL ที่รองรับการแสดงผลข้อมูล 3D Tiles ซึ่งมี MapboxOverlay() เป็นตัวกลางที่ช่วยให้ Deck.GL สามารถเรนเดอร์เลเยอร์บนแผนที่ MapLibre

Example Code

Cesium
Maplibre

<!DOCTYPE html>
<html lang="en">

<head>
 <title>CesiumJS 3D Tiles</title>
 <meta charset="utf-8">
 <!-- Include the CesiumJS JavaScript and CSS files -->
 <script src="https://cdn.jsdelivr.net/npm/cesium/Build/Cesium/Cesium.js"></script>
 <link href="https://cdn.jsdelivr.net/npm/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
</head>

<body style="padding: 0; margin: 0;">
 <div id="cesiumContainer" style="width:100vw;height: 100vh;"></div>
 <script type="module">
     const resource_3d = "https://app.vallarismaps.com/core/api/3d/1.0/collections/{collectionId}/3dTiles/tileset.json?api_key={YOUR_API_KEY}";
     const viewer = new Cesium.Viewer('cesiumContainer', {
         animation: false,
         baseLayerPicker: false,
         fullscreenButton: false,
         vrButton: false,
         geocoder: false,
         homeButton: false,
         infoBox: false,
         sceneModePicker: false,
         selectionIndicator: false,
         timeline: false,
         navigationHelpButton: false,
         targetFrameRate: 60,
         requestRenderMode: false,
         useBrowserRecommendedResolution: true,
         baseLayer: false,
         shadows: false,
     });
     // Fly the camera to San Francisco at the given longitude, latitude, and height.
     Cesium.Cesium3DTileset.fromUrl(resource_3d).then((model) => {
         viewer.scene.primitives.add(model);
         viewer.zoomTo(model);
     });
 </script>
 </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <title>MapLibre GL JS 3D Tiles</title>
  <meta charset="utf-8">
  <!-- Include the MapLibre GL JS JavaScript and CSS files -->
  <script src="https://cdn.jsdelivr.net/npm/maplibre-gl/dist/maplibre-gl.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
  <script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"></script>
  <style>
      body { margin: 0; padding: 0; }
      #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>

<body></body>
  <div id="map"></div>
  <script type="module">
      const { Tile3DLayer } = deck;
      const resource3D = "https://app.vallarismaps.com/core/api/3d/1.0/collections/{collectionId}/3dTiles/tileset.json?api_key={YOUR_API_KEY}";
      // Initialize the MapLibre GL JS map
      const map = new maplibregl.Map({
          container: 'map', // HTML container id
          center: [0, 0], // Initial map center in [lon, lat]
          style: {
              version: 8,
              sources: {},
              layers: []
          },
          zoom: 0, // Initial zoom level
          pitch: 0, // Initial pitch
          bearing: 0, // Initial bearing
          antialias: true, // Enable antialiasing
      });
      // Event listener for when the map has finished loading
      map.on('load', () => {
          // Create a new Tile3DLayer
          const tile3DLayer = new Tile3DLayer({
              id: "tile-3d-layer",
              data: resource3D, // URL to the 3D tileset
              coordinateOrigin: [0, 0, 0], // Origin coordinates
              operation: "terrain+draw", // Operation mode
              visible: true, // Layer visibility
              onTilesetLoad: (tile) => {
                  const { zoom, cartographicCenter } = tile;
                  const [longitude, latitude] = cartographicCenter;
                  // Ease the map to the tileset's center and zoom level
                  map.easeTo({
                      center: [longitude, latitude],
                      zoom: zoom + 2.5,
                      pitch: 0,
                  });
              },
          });
          // Create a new MapboxOverlay with the Tile3DLayer
          const overlay = new deck.MapboxOverlay({
              layers: [tile3DLayer],
          });
          // Add the overlay to the map
          map.addControl(overlay);
      });
  </script>
</body>
</html> 

Error Response of Services

Status code	คำอธิบาย	วิธีแก้ไข
400	Body 'fieId' is required	ระบุฟิลด์ รหัสไฟล์ "fileId"
400	Body ‘field’ is invalid... Query parameter ‘field’ is invalid ...	ระบุ รหัสไฟล์ `fileId` ไม่ถูกต้อง การค้นหารหัสไฟล์ `field` ไม่ถูกต้อง
401	Authentication Required Token is invalid or expired API Key is invalid	ไม่มีสิทธิ์เข้าถึงบริการ โปรดระบุ `api_key` หรือ `token`
403	Don't have permission to access 3D...	ไม่มีสิทธิ์ในการเข้าถึง 3D โปรดตรวจสอบสิทธิ์ในการเข้าถึง
404	There is no vallaris collection belongs to this 'collectionId'	ไม่พบรหัสชุดข้อมูล `collectionId` นี้บนระบบ Vallaris โปรดเช็กความถูกต้องของรหัส
404	There is no collection belongs to this 'collectionId'	ไม่พบรหัสชุดข้อมูล
407	Authentication Required	โปรดระบุตัวตนเพื่อเข้าถึงบริการ เช่น `api_key` หรือ `token`

โครงสร้างของ 3D Tiles​

Formats หลัก​

การแบ่งปัน API Services​

ขั้นตอนการรับ 3D Tiles services​

ตัวอย่างนำไปใช้งานในรูปแบบต่างๆ​

CesiumJS 3D Tiles​

MapLibre GL 3D Tiles​

Example Code​

Error Response of Services​