Tiles
Tiles Map คือ วิธีการแสดงแผนที่บนเว็บไซต์หรือแอปพลิเคชัน โดยแผนที่จะถูกแบ่งออกเป็นภาพขนาดเล็ก ๆ แต่ละภาพจะแสดงส่วนย่อยของแผนที่ และส่วนย่อยต่างๆ นั้นจะถูกนำมารวมต่อเป็นแผนที่ เมื่อผู้ใช้เรียกดู
หลักการทำงานของ Tiles
- แบ่งพื้นที่แผนที่ : พื้นที่ของแผนที่ทั้งหมดจะถูกแบ่งออกเป็นภาพขนาดเล็กๆ เรียกว่า ไทล์ แต่ละไทล์จะมีขนาดมาตรฐาน เช่น 256 x 256 พิกเซล
- จัดเก็บไทล์ : ไทล์ทั้งหมดจะถูกจัดเก็บไว้บนเซิร์ฟเวอร์
- แสดงผลไทล์ : เมื่อผู้ใช้ดูแผนที่ เว็บเบราว์เซอร์จะร้องขอไทล์ที่จำเป็นจากเซิร์ฟเวอร์ ไทล์เหล่านี้จะถูกนำมารวมต่อกันบนหน้าจอเพื่อแสดงภาพแผนที่ที่สมบูรณ์
- ซูมและเลื่อน : เมื่อผู้ใช้ซูมเข้าหรือเลื่อนแผนที่ เว็บเบราว์เซอร์จะร้องขอไทล์ที่มีขนาดใหญ่ขึ้นหรือเล็กลงตามลำดับ
เวกเตอร์ไทล์ (Vector Tiles)
ความหมาย ข้อดี ข้อเสีย เวกเตอร์ไทล์ราสเตอร์ไทล์ (Raster Tiles)
ความหมาย ข้อดี ข้อเสีย ราสเตอร์ไทล์3 มิติไทล์ (3D Tiles)
ความหมาย ข้อดี ข้อเสีย 3D ไทล์
Tiles
เวกเตอร์ไทล์ (Vector Tiles)
ข้อมูลเวกเตอร์ไทล์ (Raster Tiles) คือ ข้อมูลแผนที่ที่ประกอบด้วยชิ้นส่วนของข้อมูลเชิงพื้นที่ (จุด, เส้น, พื้นที่) ที่รวมอยู่ในรูปแบบไทล์ ซึ่งเป็นรูปแบบไบนารี ที่อ้างอิงจาก Protobuf (Protocol Buffers) เมื่อนำไปพัฒนาทำให้แผนที่สามารถโต้ตอบ (Interactive) กับผู้ใช้ได้
"https://example.com/tiles/{z}/{x}/{y}.pbf"
"{host}/tiles/1.0-beta/tiles/{collectionId}/{z}/{x}/{y}?api_key={API_KEY}"
ราสเตอร์ไทล์
ข้อมูลราสเตอร์ไทล์ (Raster Tiles) คือ ข้อมูลแผนที่ที่อยู่ในลักษณะรูปภาพ (PNG, JPEG) ที่ถูกเรนเดอร์ไว้ล่วงหน้า ซึ่งจะแสดงข้อมูลแผนที่ในระดับการซูมที่แตกต่างกัน โดยไม่เรนเดอร์ภาพทั้งหมดแบบทันที แผนที่จะถูกแบ่งออกเป็นตารางของไทล์ภาพขนาดเล็ก (โดยปกติจะมีขนาด 256×256 หรือ 512×512 พิกเซล) เมื่อคุณซูมและเลื่อน ไลบรารีการทำแผนที่จะดึงเฉพาะไทล์ที่มองเห็นได้จากเซิร์ฟเวอร์ไทล์
"https://example.com/tiles/{z}/{x}/{y}.png"
"{host}/maps/coverage/1.0-beta/maps/{collectionId}/tms/{z}/{x}/{y}?api_key={API_KEY}"
3 มิติไทล์
ข้อมูล 3 มิติไทล์ (3D Tiles) มีโครงสร้างการจัดเก็บคล้ายกับแผนผังต้นไม้ (Tree) ซึ่งประกอบด้วยไทล์ย่อย จำนวนมากภายใน ที่สามารเชื่อมโยงเนื้อหาเพื่อเรนเดอร์ (Rendering) หรือสตรีม (Streaming) สำหรับแสดงผลได้ ซึ่งอาจเรียกว่า "Tileset"
3D Tiles
องค์ประกอบ 3 มิติไทล์
- Bounding Box : ขอบเขตของวัตถุ 3 มิติไทล์ (
box,region,sphere) - Geometric Error : ค่าความคลาดเคลื่อนสำหรับการโหลดไทล์ย่อย (Children Tiles) ในการแสดงผล
- Content : ข้อมูลเนื้อหาของไทล์
- Bounding Box ของไทล์่ย่อย (Children Tiles)
- URL ของที่อยู่เนื้อหาของไทล์ เช่น
.b3dm,.i3dm,.pnts,.json
- Children รายการของไทล์ย่อย (Children Tiles)
Tree Tiles
"{host}/3d/1.0/collections/{collectionId}/3dTiles/tileset.json?api_key={API_KEY}"
| ฟีเจอร์ | เวกเตอร์ไทล์ | ราสเตอร์ไทล์ | 3 มิติไทล์ |
|---|---|---|---|
| ประเภทข้อมูล | ข้อมูลเวกเตอร์ (Point, Line, Polygon) | ข้อมูลราสเตอร์ (Geotiff) | ข้อมูล 3 มิติ (glTF, Pointclouds, Terrain) |
| รูปแบบไทล์ | .pbf | .png, .jpg, .tiff | .json (tileset.json), .b3dm, .i3dm,.pnts ,.glb |
| การโต้ตอบ | - สามารถใช้ข้อมูล properties โต้ตอบกับผู้ใช้งาน - เปลี่ยนแปลงรูปแบบการแสดงผลได้ เช่น สี ขนาด ความทึบแสง เป็นต้น | - ไฟล์คงที่ (Static) | - ปรับขนาด ตำแหน่ง และความคมชัดได้ |
Vector Tiles, Coverage Tiles, 3D Tiles
ตารางระดับการซูมข้อมูลเวกเตอร์และราสเตอร์ไทล์
| ระดับการซูม | จำนวนไทล์ | ความกว้าง (ลองจิจูด) | ตัวอย่างของพื้นที่ที่ใช้แทนบนแผนที่ |
|---|---|---|---|
| 0 | 1 | 360 | โลกทั้งใบ |
| 1 | 4 | 180 | |
| 2 | 16 | 90 | ทวีป |
| 3 | 64 | 45 | ประเทศที่มีขนาดใหญ่ |
| 4 | 256 | 22.5 | ประเทศมีพื้นที่ขนาดใหญ่ |
| 5 | 1,024 | 11.25 | |
| 6 | 4,096 | 5.625 | |
| 7 | 16,384 | 2.813 | ประเทศมีพื้นที่ขนาดเล็ก |
| 8 | 65,536 | 1.406 | |
| 9 | 262,144 | 0.703 | พื้นที่ขนาดใหญ่, เขตเมืองใหญ่ |
| 10 | 1,048,576 | 0.352 | อำเภอ, เขตเมือง |
| 11 | 4,194,304 | 0.176 | เมือง |
| 12 | 16,777,216 | 0.088 | เมือง, ตำบล |
| 13 | 67,108,864 | 0.044 | เมือง, ตำบล |
| 14 | 268,435,456 | 0.022 | |
| 15 | 1,073,741,824 | 0.011 | ถนนสายหลัก, ถนนขนาดใหญ่ |
| 16 | 4,294,967,296 | 0.005 | |
| 17 | 17,179,869,184 | 0.003 | ตึก, อาคาร, ที่อยู่อาศัย |
| 18 | 68,719,476,736 | 0.001 | ตึกขนาดเล็ก, ต้นไม้ |
| 19 | 274,877,906,944 | 0.0005 | ทางข้าม, ถนนขนาดเล็ก |
| 20 | 1,099,511,627,776 | 0.00025 | อาคารขนาดเล็ก |