Skip to main content
Version: v1.5.0

Expression

การปรับแต่งรูปแบบ (Style) ด้วย Expression เป็นการปรับแต่งโดยใช้ JSON Array ซึ่งผู้ใช้งานสามารถปรับแต่งด้วยรูปแบบพื้นฐาน โดยแบ่งออกเป็น 3 ส่วนหลัก และสามารถทำการปรับแต่งเพิ่มเติมได้โดย การปรับแต่งในรูปแบบ Advance ได้

Data Expression

แสดงผลข้อมูลโดยระบุค่าข้อมูล (Value)

Data Expression (Range)

แสดงผลข้อมูลโดยใข้ช่วงค่าข้อมูล (Range)

Camera Expression

การแสดงโดยใช้ระดับการซูม

Data Expression​

การกำหนดรูปแบบการแสดงผลข้อมูล Vector Tiles โดยใช้ค่าของข้อมูลที่อยู่ภายในฟิลด์ properties ข้อมูลที่ใช้สำหรับเป็นเงื่อนไข สามารถใช้ได้กับค่าข้อมูลประเภทข้อความ (String) และตัวเลข (Number) โดยใช้ฟังก์ชัน match คือการจับคู่ค่ากับผลลัพธ์ที่ต้องการ ซึ่งหากต้องปรับแต่งเติมสามารถดำเนินการได้ที่โหมด Advance

ขั้นตอนการทำ Data Expression​

  1. คลิกเลือกเลเยอร์ที่ต้องการปรับแต่ง
  2. เลือกรูปแบบ (Style) ที่ต้องการปรับแต่งที่รองรับการทำ Data Expression เช่น Color, Opacity
  3. คลิกที่เมนู Data Expression ซึ่งจะแสดงหน้าต่าง เพื่อเลือกฟิลด์ที่ต้องการใช้เป็นเงื่อนไขและมีการกำหนดค่าข้อมูล (Value) จากนั้นกดปุ่ม Enter ที่คีย์บอร์ดเพื่อเป็นการยืนยัน เช่น เลือกฟิลด์ pv_en และกำหนดค่าข้อมูล (Value)เท่ากับ Bangkok จะให้แสดงผลในรูปแบบใดต่อไป เมื่อทำการแก้ไขเสร็จสิ้น ให้ทำการบันทึกทุกครั้ง
tip

การกำหนดค่าข้อมูล สามารถกำหนดได้มากกว่า 1 ค่า เช่น ต้องการแสดงฟิลด์ pv_en ที่มีค่าข้อมูลเท่ากับ Bangkok และ Nakhon Pathom

Data Expressions (Range)​

การกำหนดรูปแบบการแสดงผลข้อมูล Vector Tiles โดยใช้ค่าของข้อมูลที่อยู่ภายในฟิลด์ properties ประเภทตัวเลขเท่านั้น โดยใช้ฟังก์ชัน interpolate ซึ่งจะสร้างการเปลี่ยนแปลงแบบค่อยเป็นค่อยไป ตามช่วงค่าที่ทำการกำหนด

ขั้นตอนการทำ Data Expression (Range)​

  1. คลิกเลือกเลเยอร์ที่ต้องการปรับแต่ง
  2. เลือกรูปแบบ (Style) ที่ต้องการปรับแต่งที่รองรับการทำ Data Expression (Range) เช่น Color, Opacity
  3. คลิกที่เมนู Data Expression (Range) ซึ่งจะแสดงหน้าต่าง เพื่อเลือกฟิลด์ที่ต้องการใช้เป็นเงื่อนไขและมีการกำหนดค่าข้อมูล (Value) จากนั้นกดปุ่ม Enter ที่คีย์บอร์ดเพื่อเป็นการยืนยัน เช่น เลือกฟิลด์ temp และกำหนดค่าข้อมูล (Value)เท่ากับ 9 จะให้แสดงผลในรูปแบบใดต่อไป เมื่อทำการแก้ไขเสร็จสิ้น ให้ทำการบันทึกทุกครั้ง
