การนําเสนอข อมูลแผนท ี่ด วยเทค...

1

การนาเสนอขอมลแผนทดวยเทคโนโลย SVG ชยภทร เนองคามา

การนาเสนอขอมลแผนทดวยเทคโนโลย SVG นาย ชยภทร เนองคามา Email: [email protected]

SVG (Scalable Vector Graphics) เปนภาษาหนงทถกนามาใชมากในงานสารสนเทศภมศาสตร โดยเฉพาะปจจบน การนาเสนอขอมลสารสนเทศภมศาสตรผานระบบอนเตอรกาลงเปนทไดรบความนยมอยางมากในหลายองคกร ประกอบกบความยดหยนของ SVG ทสนบสนนการทางานรวมกบเทคโนโลย Web 2.0 จงทาให SVG เปนอกหนงทางเลอกทนาสนใจในการนาเสนอขอมลแผนทผานระบบอนเตอรเนต 1. บทนา SVG เปนภาษาทพฒนามาจากแนวคดของภาษา Extensible Markup Language (XML) เพอใชในการแสดงผลขอมลขอมลกราฟกประเภทเวกเตอรและรปภาพบนอนเตอรเนต โดยมาตรฐานนถกสรางโดยองคกร World Wide Web Consortium (W3C) การทางานของ SVG จาเปนทจะตองอาศยโปรแกรมทอาน SVG และแปลออกมาเปนขอมลกราฟก ซงโปรแกรมนนกคอ SVG Viewer โปรแกรมนพฒนาโดย Adobe Systems Inc. ซงเปนผสรางโปรแกรม Adobe Photoshop การจดเกบขอมล SVG แบงออกเปน 2 ฟอรแมทหลกคอ .svg ในรปแบบปกตและ .svgz ในรปแบบการบบอดขอมล ผใชจาเปนจะตองมโปรแกรมสาหรบคลายขอมล (decompression) สาหรบทางานดวย

Uncompressed SVG With gzip compression Compression ratio 12,912 2,463 81% 12,164 2,553 79% 11,613 2,617 77% 18,689 4,077 78% 13,024 2,041 84%

ตารางท 1 แสดงผลการทดสอบเปรยบเทยบการบบอดขอมล

