Introduction to SLD (Styled Layer Descriptor) การปรับแต่งสัญลักษณ์ของข้อมูลสำหรับ web map service

1. Introduction to SLD (Styled Layer Descriptor)
การปรับแต่งสัญลักษณ์ของข้อมูล
Chingchai Humhong
Regional Center of Geo-Informatics and Space Technology, Lower Northern Region
Naresuan University

2. ซอฟต์แวร์ไหนบ้างที่ใช้ SLD ?

3. ผลลัพธ์ที่ได้จาก SLD

4. <Rule>
<Name>amp</Name>
<Title>amp</Title>
<Abstract>amp</Abstract>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>AMP_CODE</ogc:PropertyName>
<ogc:Literal>1101</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<PolygonSymbolizer>
<Fill>
<CssParameter name="fill">#2ed20a</CssParameter>
<CssParameter name="fill-opacity">1</CssParameter>
</Fill>
<Stroke>
<CssParameter name="stroke">#000000</CssParameter>
<CssParameter name="stroke-width">0.26</CssParameter>
<CssParameter name="stroke-opacity">1</CssParameter>
</Stroke>
</PolygonSymbolizer>
</Rule>
<Rule>
<Name>amp</Name>
<Title>amp</Title>
<Abstract>amp</Abstract>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>AMP_CODE</ogc:PropertyName>
<ogc:Literal>1102</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<PolygonSymbolizer>
<Fill>
<CssParameter name="fill">#44d3f7</CssParameter>
<CssParameter name="fill-opacity">1</CssParameter>
</Fill>
<Stroke>
<CssParameter name="stroke">#000000</CssParameter>
<CssParameter name="stroke-width">0.26</CssParameter>
<CssParameter name="stroke-opacity">1</CssParameter>
</Stroke>
<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0"
xsi:schemaLocation="http://www.opengis.net/sld
StyledLayerDescriptor.xsd"
xmlns="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<NamedLayer>
<Name>Polygon Basic</Name>
<UserStyle>
<Title>SLD Cook Book: Polygon Label halo</Title>
<FeatureTypeStyle>
<Rule>
<PolygonSymbolizer>
<Fill>
<CssParameter name="fill">#D47FFF</CssParameter>
<CssParameter name="fill-opacity">0.5</CssParameter>
</Fill>
<Stroke>
<CssParameter name="stroke">#2D2D2D</CssParameter>
<CssParameter name="stroke-width">2</CssParameter>
</Stroke>
</PolygonSymbolizer>
<TextSymbolizer>
<Label>
<ogc:PropertyName>TAM_NAME</ogc:PropertyName>
</Label>
<Halo>
<Radius>2</Radius>
<Fill>
<CssParameter name="fill">#FFFFFF</CssParameter>
</Fill>
</Halo>
</TextSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>
กว่าจะได้แผนที่สวยๆ มา SLD ก็ไม่ได้ง่ายอย่างที่คิดครับ

5. PointSymbolizer

6. <FeatureTypeStyle>
<Rule>
<PointSymbolizer>
<Graphic>
<Mark>
<WellKnownName>circle</WellKnownName>
<Fill>
<CssParameter name="fill">#FF0000</CssParameter>
</Fill>
</Mark>
<Size>6</Size>
</Graphic>
</PointSymbolizer>
</Rule>
</FeatureTypeStyle>
PointSymbolizer

7. <Graphic>
</Graphic>
Tag Description
<ExternalGraphic> ระบุไฟล์รูปภาพที่จะใช้เป็นสัญลักษณ์
<Mark> ระบุไฟล์รูปร่าง <WellKnownName>ที่จะใช้เป็นสัญลักษณ์
<Opacity>
กาหนดความทึบแสง (โปร่งใส) ของสัญลักษณ์ โดยเริ่มตั้งแต่ 0 (โปร่งใสอย่าง
สมบูรณ์)ถึง 1 (ทึบแสงอย่างสมบูรณ์) โดยค่าเริ่มต้นคือ 1
<Size> เป็นการกาหนดขนาดของสัญลักษณ์
<Rotation>
กาหนดการหมุนของสัญลักษณ์ ในรูปองศา และจะหมุนเพิ่มขึ้นในทิศทางตามเข็ม
นาฬิกา ค่าลบบ่งชี้ถึงการหมุนทวนเข็มนาฬิกา โดยค่าเริ่มต้นเป็น 0
Syntax PointSymbolizer

