เทคนคการใหบรการขอมลแผนท Web GIS โดยใช

ซอฟตแวรฟรรหสเปดซอฟตแวรฟรรหสเปด

Implementing Web GIS Solutions

using open source software

โครงการศนยวจยระบบการวางแผนจดการทรพยากรนา

เพอความมนคงระดบจงหวด

สทธนนท ทองใบ (นกวจยภมสารสนเทศ)( )

คณะวศวกรรมศาสตร จฬาลงกรณมหาวทยาลย

ป วตถประสงคการนาเสนอ

1. นาเสนอรปแบบการใหบรการขอมลแผนท (WMS) แกกลมเครอขาย

2 อธบายหลกการพฒนา Web GIS เบองตน โดยใชซอฟตแวรฟรรหสเปด2. อธบายหลกการพฒนา Web GIS เบองตน โดยใชซอฟตแวรฟรรหสเปด

ไดแก Quantum GIS และ Openlayer API

ไ 3. กาหนดชองทางเขาถงขอมลแผนทรวมไปถงการแลกเปลยนขอมล

จาก www.thaiwaterplan.org หรอ Map service จากหนวยงานอนๆทเกยวของ

สถาปตยกรรมระบบ Web GIS

กรอบการนาเสนอ

wmsClient Frameworks

wms

Response image/png

Server Frameworks‐MapServer (CGI)

Response  image/png

Data Exchange

เครองมอทใชในการพฒนา Web GIS Engines

Minnesota MapServer เปนชดซอฟทแวรฟรเปดรหส ใชในการพฒนาระบบสารสนเทศภมศาสตร ผาน

ระบบเครอขายอนเตอรเนต ถกพฒนาขนดวยภาษา “C” ปจจบนมการนาเอามาตรฐาน W b M S ifi ti (WMS)ระบบเครอขายอนเตอรเนต ถกพฒนาขนดวยภาษา “C” ปจจบนมการนาเอามาตรฐาน Web Map Specification(WMS)

Interface Standard ทนยามโดย OpenGIS Consortium (OGC) และ ISO มาใช ทาให Minnesota MapServer มบทบาท

และไดรบการยอมรบอยางกวางขวาง

การสราง Map File (MapServer)

Map file structure

ตวอยางการสราง Map File อยางงาย

General settings Map file (*.map)MAP

NAME ThaiLandSTATUS ONSIZE 500 500IMAGETYPE PNGEXTENT 99.68743 13.58827 100.51371 14.23020WEB

IMAGEPATH '/ms4w/tmp/ms_tmp/'IMAGEURL '/ms tmp/'

Data Property

IMAGEURL /ms_tmp/METADATA

'wms_onlineresource' 'http://127.0.0.1/cgi-bin/mapserv.exe?''wms_srs' 'EPSG:4326''wms_server_version' '1.3.0''wms_format' 'image/png''wms_feature_info_mime_type' 'text/html'

ENDENDLAYER

NAME provinceTYPE polygonTYPE polygonDATA “c:/shapefile_path/province.shp”STATUS DEFAULTCLASS

NAME "Province"STYLE

OUTLINECOLOR 0 0 0OUTLINECOLOR 0 0 0COLOR 255 255 255SIZE 30WIDTH 3

END ENDPROJECTION

"proj=latlong" "ellps=WGS84" END

ENDEND

Plugin ชวยสราง MapFile อยางงาย

สราง Mapfile โดยใช Plugin Export to MapServer

ทดสอบการทางานของ Map Fileโดยรองขอขอมลผาน Web Browser

http://www.thaiwaterplan.org/cgi‐bin/np mapserv.exe?

URL: Request components

p // p g/ g / p_ players=province&request=getmap&service=wms&format=image/jpegg /jp g&version=1.3.0&width=300&height=500&srs=EPSG:4326&BBOX=97.3443,5.61277,105.637,20.4649, , ,&styles=,&transparent=true

http://www.thaiwaterplan.org/cgi-bin/np_mapserv.exe?&SERVICE=WMS

URL: Request components

&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities

URL: Request components

http://www.thaiwaterplan.org/cgi-bin/np_mapserv.exe?layers=province&request=getmap&service=wms&format=image/jpeg&format image/jpeg&version=1.3.0&width=300&height=500&srs=EPSG:4326&BBOX=97.3443,5.61277,105.637,20.4649&styles=&styles=,&transparent=true

http://127.0.0.1/cgi-bin/np_mapserv.exe?&LAYERS i&LAYERS=province&REQUEST=GetFeatureInfo&SERVICE=WMS&FORMAT=image/png&FORMAT image/png&STYLES=&HEIGHT=500&WIDTH=500&VERSION=1.1.1&SRS EPSG 4326&SRS=EPSG:4326&BBOX=93.375,3.875,111.625,22.125&TRANSPARENT=TRUE&EXCEPTIONS=application/vnd.ogc.se xmlpp g _&Query_Layers=province&imgx=185&imgy=226&mapxy=100 1275+13 876&mapxy=100.1275+13.876

ทดสอบการใหบรการ WMS โดยรองขอขอมลผาน Quantum GIS

1

http://www.thaiwaterplan.org/cgi‐bin/np_mapserv.exe?

23

4

เปนการใชโปรแกรม Quantum GIS ในการเชอมตอ มลใน ป WMS โ ยใ ปม ม ม ยในโป มขอมลในรปแบบ WMS โดยใชปมเครองมอทมภายในโปรแกรม

ซงทาง www.thaiwaterplan.org ไดเปดใหบรการ

ขอมลเพอใชบรการจดการแหลงนา

