Coverage Tiles API Service

การแบ่งปัน API Services เหมาะสำหรับนักพัฒนา (Developer) ที่ต้องการนำข้อมูล Coverage Tiles ไปแสดงผลบนเว็บไซต์ โดยข้อมูล Coverage Tiles จะอยู่ในรูปแบบภาพ (.png) ซึ่งสามารถแบ่งปัน API Services ออกไปได้ 2 รูปแบบ ดังต่อไปนี้

• TileJSON : ข้อมูลรายละเอียด Tiles ที่อยู่ในรูปแบบ JSON ซึ่งสามารถนำไปพัฒนาแผนที่เว็บไซต์ได้
• TMS (Tiles Map Service) : ข้อมูลแผนที่ ที่ถูกแบ่งออกเป็นภาพขนาดเล็ก ๆ โดยแต่ละภาพจะแสดงส่วนย่อยของแผนที่ และถูกนำมารวมต่อกันเป็นแผนที่แผ่นเดียวกัน เมื่อทำการเรียกดู

ขั้นตอนการแบ่งปัน Coverage Tiles Service

Map studio > Coverage Tiles > Share

1. คลิกที่จุด 3 จุด หรือ คลิกเลือก Tiles Collection ของ Tiles Collection ที่ต้องการ Share API
2. คลิกเลือกปุ่ม Share
3. เลือก API Key สำหรับการ Share API
4. ทำการคัดลอก URL API Service เพื่อนำไปใช้งาน

ตัวอย่างการเรียกใช้ Coverage Tiles (TMS)

ตัวอย่างการเรียกใช้ API Services ที่เป็น TMS ซึ่งในตัวอย่างเขียนอยู่ในรูปแบบ HTML Text โดยแบ่งออกเป็น 3 ส่วนหลัก คือ

• สร้างตัวแปรสำหรับแสดงผล ข้อมูลแผนที่ฐาน (Basemap) อยู่ในรูปแบบ JSON Style ซึ่งสามารถสร้าง Map Stlyeและเรียกใช้งาน API Services ได้
• การ addSource ซึ่งเป็นข้อมูลประเภท Raster มีขนาดของ Tiles เท่ากับ 256x256 pixelโดยมีการเรียกใช้งาน TMS API Services
• การ addLayer สำหรับแสดงผลข้อมูลจาก TMS ซึ่งจะเห็นได้ว่าที่ฟิลด์ paint จะถูกระบุเป็น Object เปล่าเนื่องจากข้อมูล Raster ไม่สามารถแก้ไขรูปแบบการแสดงผลได้

ตัวอย่างการเรียกใช้งาน Coverage Tiles

add-tile.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Add point</title>
    <meta property="og:description" content="Add Vector Tiles" />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        html,
        body,
        #map {
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Add Coverage Tiles</title>
    <meta property="og:description" content="Add Coverage Tiles" />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        html,
        body,
        #map {
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        // Basemap 
        const map = new maplibregl.Map({
            container: 'map', // container id
            style: 'https://va-cdn-02.vallarismaps.com/core/api/styles/1.0-beta/styles/{collectionId}?api_key={YOUR_API_KEY}', // style URL
            center: [100.45355828500013, 13.967057606990286], // starting position [lng, lat]
            zoom: 4, // starting zoom
            attributionControl: false,
        });
        map.on("load", () => {
            // Add Tiles source
            map.addSource('raster-source', {
                'type': 'raster',
                'tiles': ['https://va-cdn-02.vallarismaps.com/core/api/maps/coverage/1.0-beta/maps/{collectionId}/tms/{z}/{x}/{y}?api_key={YOUR_API_KEY}'],
                'tileSize': 256,
            });
            // Add layer from your source
            map.addLayer({
                'id': '667e2bb522614bee2b01f743',
                'type': 'raster',
                'source': 'raster-source',
                'paint': {}
            });
        });
    </script>
</body>
</html>
    </script>
</body>
</html>

ตัวอย่างการเรียกใช้ Coverage Tiles บนโปรแกรม QGIS

การนำข้อมูล TMS (Tiles Map Services) แสดงผลที่โปรแกร Qgis สามารถดำเนินการได้ที่เมนูการเพิ่ม XYZ Tiles ซึ่งมีขั้นตอนตอนอย่างละเอียด ดังต่อไปนี้

1. คลิกขวาที่เมนู XYZ Tiles เลือก New Connection...
2. เมื่อคลิกจะแสดงหน้าต่าง สำหรับระบุข้อมูลเพื่อเชื่อมต่อกับข้อมูล TMS Name : ชื่อการเชื่อมต่อ URL : ลิงก์ TMS จากการ Vallaris Maps โดยมีข้อมูล API Key แนบมาด้วย Zoom level : ขอบเขตการซูมที่ต้องการแสดงผลข้อมูล Authentication : กำหนดให้เป็นค่าเริ่มต้น
3. คลิกปุ่ม OK เพื่อเพิ่มการเชื่อมต่อข้อมูล TMS จากนั้นสามารถเพิ่มไปยังเลเยอร์ เพื่อแสดงผลข้อมูล