8. <ExternalGraphic>
</ExternalGraphic>
Syntax PointSymbolizer
Tag Description
<OnlineResource> จะเป็นpathที่เราเก็บไฟล์ไว้ หรือสามารถเป็นทั้ง URLก็ได้เช่นกัน
<Format> ไฟล์นามสกุลของภาพ ที่สามารถรองรับบนเว็บได้
<Graphic>
<ExternalGraphic>
<OnlineResource
xlink:type="simple"
xlink:href="sanfly.png" />
<Format>image/png</Format>
</ExternalGraphic>
<Size>30</Size>
</Graphic>

9. <Mark>
</Mark>
Tag Description
<WellKnownName>
ชื่อของรูปร่างที่ใช้บ่อย (อย่างง่าย) โดยจะมีให้เลือกอยู่หลายแบบ เช่น circle,
square,triangle,star,crossหรือ xโดยค่าเริ่มต้นคือsquare
<Fill>
เป็นการกาหนดสีของสัญลักษณ์
<CssParametername="fill">#RRGGBB</CssParameter>
#FF0000 เป็นสีอะไร?
<Stroke>
เป็นการกาหนดสีเส้นขอบของสัญลักษณ์
<CssParametername="stroke">#000000</CssParameter>
<CssParametername="stroke-width">2</CssParameter>
Syntax PointSymbolizer

10. <Graphic>
<Mark>
<WellKnownName>triangle</WellKnownName>
<Fill>
<CssParameter name="fill">#009900</CssParameter>
<CssParameter name="fill-opacity">0.2</CssParameter>
</Fill>
<Stroke>
<CssParameter name="stroke">#000000</CssParameter>
<CssParameter name="stroke-width">2</CssParameter>
</Stroke>
</Mark>
<Size>12</Size>
</Graphic>
Syntax PointSymbolizer

11. <Graphic>
<Mark>
<WellKnownName>square</WellKnownName>
<Fill>
<CssParameter name="fill">#009900</CssParameter>
</Fill>
</Mark>
<Size>12</Size>
<Rotation>45</Rotation>
</Graphic>
Syntax PointSymbolizer

12. LineSymbolizer

13. <FeatureTypeStyle>
<Rule>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">#000000</CssParameter>
<CssParameter name="stroke-width">3</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
</FeatureTypeStyle>
LineSymbolizer

14. <Stroke>
</Stroke>
Tag Description
<GraphicStroke> เป็นการนาเอากราฟิก มาซ้อนทับกับข้อมูลเส้น ทาให้ข้อมูลเส้นเป็นแบบลูกผสม
<CssParameter> เป็นการกาหนดค่าพารามิเตอร์ให้กับข้อมูลเส้น
Syntax LineSymbolizer

