Introduction to SLD (Styled Layer Descriptor)

การปรบแตงสญลกษณของขอมล

Chingchai HumhongRegional Center of Geo-Informatics and Space Technology, Lower Northern Region

Naresuan University

ซอฟตแวรไหนบางทใช SLD ?

ผลลพธทไดจาก SLD

<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 กไมไดงายอยางทคดครบ

PointSymbolizer

<FeatureTypeStyle>

<Rule>

<PointSymbolizer>

<Graphic>

<Mark>

<WellKnownName>circle</WellKnownName>

<Fill>

<CssParameter name="fill">#FF0000</CssParameter>

</Fill>

</Mark>

<Size>6</Size>

</Graphic>

</PointSymbolizer>

</Rule>

</FeatureTypeStyle>

PointSymbolizer

<Graphic>

</Graphic>

Tag Description

<ExternalGraphic> ระบไฟลรปภาพทจะใชเปนสญลกษณ

<Mark> ระบไฟลรปราง <WellKnownName> ทจะใชเปนสญลกษณ

<Opacity>ก าหนดความทบแสง (โปรงใส) ของสญลกษณ โดยเรมตงแต 0 (โปรงใสอยางสมบรณ) ถง 1 (ทบแสงอยางสมบรณ) โดยคาเรมตนคอ 1

<Size> เปนการก าหนดขนาดของสญลกษณ

<Rotation>ก าหนดการหมนของสญลกษณ ในรปองศา และจะหมนเพมขนในทศทางตามเขมนาฬกา คาลบบงชถงการหมนทวนเขมนาฬกา โดยคาเรมตนเปน 0

Syntax PointSymbolizer

<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>

<Mark>

</Mark>

Tag Description

<WellKnownName>ชอของรปรางทใชบอย (อยางงาย) โดยจะมใหเลอกอยหลายแบบ เชน circle, square, triangle, star, cross หรอ x โดยคาเรมตนคอ square

<Fill>

เปนการก าหนดสของสญลกษณ<CssParameter name="fill">#RRGGBB</CssParameter>#FF0000 เปนสอะไร?

<Stroke>

เปนการก าหนดสเสนขอบของสญลกษณ<CssParameter name="stroke">#000000</CssParameter><CssParameter name="stroke-width">2</CssParameter>

Syntax PointSymbolizer

<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

<Graphic>

<Mark>

<WellKnownName>square</WellKnownName>

<Fill>

<CssParameter name="fill">#009900</CssParameter>

</Fill>

</Mark>

<Size>12</Size>

<Rotation>45</Rotation>

</Graphic>

Syntax PointSymbolizer

LineSymbolizer

<FeatureTypeStyle>

<Rule>

<LineSymbolizer>

<Stroke>

<CssParameter name="stroke">#000000</CssParameter>

<CssParameter name="stroke-width">3</CssParameter>

</Stroke>

</LineSymbolizer>

</Rule>

</FeatureTypeStyle>

LineSymbolizer

<Stroke>

</Stroke>

Tag Description

<GraphicStroke> เปนการน าเอากราฟก มาซอนทบกบขอมลเสน ท าใหขอมลเสนเปนแบบลกผสม

<CssParameter> เปนการก าหนดคาพารามเตอรใหกบขอมลเสน

Syntax LineSymbolizer

<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

Tag Description

name="stroke-dasharray" เปนการก าหนดรปแบบของขอมลเสนแบบเสนประ

name="stroke-dashoffset"

เปนการก าหนดรปแบบของขอมลเสน โดยใชเรองของระยะทางในหนวยของพกเซลโดยยดตามรปแบบ dasharray โดยคาเรมตนคอ 0 ซงมกจะใชกบขอมลเสนทแสดงผลแบบจด

Syntax LineSymbolizer

</CssParameter>

mitre

bevel

round

name="stroke-linejoin"

butt round

square

name="stroke-linecap"

<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 ชน

การเขยนสไตสแบบลกผสม<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>

PolygonSymbolizer

<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

<PolygonSymbolizer>

</PolygonSymbolizer>

Tag Description

<Fill>เปนการก าหนดสของสญลกษณ polygon<CssParameter name="fill">#RRGGBB</CssParameter>

<Stroke>

เปนการก าหนดสเสนขอบของสญลกษณ polygon<CssParameter name="stroke">#00557f</CssParameter><CssParameter name="stroke-width">2</CssParameter>

Syntax PolygonSymbolizer

<Fill>

</Fill>

Tag Description

<GraphicFill> เปนการก าหนดสญลกษณโดยใชกราฟกหรอรปภาพ

<CssParameter> เปนการก าหนดคาพารามเตอรใหกบสญลกษณ Polygon

<CssParameter>

</CssParameter>

Tag Description

name="fill"

เปนการก าหนดสของสญลกษณ polygon<CssParameter name="fill">#RRGGBB</CssParameter>โดยคาเรมตน เปนสเทา (#808080)

name="fill-opacity"ก าหนดความทบแสง (โปรงใส) ของสญลกษณ โดยเรมตงแต 0 (โปรงใสอยางสมบรณ) ถง 1 (ทบแสงอยางสมบรณ) โดยคาเรมตนคอ 1

Syntax PolygonSymbolizer

TextSymbolizer

<TextSymbolizer>

</TextSymbolizer>

Tag Description

<Label> ระบเนอหาของปายขอความหรอปายก ากบขอมล (ชอหว Field)

<Font>ระบขอมลตวอกษรและคณสมบตของตวอกษรส าหรบปายก ากบขอมล

<LabelPlacement> ก าหนดคาต าแหนงของตวอกษรส าหรบปายก ากบขอมล

<Halo>สรางพนหลงสรอบ ๆ ปายขอความส าหรบเพมความเดนชดในการแสดงผลของปายก ากบขอมล

<Fill> การก าหนดเตมสของปายก ากบขอมล

Syntax TextSymbolizer

<Label>

<ogc:PropertyName>VILL_NAM_T</ogc:PropertyName>

</Label>

Syntax TextSymbolizer

ชอของ field ในขอมลตารางของ Shapefile

<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 : ก าหนดขนาดของตวอกษรในหนวยพกเซล เรมตนคอ 10name="font-style"> : ก าหนดรปแบบของตวอกษร โดยมรปแบบใหเลอกใช

ไดแก normal, italic และ obliqueโดยเรมตนคอ normal

name="font-weight" : ก าหนดความหนาของตวอกษร โดยมตวเลอกเปน normalและ bold เรมตนเปน normal

<Halo>

<Radius>3</Radius>

<Fill>

<CssParameter name="fill">#FFFFFF</CssParameter>

</Fill>

</Halo>

Syntax TextSymbolizer

<Radius> : ก าหนดขนาดรศมของปายก ากบในพกเซล เรมตนคอ 1<Fill> : ก าหนดคาสของรศมในรปแบบของ # RRGGBB เรมตนเปนสขาว (# FFFFFF)

SLD Workshop