สร้างและเลือกรูปแบบแผนที่

ขั้นตอนเลือกรูปแบบแผนที่ฐาน (Basemap)

การสร้างแผนที่ หรือเลือกรูปแบบแผนที่ฐาน ผู้ใช้งานสามรถเพิ่มข้อมูลเชิงพื้นที่ประเภทเวกเตอร์ และราสเตอร์ และทำการปรับแต่งแผนที่ได้เพิ่มเติม Map studio > Map styles > Add Map

1. ไปที่ เมนู Style และทำการสร้าง Style โดย คลิกที่ปุ่ม New Map Style ที่มุมขวาบน
2. ทำการ เลือก Map Style ที่มีบน Vallaris และสามารถปรับแต่ง Map Style ได้เพิ่มเติม
3. คลิกปุ่ม Build your own map เพื่อสร้างแผนที่ฐาน (Basemap)

info

แผนที่สามารถปรับแต่ง และออกแบบได้ในภายหลัง เมื่อเลือกรูปแบบแผนที่แล้ว

เพิ่มรูปแบบ (Style) แผนที่ฐาน

การเพิ่มรูปแบบแผนที่คือการนำเข้าไฟล์ JSON ที่มีโครงสร้างตาม Map JSON Style ของ MapLibre Style Spec ซึ่งจะใช้ JSON เพื่อกำหนดลักษณะของแผนที่ รวมถึงสไตล์ของเลเยอร์, สี, ฟอนต์, และอื่น ๆ

ขั้นตอนการนำเข้า Map JSON Style

Map studio > Map styles > New Map Style

1. ไปที่เมนู Style คลิกที่ปุ่ม New Map Style ที่มุมบนขวา จะแสดงหน้าต่างสำหรับเลือกหรือเพิ่มรูปแบบแผนที่ฐาน
2. คลิกที่ปุ่ม Add JSON style เพื่อเพิ่มรูปแบบแผนที่ฐาน ซึ่งสามารถเพิ่มในรูปแบบไฟล์ JSON หรือลิงก์ URL API Services ได้

{
  "version": 8,
  "name": "My Map Style",
  "sources": { ... },
  "sprite": "https://example.com/sprite",
  "glyphs": "https://example.com/fonts/{fontstack}/{range}.pbf",
  "layers": [ ... ],
  "bearing" : 0,
  "center" : [...],
  "metadata": { ... },
  "pitch" : 0,
  "zoom" : 0
}

คำอธิบายโครงสร้าง Maps JSON Style

ชื่อฟิลด์	คำอธิบาย
version	เวอร์ชันของสไตล์แผนที่ (เช่น 8 สำหรับเวอร์ชันปัจจุบันของ MapLibre GL JS หรือ Mapbox GL JS)
name	ชื่อของสไตล์แผนที่ที่สามารถตั้งได้เอง
sources	แหล่งข้อมูลที่ใช้ในแผนที่ เช่น แผนที่จาก OpenStreetMap หรือข้อมูล GeoJSON โดยจะมี type และ url กำหนดประเภทและที่อยู่ของข้อมูล
sprite	URL ที่ใช้สำหรับการโหลดไอคอนและสัญลักษณ์ที่ใช้ในแผนที่
glyphs	URL ที่ใช้โหลดฟอนต์ที่ใช้แสดงข้อความบนแผนที่ (โดยสามารถแทนที่ด้วยฟอนต์ที่กำหนดเอง)
layers	เลเยอร์ที่ใช้ในการแสดงข้อมูลบนแผนที่ โดยจะมีหลายประเภท เช่น Background, Line, Fill, Symbol แต่ละเลเยอร์มี id, type, source และ paint
bearing	ทิศทางของแผนที่ตามแนวแกนราบ (องศา) เช่น 0 องศา คือ ทิศเหนือ, 90 องศา คือ ทิศตะวันออก
center	จุดศูนย์กลางของแผนที่ในรูปแบบพิกัด [longitude, latitude]
metadata	ข้อมูลเพิ่มเติมเกี่ยวกับสไตล์ของแผนที่
pitch	มุมเอียงของแผนที่ตามแนวตั้ง (องศา) เช่น 0 อมุมมองจากด้านบน
zoom	ระดับการซูมของแผนที่ - ต่ำสุด : 0 - สูงสุด : 22

{
  "id": "layer-id",                // Unique layer name
  "type": "fill" | "line" | "symbol" | "circle" | "heatmap" | "fill-extrusion" | "raster" | "hillshade" | "background" | "sky",
  "metadata": { ... },         
  "ref": "other-layer-id",
  "source": "source-id",        
  "source-layer": "layer-name",  
  "minzoom": 5,             
  "maxzoom": 20,
  "filter": [ "==", "class", "park" ], 
  "layout": { ... },           
  "paint": { ... }                
}

คำอธิบายโครงสร้าง Layer JSON

ชื่อฟิลด์	คำอธิบาย
id	ชื่อของเลเยอร์ที่ใช้ในการระบุและจัดการเลเยอร์บนแผนที่
type	ประเภทของเลเยอร์ เช่น background, fill, line, symbol หรือ raster
metadata	ข้อมูลเพิ่มเติมของเลเยอร์ เช่น คำอธิบายเลเยอร์
source	แหล่งข้อมูลที่ใช้ในเลเยอร์นั้น เช่น ข้อมูลจาก OpenStreetMap หรือ GeoJSON
source-layer	ระบุชื่อชั้นข้อมูลภายใน source (ใช้กับ vector tiles) เพื่อบอกว่าเลเยอร์นี้ดึงข้อมูลจากชั้นใด
minzoom	ระดับการซูมต่ำสุดที่เลเยอร์นี้จะเริ่มแสดงผล
maxzoom	ระดับการซูมสูงสุดที่เลเยอร์จะแสดงผล
filter	เงื่อนไขที่ใช้กรองข้อมูลจาก source
layout	ลักษณะการแสดงผลของเลเยอร์
paint	การตั้งค่าคุณสมบัติการแสดงผลของเลเยอร์ เช่น สี, ความโปร่งแสง, ความหนาของเส้น
layout	การตั้งค่าการจัดวางของเลเยอร์ เช่น การจัดตำแหน่งของสัญลักษณ์หรือการหมุนรูปภาพ