tip

การทำ Data Expression (Range) จะเห็นได้ว่าการเปลี่ยนการแสดงผล จะเป็นไปตามช่วงค่าที่กำหนด

Camera Expressions​

การกำหนดรูปแบบการแสดงผลข้อมูล Vector Tiles โดยใช้ระดับการซูม เป็นเงื่อนไขสำหรับแสดงผล ซึ่งได้ใช้ฟังก์ชัน interpolate ซึ่งจะแสดงผลที่มีการเปลี่ยนแปลงแบบค่อยเป็นไป และสามารถกำหนดวิธีการ (Method) ในการทำ Interpolate ได้

[ "interpolate", interpolation, ["zoom"], ... ]

ขั้นตอนการทำ Camera Expression​

  1. คลิกเลือกเลเยอร์ที่ต้องการปรับแต่ง
  2. เลือกรูปแบบ (Style) ที่ต้องการปรับแต่งที่รองรับการทำ Camera Expression เช่น Color, Opacity
  3. คลิกที่เมนู Camera Expression ซึ่งจะแสดงหน้าสำหรับกำหนดการแสดง ตามระดับการซูม และสามารถกำหนดวิธีการ (Method) สำหรับการเปลี่ยนแปลงได้

Data Expression Advance​

การปรับแต่งการแสดงผลเพิ่มเติม โดยใช้ JSON Array ซึ่งสามารถเขียนได้ตาม โครงสร้างของ Expression สามารถทำการศึกษาได้ในส่วนนี้ เพื่อใช้ในการปรับแต่งแผนที่ด้วยในรูปแบบ Advance ได้อย่างมีประสิทธิภาพ

โครงสร้างของ Expression​

[expression_name, argument_0, argument_1, ...]

จากโครงสร้างของ Expressions จะเห็นได้ว่า 2 องค์ประกอบหลักคือ Expression name และ Argument

  • Expression name : คำสั่งหรือฟังก์ชันที่บอกให้ระบบทำอะไรกับข้อมูลที่ตามมา (Arguments)
    • Spacial function : match , interpolate, case
    • String operator : concat
    • Math operator : + , - , * , /
    • Logic operator : ==, !=, &&, ||
  • Argument : ข้อมูลที่ป้อนเข้าไปใน Expression Name เพื่อให้ได้ผลลัพธ์ตามที่ต้องการ
    • ค่าคงที่ : ตัวเลข, ข้อความ, ค่า boolean , หรือ null
    • การอ้างอิงถึง Property : ยกตัวอย่างเช่น ["get", "population"] จะดึงค่าประชากรของ Feature มาใช้
    • นิพจน์อื่น : การซ้อนนิพจน์เข้าไปใน Argument ได้ ทำให้สามารถสร้างนิพจน์ที่ซับซ้อนได้มากขึ้น

Interpolate methods​

  • Linear : การเปลี่ยนแปลงเป็นเส้นตรง ค่า output จะเพิ่มขึ้นหรือลดลงอย่างสม่ำเสมอเมื่อค่า input เปลี่ยนแปลง
  • Cubic-bezier : การเปลี่ยนแปลงแบบโค้งมน ค่อยเป็นค่อยไป มีความราบเรียบมากกว่า linear
  • Exponential : การเปลี่ยนแปลงแบบเอ็กซ์โปเนนเชียล ค่า output จะเพิ่มขึ้นหรือลดลงอย่างรวดเร็วในช่วงแรก แล้วค่อยๆ ช้าลง
  • Step : การเปลี่ยนแปลงแบบขั้นบันได ค่า output จะคงที่อยู่จนกว่าค่า input จะเกินค่า stop ถัดไป

Expressions Operators​