ผลทดสอบการใหบรการ WMS (http://www.thaiwaterplan.org/cgi-bin/np_mapserv.exe?)

การใหบรการ “ภาพของแผนท” ทอานได เชน GIF PNG JPEG TIFF และอนๆ การใหบรการ “ภาพของแผนท” ทอานได เชน GIF, PNG, JPEG, TIFF และอนๆ

Openlayer 2.8  คออะไร ?

• เปน Application Programming Interface (API) ทชวยในการสราง Web Mapping Application

ทาใหการพฒนา Web ในการเผยแพรขอมล GIS งายมากขน

• เปน Open source Software ทผใชสามารถ Download มาใชไดฟร โดยไมมคาใชจาย ทาให

เครองมอดงกลาวนเปนทนยมสาหรบนกพฒนา Web GIS

• พฒนาโดยใชภาษา JavaScript / AJAX (Asynchronous JavaScript and XML) พฒนาโดยใชภาษา JavaScript / AJAX (Asynchronous JavaScript and XML)

• เหมาะสาหรบการเรมตนพฒนาระบบ Web GIS

นาลองใชดนะเนย

http://openlayers.org/http://openlayers.org/

หนาตาของ Openlayer 2.8

ทมา :

Openlayer ทาอะไรไดบาง ?

ผใชสามารถดตวอยางการพฒนา Web GIS ผานทางเวปไซต

h // l /d / l / เพอใชเปนแนวทางตอไปhttp://openlayers.org/dev/examples/ เพอใชเปนแนวทางตอไป

ดๆ ชอบๆๆ ๆ

รปแบบขอมลท Openlayer รองรบมาแลกเปลยนขอมลกนไหม

Plugin ชวยสราง Openlayer อยางงาย

1. Add Layer ทตองการแสดงผลบน Openlayer

2. แปลงรปแบบขอมลใหอยใน format ของ (*.kml) โดยใช Plugin OGR Layer Convertor

InputInput

OutputOutput

3. สราง Openlayer โดยใช OGR2Layer Plugin (Export to Openlayer)

กาหนดชอเวปหวเรอง

กาหนดทจดเกบไฟล ht l

กาหนดชอเวปหวเรอง

กาหนดขนาดกาหนดทจดเกบไฟล html กาหนดขนาด

กาหนด service ทขอใชบรการ

4. ตวอยาง Source Code จากการประมวลผลของ Plugin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>

titl OGR2L /titl<title>OGR2Layers</title><style>#map{width:400px;height:400px;}</style><script src="http://www.openlayers.org/api/2.6/OpenLayers.js"></script>p p p y g p p y j p<script type="text/javascript">

var mapfunction init(){

map = new OpenLayers.Map('map');var olwms = new OpenLayers Layer WMS( "OpenLayers WMS" ["http://labs metacarta com/wms/vmap0"]var olwms new OpenLayers.Layer.WMS( OpenLayers WMS , [ http://labs.metacarta.com/wms/vmap0 ],

{layers: "basic", format: "image/gif" } );map.addLayer(olwms);map.addLayer(new OpenLayers.Layer.GML("amphoe KML","amphoe.kml",

{format: OpenLayers.Format.KML}));l O L C t l L S it h ()var ls= new OpenLayers.Control.LayerSwitcher();

map.addControl(ls); ls.maximizeControl(); map.zoomToExtent(new OpenLayers.Bounds(99.4649895548,13.5148896009,100.879454684,14.3183727514))

};</script></head><body onload="init()"><h1>Province</h1><div id="map"></div><div id map ></div></body></html>

5. ผลลพธทไดจากการสราง Openlayer

จงหวดนครปฐมData Directory (*.html)y ( )

คณลกษณะของขอมลจาก XML Schema

<LineStyle>

<color>ff0000ff</color>

</LineStyle>

<PolyStyle>

<color>ff7fffff</color>

</PolyStyle>

5. การเชอมตอขอมลจาก Service ทเปดใหบรการ คอ http://www.thaiwaterplan.org/cgi-bin/np_mapserv.exe?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>

titl OGR2L /titl<title>OGR2Layers</title><style>#map{width:400px;height:400px;}</style><script src="http://www.openlayers.org/api/2.6/OpenLayers.js"></script>p p p y g p p y j p<script type="text/javascript">

var mapfunction init(){

map = new OpenLayers.Map('map');var olwms = new OpenLayers Layer WMS( "OpenLayers WMS" ["http://labs metacarta com/wms/vmap0"]var olwms new OpenLayers.Layer.WMS( OpenLayers WMS , [ http://labs.metacarta.com/wms/vmap0 ],

{layers: "basic", format: "image/gif" } );map.addLayer(olwms);map.addLayer(new OpenLayers.Layer.WMS("amphoe"," http://www.thaiwaterplan.org/cgi-bin/np_mapserv.exe?",

{layers: " amphoe", format: "image/png", visibility: false, transparent: true}, {isBaseLayer: false}));l O L C t l L S it h ()var ls= new OpenLayers.Control.LayerSwitcher();

map.addControl(ls); ls.maximizeControl(); map.zoomToExtent(new OpenLayers.Bounds(99.4649895548,13.5148896009,100.879454684,14.3183727514))

};</script></head><body onload="init()"><h1>Province</h1><div id="map"></div><div id map ></div></body></html>

6. ผลลพธทไดจากการเชอมตอ http://www.thaiwaterplan.org/cgi-bin/np_mapserv.exe?

จงหวดนครปฐม

Base Layer สามารถเลอก Service

จาก Source จากแหลงอนๆ

http://www.thaiwaterplan.org/cgi-bin/np_mapserv.exe

http://www.thaiwaterplan.org/cgi-bin/sk_mapserv.exe

http://www.thaiwaterplan.org/cgi-bin/ns_mapserv.exe

htt // th i t l / i bi / thttp://www.thaiwaterplan.org/cgi-bin/pt_mapserv.exe

จบการนาเสนอ