15. <CssParameter>
Tag Description
name="stroke"
กาหนดค่าสีให้กับข้อมูลเส้น ในรูปแบบ # RRGGBBโดยค่าเริ่มต้นเป็นสีดา (#
000000)
name="stroke-width" ระบุความกว้างของข้อมูลเส้นในหน่วยพิกเซล เริ่มต้นคือ 1
name="stroke-opacity"
กาหนดความทึบแสง (โปร่งใส) ของสัญลักษณ์ โดยเริ่มตั้งแต่ 0 (โปร่งใสอย่าง
สมบูรณ์)ถึง 1 (ทึบแสงอย่างสมบูรณ์) โดยค่าเริ่มต้นคือ 1
name="stroke-linejoin"
เป็นการกาหนดรูปแบบของข้อมูลเส้นของเส้นขอบหรือ segments ของข้อมูลเส้น
และจุดตัดทางแยกของเส้น โดยค่าที่จะประกอบไปด้วย 3 ค่า ได้แก่
- mitre=จะทามุม(ทางโค้ง)ของเส้นจะคมชัด ลักษณะจะเป็นเหลี่ยม
- round= ลักษณะของข้อมูลเส้นจะโค้งมน
- bevel =ลักษณะของข้อมูลเส้นจะเป็นแบบไปในทิศทางมุมทแยง
โดยค่าเริ่มต้นเป็น mitre
name="stroke-linecap"
เป็นการกาหนดรูปแบบของข้อมูลในส่วนปลาย (node/endnode)ของเส้นโดย
ค่าที่จะประกอบไปด้วย 3 ค่า ได้แก่
- butt= แสดงลักษณะของข้อมูลจะเต็มขอบของเส้น
- round= แสดงลักษณะของข้อมูลเส้นจะโค้งมน
- square=ลักษณะของข้อมูลเส้นจะเป็นแบบขอบสี่เหลี่ยม
โดยค่าเริ่มต้นเป็น butt
Syntax LineSymbolizer

16. Tag Description
name="stroke-dasharray" เป็นการกาหนดรูปแบบของข้อมูลเส้นแบบเส้นประ
name="stroke-dashoffset"
เป็นการกาหนดรูปแบบของข้อมูลเส้น โดยใช้เรื่องของระยะทางในหน่วยของ
พิกเซลโดยยึดตามรูปแบบ dasharray โดยค่าเริ่มต้นคือ 0 ซึ่งมักจะใช้กับ
ข้อมูลเส้นที่แสดงผลแบบจุด
Syntax LineSymbolizer
</CssParameter>

17. mitre
bevel
round
name="stroke-linejoin"

18. butt round
square
name="stroke-linecap"

19. <FeatureTypeStyle>
<Rule>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">#0000FF</CssParameter>
<CssParameter name="stroke-width“>6</CssParameter>
<CssParameter name="stroke-linecap">round</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
</FeatureTypeStyle>
<FeatureTypeStyle>
<Rule>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">#FF0000</CssParameter>
<CssParameter name="stroke-width">3</CssParameter>
<CssParameter name="stroke-linecap">round</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
</FeatureTypeStyle>
การเขียนสไตส์แบบ 2 ชั้น

20. การเขียนสไตส์แบบลูกผสม
<FeatureTypeStyle>
<Rule>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">#0000FF</CssParameter>
<CssParameter name="stroke-width">1</CssParameter>
<CssParameter name="stroke-dasharray">10 10</CssParameter>
</Stroke>
</LineSymbolizer>
<LineSymbolizer>
<Stroke>
<GraphicStroke>
<Graphic>
<Mark>
<WellKnownName>circle</WellKnownName>
<Stroke>
<CssParameter name="stroke">#FF0000</CssParameter>
<CssParameter name="stroke-width">1</CssParameter>
</Stroke>
</Mark>
<Size>6</Size>
</Graphic>
</GraphicStroke>
<CssParameter name="stroke-dasharray">5 15</CssParameter>
<CssParameter name="stroke-dashoffset">7.5</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
</FeatureTypeStyle>

21. PolygonSymbolizer

22. <FeatureTypeStyle>
<Rule>
<PolygonSymbolizer>
<Fill>
<CssParameter name="fill">#aaffff</CssParameter>
</Fill>
<Stroke>
<CssParameter name="stroke">#00557f</CssParameter>
<CssParameter name="stroke-width">2</CssParameter>
</Stroke>
</PolygonSymbolizer>
</Rule>
</FeatureTypeStyle>
PolygonSymbolizer

