API Services

การแบ่งปัน API Services เหมาะสำหรับนักพัฒนา (Developer) ที่ต้องการนำข้อมูลไปใช้แสดงผลบนเว็บไซต์ ซึ่งข้อมูลไทล์เป็นข้อมูลที่ยังไม่มีการตกแต่งสไตล์ของแผนที่ ผู้ใช้งานสามารถตกแต่งสไตล์แผนที่ โดยใช้ Map JSON Style หรือสามารถนำไปแสดงที่ Map Style ได้เช่นกัน

การแบ่งปัน Vector Tiles API Service

การแบ่งปัน Vector Tiles API Service เพื่อนำไปใช้สำหรับการแสดงผลและการพัฒนาแผนที่เว็บไซต์ ซึ่งสามารถแบ่งปันออกไปได้ 2 รูปแบบ คือ

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

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

Map studio > Vector Tiles > Share

1. คลิกที่จุด 3 จุด หรือ คลิกที่ตัว Tiles Collection ของ Tiles Collection ที่ต้องการ Share API
2. คลิกเลือกปุ่ม Share
3. เลือก API Key เพื่อเป็นรหัสยืนยันตัวตน และสิทธิในการเข้าถึง API
4. ทำการ คัดลอกลิงก์ API Service เพื่อนำไปใช้งาน

ตัวอย่างการเรียกใช้ TileJSON

ตัวอย่างการเรียกใช้ API Service TileJSON โดยใช้ Maplibre library สำหรับเป็นโครงสร้างการแสดงผล ซึ่งเขียนอยู่ในรูปแบบ HTML Text แบ่งออกเป็น 3 ส่วนหลัก คือ

• สร้างตัวแปรสำหรับแสดงข้อมูลแผนที่ฐาน (Basemap) ซึ่งอยู่ในรูปแบบ JSON Style
• การ addSource ซึ่งเป็นข้อมูลที่อยู่ในรูปแบบ Vector โดยเรียกข้อมูลจาก TileJSON ที่ได้จากการแบ่งปัน API Service
• การ addLayer เพื่อสร้างสไตล์สำหรับการแสดงผลข้อมูลบนแผนที่ ซึ่งจะเห็นได้ว่า ข้อมูลอยู่ในรูปแบบแบบพื้นที่ (Polygon) โดยใน JSON Style คือประเภท fill และมีตกแต่งที่ฟิลด์ paint โดยให้สีของพื้นที่ fill-color เท่ากับ #a0cc97

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

add-tile.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Add Vector Tiles</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>
        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,
        });
        // Add polygon with geoJSON source
        map.on("load", () => {
            map.addSource('contours', {
                type: 'vector',
                url:
                    'https://va-cdn-02.vallarismaps.com/core/api/tiles/1.0-beta/tiles/{collectionId}?api_key={YOUR_API_KEY}'
            });
            map.addLayer({
                'id': '66ee393eae78b6d2972e1cc6',
                'type': 'fill',
                'source': 'contours',
                'source-layer': '66ee393eae78b6d2972e1cc6',
                'paint': {
                    'fill-color': '#a0cc97',
                }
            });
        });
    </script>
</body>
</html>

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

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

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