get สำหรับดึงค่าของฟิลด์ properties ใดๆ ออกมาจากฟิลด์ เช่น ["get", "name"] จะดึงค่าของ property ชื่อ "name" ออกมา ซึ่งค่าข้อมูลที่อยู่ในฟิลด์ที่ทำการระบุจะต้องมีค่าข้อมูลเป็นประเภท String เท่านั้น และหากไม่สามารถเรียกฟิลด์นั้นๆ ผลลัพธ์ของในการเรียกข้อมูลจะเป็น "null"

["get", string] : value

ตัวอย่างเช่น ["get", "population"] เป็นการรับค่าข้อมูลจากฟิลด์ที่ชื่อ "population" เพื่อนำมาใช้ในการเขียนเงื่อนไขในการแสดงผลต่อไป

has สำหรับตรวจสอบว่ามีค่าข้อมูลของฟิลด์ properties ที่ระบุหรือไม่ เช่น ["has", "population"] จะตรวจสอบว่ามี property ชื่อ "population" หรือไม่ ซึ่งผลลัพธ์จากการ has เป็นค่า Boolean (true/false)

["has", string]: boolean

id เป็นค่าที่ใช้ระบุ Features แต่ละตัว อย่างเฉพาะเจาะจง เพื่อเป็นเงื่อนไขในการแสดงผล ตัวอย่างเช่น ["==", ["id"], 1] หาก id ของ Features เท่ากับ 1 จะให้แสดงผลในรูปแบบใด

 ["id"]: value

geometry-type ระบุประเภทของ geometry ของ Feature เช่น Point, LineString, Polygon เพื่อนำมาใช้ในการทำ Data expression

 ["geometry-type"]: string

properties เป็นอ็อบเจ็กต์ที่เก็บข้อมูลเฉพาะของแต่ละ Feature (เช่น จุด, เส้น, พื้นที่) ใน Maplibre GL JS ข้อมูลเหล่านี้สามารถเป็นอะไรก็ได้ตั้งแต่ชื่อสถานที่, ประชากร, ค่าตัวเลข, หรือแม้แต่ข้อมูลที่กำหนดเองอื่นๆ และมีลักษณะคล้ายกับ get

["properties"]: object

feature-state เป็น Operator เพื่อรับค่าข้อมูลจาก feature-state เพื่อทำการเข้าถึงฟิลด์เพื่อทำการเปลี่ยนแปลงและแก้ไข Style ซึ่งสามารถใช้ได้กับฟิลด์ paint เท่านั้น

feature-state: เป็นอ็อบเจ็กต์ที่เก็บค่าสถานะเพิ่มเติมของ feature ซึ่งสามารถใช้เพื่อควบคุมการแสดงผลของ feature ได้

[ "feature-state", string]: value

ตัวอย่างเช่น การเข้าถึงเมื่อทำการเมาส์ไป Hover Feature ทำการเปลี่ยนสีของ Feature นั้น เกิดจากการ Set State ของ Feature จาก False ให้เป็น True

caution

การปรับแต่งรูปแบบ (Style) ด้วย JSON บน Vallaris Maps ยังไม่รองรับการทำงานของ feature-state แต่สามารถ Set JSON Style และทำการเรียกใช้ในส่วนของนักพัฒนาเมื่อทำการเรียกรับข้อมูล Style ของแผนที่ได้

ตัวอย่างการใช้ feature-state Example use feature-state

ตัวอย่างการใช้ Advance Expression​

ตัวอย่างการใช้ step​

จากตัวอย่าง JSON ด้านล่าง "num_stu" เป็นชื่อของคอลัมน์ที่อยู่ใน Properties ของข้อมูล ซึ่งมีค่าของข้อมูลเป็นตัวเลขจำนวนนักเรียนในโรงเรียน และค่าสี red, green, blue เป็นค่าสีที่ใช้สำหรับการจำแนก โดยมีเงื่อนไขในการแสดงผล คือ หากค่าของข้อมูลน้อยกว่า 100 ให้แสดง Feature เป็นสี red หากค่าของข้อมูลอยู่ระหว่าง 100 - 300 ให้แสดงเป็นสี green และหากของข้อมูลมีค่ามากกว่า 300 ให้แสดงเป็นสี blue