23. <PolygonSymbolizer>
</PolygonSymbolizer>
Tag Description
<Fill>
เป็นการกาหนดสีของสัญลักษณ์ polygon
<CssParametername="fill">#RRGGBB</CssParameter>
<Stroke>
เป็นการกาหนดสีเส้นขอบของสัญลักษณ์ polygon
<CssParametername="stroke">#00557f</CssParameter>
<CssParametername="stroke-width">2</CssParameter>
Syntax PolygonSymbolizer
<Fill>
</Fill>
Tag Description
<GraphicFill> เป็นการกาหนดสัญลักษณ์โดยใช้กราฟิกหรือรูปภาพ
<CssParameter> เป็นการกาหนดค่าพารามิเตอร์ให้กับสัญลักษณ์ Polygon

24. <CssParameter>
</CssParameter>
Tag Description
name="fill"
เป็นการกาหนดสีของสัญลักษณ์ polygon
<CssParametername="fill">#RRGGBB</CssParameter>
โดยค่าเริ่มต้น เป็นสีเทา (#808080)
name="fill-opacity"
กาหนดความทึบแสง (โปร่งใส) ของสัญลักษณ์ โดยเริ่มตั้งแต่ 0 (โปร่งใสอย่าง
สมบูรณ์)ถึง 1 (ทึบแสงอย่างสมบูรณ์) โดยค่าเริ่มต้นคือ 1
Syntax PolygonSymbolizer

25. TextSymbolizer

26. <TextSymbolizer>
</TextSymbolizer>
Tag Description
<Label> ระบุเนื้อหาของป้ ายข้อความหรือป้ ายกากับข้อมูล (ชื่อหัวField)
<Font>
ระบุข้อมูลตัวอักษรและคุณสมบัติของตัวอักษรสาหรับป้ ายกากับ
ข้อมูล
<LabelPlacement> กาหนดค่าตาแหน่งของตัวอักษรสาหรับป้ ายกากับข้อมูล
<Halo>
สร้างพื้นหลังสีรอบ ๆ ป้ ายข้อความสาหรับเพิ่มความเด่นชัดในการ
แสดงผลของป้ ายกากับข้อมูล
<Fill> การกาหนดเติมสีของป้ ายกากับข้อมูล
Syntax TextSymbolizer

27. <Label>
<ogc:PropertyName>VILL_NAM_T</ogc:PropertyName>
</Label>
Syntax TextSymbolizer
ชื่อของ field ในข้อมูลตารางของ Shapefile

28. <Font>
<CssParameter name="font-family">Tahoma</CssParameter>
<CssParameter name="font-size">11</CssParameter>
<CssParameter name="font-style">normal</CssParameter>
<CssParameter name="font-weight">bold</CssParameter>
</Font>
Syntax TextSymbolizer
name="font-family"> : เป็นชื่อของฟ้อนต์ที่เราจะกาหนดให้เป็นป้ ายกากับข้อมูล
name="font-size : กาหนดขนาดของตัวอักษรในหน่วยพิกเซล เริ่มต้นคือ 10
name="font-style"> : กาหนดรูปแบบของตัวอักษร โดยมีรูปแบบให้เลือกใช้
ได้แก่ normal, italic และ oblique
โดยเริ่มต้นคือ normal
name="font-weight" : กาหนดความหนาของตัวอักษร โดยมีตัวเลือกเป็น normal
และ bold เริ่มต้นเป็น normal

29. <Halo>
<Radius>3</Radius>
<Fill>
<CssParameter name="fill">#FFFFFF</CssParameter>
</Fill>
</Halo>
Syntax TextSymbolizer
<Radius> : กาหนดขนาดรัศมีของป้ายกากับในพิกเซล เริ่มต้นคือ 1
<Fill> : กาหนดค่าสีของรัศมีในรูปแบบของ # RRGGBB เริ่มต้นเป็นสีขาว (# FFFFFF)

30. SLD Workshop