implementing web gis solutions using open source...
TRANSCRIPT
![Page 1: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/1.jpg)
เทคนคการใหบรการขอมลแผนท Web GIS โดยใช
ซอฟตแวรฟรรหสเปดซอฟตแวรฟรรหสเปด
Implementing Web GIS Solutions
using open source software
โครงการศนยวจยระบบการวางแผนจดการทรพยากรนา
เพอความมนคงระดบจงหวด
สทธนนท ทองใบ (นกวจยภมสารสนเทศ)( )
คณะวศวกรรมศาสตร จฬาลงกรณมหาวทยาลย
![Page 2: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/2.jpg)
ป วตถประสงคการนาเสนอ
1. นาเสนอรปแบบการใหบรการขอมลแผนท (WMS) แกกลมเครอขาย
2 อธบายหลกการพฒนา Web GIS เบองตน โดยใชซอฟตแวรฟรรหสเปด2. อธบายหลกการพฒนา Web GIS เบองตน โดยใชซอฟตแวรฟรรหสเปด
ไดแก Quantum GIS และ Openlayer API
ไ 3. กาหนดชองทางเขาถงขอมลแผนทรวมไปถงการแลกเปลยนขอมล
จาก www.thaiwaterplan.org หรอ Map service จากหนวยงานอนๆทเกยวของ
![Page 3: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/3.jpg)
สถาปตยกรรมระบบ Web GIS
กรอบการนาเสนอ
wmsClient Frameworks
wms
Response image/png
Server Frameworks‐MapServer (CGI)
Response image/png
Data Exchange
![Page 4: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/4.jpg)
เครองมอทใชในการพฒนา 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 มบทบาท
และไดรบการยอมรบอยางกวางขวาง
![Page 5: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/5.jpg)
การสราง Map File (MapServer)
Map file structure
![Page 6: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/6.jpg)
ตวอยางการสราง 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
![Page 7: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/7.jpg)
Plugin ชวยสราง MapFile อยางงาย
สราง Mapfile โดยใช Plugin Export to MapServer
![Page 8: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/8.jpg)
ทดสอบการทางานของ 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
![Page 9: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/9.jpg)
http://www.thaiwaterplan.org/cgi-bin/np_mapserv.exe?&SERVICE=WMS
URL: Request components
&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities
![Page 10: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/10.jpg)
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
![Page 11: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/11.jpg)
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
![Page 12: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/12.jpg)
ทดสอบการใหบรการ WMS โดยรองขอขอมลผาน Quantum GIS
1
http://www.thaiwaterplan.org/cgi‐bin/np_mapserv.exe?
23
4
เปนการใชโปรแกรม Quantum GIS ในการเชอมตอ มลใน ป WMS โ ยใ ปม ม ม ยในโป มขอมลในรปแบบ WMS โดยใชปมเครองมอทมภายในโปรแกรม
ซงทาง www.thaiwaterplan.org ไดเปดใหบรการ
ขอมลเพอใชบรการจดการแหลงนา
![Page 13: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/13.jpg)
ผลทดสอบการใหบรการ WMS (http://www.thaiwaterplan.org/cgi-bin/np_mapserv.exe?)
การใหบรการ “ภาพของแผนท” ทอานได เชน GIF PNG JPEG TIFF และอนๆ การใหบรการ “ภาพของแผนท” ทอานได เชน GIF, PNG, JPEG, TIFF และอนๆ
![Page 14: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/14.jpg)
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/
![Page 15: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/15.jpg)
หนาตาของ Openlayer 2.8
ทมา :
![Page 16: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/16.jpg)
Openlayer ทาอะไรไดบาง ?
ผใชสามารถดตวอยางการพฒนา Web GIS ผานทางเวปไซต
h // l /d / l / เพอใชเปนแนวทางตอไปhttp://openlayers.org/dev/examples/ เพอใชเปนแนวทางตอไป
ดๆ ชอบๆๆ ๆ
![Page 17: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/17.jpg)
รปแบบขอมลท Openlayer รองรบมาแลกเปลยนขอมลกนไหม
![Page 18: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/18.jpg)
Plugin ชวยสราง Openlayer อยางงาย
1. Add Layer ทตองการแสดงผลบน Openlayer
![Page 19: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/19.jpg)
2. แปลงรปแบบขอมลใหอยใน format ของ (*.kml) โดยใช Plugin OGR Layer Convertor
InputInput
OutputOutput
![Page 20: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/20.jpg)
3. สราง Openlayer โดยใช OGR2Layer Plugin (Export to Openlayer)
กาหนดชอเวปหวเรอง
กาหนดทจดเกบไฟล ht l
กาหนดชอเวปหวเรอง
กาหนดขนาดกาหนดทจดเกบไฟล html กาหนดขนาด
กาหนด service ทขอใชบรการ
![Page 21: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/21.jpg)
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>
![Page 22: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/22.jpg)
5. ผลลพธทไดจากการสราง Openlayer
จงหวดนครปฐมData Directory (*.html)y ( )
คณลกษณะของขอมลจาก XML Schema
<LineStyle>
<color>ff0000ff</color>
</LineStyle>
<PolyStyle>
<color>ff7fffff</color>
</PolyStyle>
![Page 23: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/23.jpg)
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>
![Page 24: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/24.jpg)
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
![Page 25: Implementing Web GIS Solutions using open source softwareproject-wre.eng.chula.ac.th/thai_waterplan/sites/default/docs/workshop... · วัตถปุประสงค การนําเสนอ](https://reader030.vdocuments.net/reader030/viewer/2022041211/5dd0f2ddd6be591ccb637b48/html5/thumbnails/25.jpg)
จบการนาเสนอ