[
  "step",
  ["get", "num_stu"],
  "red", // "num_stu" is less than to 100 is red
  100,
  "green", // "num_stu" is  between 100 and 300 is green
  300,
  "blue" // "num_stu" is  more than is blue
]

ตัวอย่างการใช้ case​

จากตัวอย่าง JSON ด้านล่าง เป็นการกำหนด Expression โดยมีการเรียกใช้ข้อมูลจากฟิลด์ num_stu หากค่าของข้อมูล น้อยกว่าหรือเท่ากับ 100 ให้แสดงเป็นสี red หากค่าของข้อมูลมีค่ามากกว่าหรือเท่ากับ 300 ให้แสดงเป็นสี green และหากนอกเหนือจาก 2 เงื่อนไขที่กำหนดจะแสดง Feature เป็นสี blue

[
  "case",
  ["<=", ["get", "num_stu"], 100],  // "num_stu" is less than  and equal 100 is red
  "red",
  [">=", ["get", "num_stu"], 300], // "num_stu" is more than 300 is green
  "green",
  "blue"
]

ตัวอย่างการใช้ match โดยเรียกใช้ 2 ฟิลด์เป็นเงื่อนไข​

จากตัวอย่าง JSON ด้านล่าง เป็นการทำ Expression โดยมีการเรียกใช้ข้อมูลจากฟิลด์ re_royin และ pv_en เป็นเงื่อนไข

  • หากค่าของข้อมูล re_royin เท่ากับ Northeast ให้แสดงเป็นสีชมพู pink
  • หาก pv_en เท่ากับ Nakhon Phanom ให้แสดงผลเป็นสีเขียว green pv_en เท่ากับ Sakon Nakhon ให้แสดงผลเป็นสีแดง red
  • หากไม่ตรงกับเงื่อนไขทั้งหมดที่กำหนดไว้ให้แสดงเป็นสีน้ำเงิน blue
[
  "match",
  [
    "get",
    "re_royin"
  ],
  "Northeast",
  [
    "match",
    [
      "get",
      "pv_en"
    ],
    "Nakhon Phanom",
    "green",
    "Sakon Nakhon",
    "red",
    "pink"
  ],
  "blue"
]

ตัวอย่างการใช้ Match​

จากตัวอย่าง JSON ด้านล่าง "COLOR" เป็นชื่อของคอลัมน์ที่อยู่ใน Properties และสีม่วง, เหลือง, แดง เป็น Value ที่อยู่ในคอลัมน์เพื่อบ่งบอกว่าถ้ามีค่า Value เท่ากับอะไรถึงให้เป็นสีนั้นๆ ตามรหัสสีที่ระบุ

icon.json
[
  "match",
  [
    "get", 
    "COLOR"
    ],
    "ม่วง",
    "#6F0DFD",
    "เหลือง",
    "#FAFA00",
    "แดง",
    "#FD0002",
    "น้ำตาล",
    "#983601",
    "ส้ม",
    "#FD7813",
    "#FF9FFF"
]

ตัวอย่างการใช้ Interpolate​

จากตัวอย่าง JSON ด้านล่าง "column name" เป็นชื่อของคอลัมน์ที่อยู่ใน Properties ค่าตัวเลขต่างๆ เป็น Value ที่อยู่ในคอลัมน์เพื่อบ่งบอกว่าถ้ามีค่า Value เท่ากับอะไรถึงให้เป็นสีนั้นๆ ตามรหัสสีที่ระบุ

classify.json
[
    "interpolate",
    [
        "linear"
    ],
    [
        "get",
        "column name"
    ],
    1,
    "#D9ED92",
    50,
    "#B5E48C",
    100,
    "#99D98C",
    500,
    "#76C893",
    1000,
    "#4287f5"
]