(http://www.w3.org/TR/SVG11/minimize.html)

2


SVG ตางจากภาพบตแมป ตรงท SVG จะทาการจดเกบคาพกดและรหสของฟเจอรแบบตอเนอง แตภาพบตแมปจะจดเกบคาความสวางของจดภาพในรปแบบตารางกรด ดงนนจงทาให SVG สามารถแสดงผลกราฟฟกไดแบบตอเนอง ชดเจนทกๆมาตรสวน กลาวคอไมมการแตกเมอขยายภาพไปในมาตรสวนทใหญขน ดงภาพดานลาง

รปท 1 แสดงภาพบตแมป PNG ทถกขยาย

รปท 2 แสดงเวกเตอรกราฟก(svg) ทสามารถแสดงรายละเอยดไดชดเจนแมถกขยาย

3


เนองจาก SVG มโครงสรางแบบ XML ดงนนจงสามารถใชเทคนคตางๆทเกยวเนองกบ XML ได เชน XSLT, XSL, XPATH เปนตน สวนการเขาถงองคประกอบตางๆใน SVG สามารถเขาถงแบบ DOM (Document Object Model) ซงทาให SVG มคณสมบตการทางานทซบซอนมากขนกวาภาพทวไป กลาวคอสามารถรองรบการเชอมตอกบผใชแบบมปฏกรยาโตตอบ (Interactive) และการแสดงผลในลกษณะเคลอนไหว (Dynamic)

รปท 3 แสดงตวอยางเอกสาร SVG ตามมาตรฐานของ W3C

2. รปทรงพนฐาน (Basic Shape) SVG จะประกอบดวยรปทรงเรขาคณตพนฐาน 6 ประเภท ทเปนตนแบบของกราฟฟกตางๆ รปทรงเรขาคณตพนฐานประกอบดวย line, polyline, polygon, rect, circle and ellipse

<? xml version="1.0” standalone="no"?> <! DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width=”300px" height=”200px"> <desc> <! -- put a description here --> </desc> <g> <! -- your graphic here --> </g> </svg>

PKGIS2007

4


รปท 4 แสดงตวอยางรปทรงเรขาคณตพนฐานทงหก

Object Code Parameter

1. line <line x1="325" y1="150" x2="375" y2="50" /> x1,y1 คอพกดจดเรมตน x2,y2 คอพกดจดสนสด

2. Polyline <polyline points="50, 250 75, 350 100, 250 125, 350 150, 250 175, 350" />

ชดของจด(Points) ตางๆทประกอบกนอยางตอเนอง

3. Polygon <polygon points=" 250, 250 297, 284 279, 340 220, 340 202, 284" />

สเหลยมรปปดทเกดจากชดของจด(Points) ตางๆทประกอบกนอยางตอเนอง

4. Rect <rect x="150" y="50" rx="20" ry="20" width="135" height="100" />

สเหลยมพนผาซงประกอบดวยพารามเตอรพกดซายบน(x,y), คารศมของมมทงสดาน(rx,ry) , ขนาดความกวาง, ขนาดความยาว

5. Circle <circle cx="70" cy="100" r="50" /> cx, cy คอคาพกดของจดศนยกลางวงกลม r คอขนาดรศม

6. Ellipse <ellipse cx="400" cy="300" rx="72" ry="50" /> cx, cy คอคาพกดของจดศนยกลางวงร rx,ry คอขนาดรศมแกนxและy

PKGIS2007

5


3. JavaScript JavaScript เปนภาษาสครปต ซงอยภายใตมาตรฐานของ W3C ททางานทางฝงของ Client โดย JavaScript จะมหนาเพอใชในการควบคมการทางานของแผนท การแสดงผลขอมลในลกษณะทตอบโตกบผใช เชน การ สรางเครองมอคนหาขอมล การแสดงพกดภมศาสตรเมอ mouse วางดานบนของแผนท เปนตน

รปท 5 แสดงตวอยาง code ภาษา JavaScript

PKGIS2007

6


4. Basic SVG Map Application with SAGA SAGA (System for Automated Geoscientific Analyses) เปนโปรแกรมสารสนเทศภมศาสตร ภายใตลขสทธแบบ GNU General Public License (GPL) โดยมโมดลการทางานเหมอนโปรแกรมประเภท Desktop GIS ทวไป และมโมดลทใชในการวเคราะหขอมลเชงพนทดานตางๆเชน Geostatistic, Hydrology, Terrain Analysis เปนตน นอกจากนยงสามารถรองรบรปแบบขอมลทงเวกเตอรและราสเตอรไดหลากหลาย ผใชสามารถดาวโหลดไดจาก http://downloads.sourceforge.net/saga-gis/saga_2.0_rc3_bin_msw.zip?modtime=1162220563&big_mirror=0

รปท 6 แสดงตวอยางโปรแกรม SAGA

PKGIS2007

PKGIS2007

7


รปท 7 แสดงรายการโมดลสาหรบวเคราะหขอมลเชงพนททงหมด

นอกจากนโปรแกรม SAGA ยงมฟงกชนการนาเสนอขอมลเชงพนทในรปแบบ Interactive SVG โดยผใชสามารถนาผลลพธทไดไปใชในการนาเสนอขอมลเชงพนทผานระบบอนเตอรเนต ซงผลลพธทไดจะประกอบดวยขอมลเชงพนทและโคดโปรแกรม JavaScript สาหรบการควบคมการแสดงผล บทความนจะมงเนนการนาเสนอวธการสรางและรายละเอยดการใชงาน โดยมขนตอนดงตอไปน 1. ทาการนาเขาขอมลเชงพนททตองการจะสราง SVG Application โดยไปท File>Shapes>Load shapes

รปท 8 แสดงขนตอนการนาเขาขอมลเชงพนทสโปรกรม SAGA

รปท 9 เลอกไฟลขอมลเวกเตอรทตองการนาเขา

PKGIS2007

PKGIS2007

8


รปท 10 แสดงภาพผลลพธทไดจากการนาเขาขอมลเวกเตอร

2. ทาการปรบแตงสและสไตลการแสดงผล โดย Click ทชนขอมลแผนททตองการ แลวทาการปรบแตงคาในแถบเครองมอดานขวาดงรป

รปท 11 แสดงภาพผลลพธทไดจากการนาเขาขอมลเวกเตอร

กาหนดส

กาหนดขนาดของฟเจอร

PKGIS2007

PKGIS2007

9


3. ทาการ Add ชนขอมลตางๆเขาไปบนเฟรมแผนท โดยใชเมาสคลกขวาทชนขอมลทตองการ แลวเลอกคาสง Show Shapes ดงรปท 12

รปท 12 แสดงการเลอกแถบคาสง Show Shapes เพอเพมชนขอมลลงบนเฟรมแผนท

รปท 13 แสดงการกาหนดเฟรมแผนททตองการแสดงผลชนขอมล

กรณทตองการนาชนขอมลตางๆ มาทาการซอนทบกนบนเฟรมแผนทให ผใชทาตามขนตอนท 3 จนครบทกชนขอมลทตองการ โดยกาหนดเฟรมแผนทปลายทาง เปนชอเดยวกน

10


รปท 14 แสดงผลลพธการซอนทบชนขอมลแผนทของชนขอมลตางๆ

4. ไปท Map >> Save As Interactive SVG เพอทาการสราง SVG Application

รปท 15 แสดงการสราง SVG Application

PKGIS2007

11


รปท 16 แสดงการกาหนดคาพารามเตอรสาหรบการสราง SVG Application

รปท 17 แสดงขอความแจงเตอนเมอประมวลผลเสรจ

5. ทาการทดลองเปด Application ผลลพธดวยโปรแกรม web browser เพอทดสอบการทางาน

กาหนด Reference View

กาหนดไดเรกทอรปลายทางสาหรบผลลพธ

PKGIS2007

12


รปท 18 แสดงผลลพธของ SVG Application ทไดจากการสรางดวยโปรแกรม SAGA

กรณทผใชตองการบรการขอมลผานอนเตอรเนตกสามารถ นา SVG Application ไป upload ขนสแมขายเพอใหบรการไดทนท นอกจากนทานทตองการพฒนาโปรแกรมประยกตทางดาน SVG ทซบซอนมากขนกสามารถใช SVG Application ทไดนเปนพนฐานในการศกษา ทงในเรองของการเขยนโคดโปรแกรม JavaScript เพอควบคมการทางานของ SVG ดวยวธแบบ DOM และการสรางเอกสาร SVG ทซบซอน เปนตน อลกอรทมของโปรแกรมประยกตนเปนของ Andreas Neumann และนกพฒนาอนๆจาก http://www.carto.net/

Layer Controls

Map View

Reference View Toolbar

PKGIS2007

13


รปท 19 แสดงไฟลผลลพธทงหมดของ SVG Application

ไฟล JavaScript สาหรบควบคมการทางาน

ไฟล SVG เกบขอมลเชงพนท

PKGIS2007

การนําเสนอข อมูลแผนท ี่ด วยเทค...

Documents