Ads 468x60px

วันจันทร์ที่ 2 พฤษภาคม พ.ศ. 2554

WebGIS - Presentation Transcript

WebGIS
View more presentations from thailand

 http://www.slideshare.net/pkgis/webgis


WebGIS - Presentation Transcript

  1. Implement Web GIS with UMN Map Server นาย ชัยภัทร เนืองคํามา Email: pk_a1977@hotmail.com , teddybeargis@gmail.com Blog: http://emap.wordpress.com ชัยภัทร เนืองคํามา 1
  2. Introduction UMN Map Server เป็ นโปรแกรม Web GIS Engine ประเภท Open source ทีเป็ นทียอมรับในการนํามาใช้พฒนาระบบสารสนเทศ ั ่ ่ ่ ภูมิศาสตร์ผานเครื อขายอินเตอร์เน็ต (Internet GIS) โดย พัฒนาขึนตังแตปี 1994 มีผใช้และผูพฒนาจํานวนมากทัวโลก ปั จจุบน UMN Map Server ู้ ้ ั ั ่ อยูภายใต้การสนับสนุนของ OSGEO ชัยภัทร เนืองคํามา 2
  3. http://mapserver.gis.umn.edu/ ชัยภัทร เนืองคํามา 3
  4. Feature - รองรับการแสดงผลแบบ Thematic mapping ั ็ -สนับสนุนการทํางานกบรู ปแบบการจัดเกบข้อมูลภูมิสารสนเทศชนิด ่ ่ ตางๆ ผานทาง GDAL/OGR ทัง Vector, Raster และ Spatial Database ่ - รองรับการทํางานบนโปรโตคอลมาตรฐานของ OGC เชน WMS,WFS,WCS,GML,SLD,FE,SOS,KML -รองรับการทํางานแบบ Tiling Image ตามมาตรฐาน TMS -ฟี เจอร์การแสดงผลการสื บค้นข้อมูลราสเตอร์ การจัดการข้อมูลภาพ ราสเตอร์ ชัยภัทร เนืองคํามา 4
  5. Feature ่ -รองรับการแสดงผล TrueType font และการ Label แบบตางๆ ั ่ - โหมดการทํางานกบ CRS แบบ On the Fly Projection ผานทาง ไลบารี ของ Proj4 - สนับสนุนการทํางานแบบ Cascading Map Service - คอมไพล์ดวย C ทํางานแบบ CGI หรื อจะเลือกใช้แบบ Map Script ้ ่ ่ ภาษาตางๆ เชน C#, Python ,PHP, Java - อืนๆอีกมากมาย ชัยภัทร เนืองคํามา 5
  6. Map Server Framework ชัยภัทร เนืองคํามา 6
  7. Map Server Framework ชัยภัทร เนืองคํามา 7
  8. Map Server Component ชัยภัทร เนืองคํามา 8
  9. Map Server Component ชัยภัทร เนืองคํามา 9
  10. Demo Demonstrate WebGIS Application ชัยภัทร เนืองคํามา 10
  11. Atlas of Canada ชัยภัทร เนืองคํามา 11
  12. Ischia Island, Italy ชัยภัทร เนืองคํามา 12
  13. Interactive Map of the State of Santa Catarina - Brazil ชัยภัทร เนืองคํามา 13
  14. Free public access to water data in France ชัยภัทร เนืองคํามา 14
  15. Olympic National Park ชัยภัทร เนืองคํามา 15
  16. Italian National Institute of Statistics ชัยภัทร เนืองคํามา 16
  17. South East Atlantic Coastal Ocean Observing System เนืองคํามา ชัยภัทร 17
  18. Mapserver for Romanian Cultural Heritage ชัยภัทร เนืองคํามา 18
  19. ชัยภัทร เนืองคํามา 19
  20. ชัยภัทร เนืองคํามา 20
  21. ชัยภัทร เนืองคํามา 21
  22. ชัยภัทร เนืองคํามา 22
  23. นีน้ องชาย มันไม่ ได้ ยากอย่ างทีคิด !!!!!! ชัยภัทร เนืองคํามา 23
  24. STEP ขันตอนการทํางาน ชัยภัทร เนืองคํามา 24
  25. Implementation Step 1. Prepare Geospatial Data (เตรี ยมข้อมูล) 2. Manipulate Geospatial Data (Optimize ข้อมูล) 3. Setup Mapserver 4. Create Mapfile configuration (เขียน code สําหรับ Mapfile) 5. Test Service (ทดสอบการทํางานของ Mapserver) 6. Develop Web Application (HTML+JavaScript,AJAX) 7. Test Application (Upload ขึน Server ทํา load balancing ) ชัยภัทร เนืองคํามา 25
  26. STEP 1 จัดเตรียมข้ อมล ู ชัยภัทร เนืองคํามา 26
  27. Implementation Step 1 ่ - รู ้ Map Projection ของแตละชันข้อมูล ่ - รู ้ BBOX ของแตละชันข้อมูล - ตรวจสอบความสมบูรณ์ของ ไฟล์ขอมูล้ ชัยภัทร เนืองคํามา 27
  28. Implementation Step 1 ก่ อนจะเป็ น Web GIS ต้ องเป็ น Desktop GIS เสี ยก่ อน เพราะฉะนันจงเปิ ดมันด้ วย QGIS ชัยภัทร เนืองคํามา 28
  29. STEP 2 Optimize ข้ อมล ู ชัยภัทร เนืองคํามา 29
  30. Implementation Step 2 : Optimize Raster Color Index Radio metric Depth Image Compression ชัยภัทร เนืองคํามา 30
  31. Tiling External Tiling Internal Tiling 8 bit 11101001 10101001 10101001 1110100111101001 1110100111101001 10001001 10101001 10101001 1110100100101001 11101001 10101001 10101001 10001001 10101001 10101001 ชัยภัทร เนืองคํามา 31 16 bit
  32. Pyramid ชัยภัทร เนืองคํามา 32
  33. GDAL/OGR ่ ่ GDAL เป็ นไลบารี ทีใช้ในการจัดการข้อมูลราสเตอร์ในแมขาย แผนที (Map Server) สําหรับการแสดงผล การจําแนกกลุ่ม ตลอดจน การแบงข้อมูลโดยเป็ นซอฟท์แวร์ในกลุ่มของ Open Source ซึ ง ่ สนับสนุนรู ปแบบไฟล์ต่างๆดังนี JPEG2000, IMG, GeoTiff, DOQ, ECW ชัยภัทร เนืองคํามา 33
  34. GDAL/OGR - gdal_translate : Compress, Reformat - gdaladdo : Add overviews to a file. - gdalwarp : Warp an image into a new coordinate system. - gdaltindex : Build a MapServer raster tileindex ชัยภัทร เนืองคํามา 34
  35. STEP 3 ติดตังโปรแกรม Mapserver ชัยภัทร เนืองคํามา 35
  36. Implementation Step 3 : Setup •Download the Source Code - http://mapserver.gis.umn.edu/download •Compile the Source Code - http://mapserver.gis.umn.edu/docs/howto/compiling_on_unix - http://mapserver.gis.umn.edu/docs/howto/win32_compiling •Download Pre-compiled Binary Packages - MS4W for Windows - FGS for Linux - FWTools: http://fwtools.maptools.org/windows-main.html ชัยภัทร เนืองคํามา 36
  37. Implementation Step 3 : Setup 1. ทําการคัดลอกโฟล์เดอร์ MS4W ไปวางไว้ที D:/ 2. เข้าไปที folder --> D: ms4w Double Click ที apache- ่ install.bat คอมพิวเตอร์จะทําการติดตังโปรแกรมตางๆ ภายใน MS4W Package ชัยภัทร เนืองคํามา 37
  38. Implementation Step 3 : Setup localhost ชัยภัทร เนืองคํามา 38
  39. STEP 4 Coding your mapfile ชัยภัทร เนืองคํามา 39
  40. Implementation Step 4 : Mapfile Class Object ชัยภัทร เนืองคํามา 40
  41. Implementation Step 4 : Find Project Extent -231930.03916 ,459597.455047, 1673801.76813 ,2365717.07906 ชัยภัทร เนืองคํามา 41
  42. # -------------------------------- Start Mapfile ------------------------------------------- MAP NAME "Thai" # ประกาศชือ เริมต้ นของภาพ Bitmap STATUS ON # กําหนดสถานะให้ สามารถมองเห็นได้ SIZE 600 420 # กําหนดขนาดของภาพ Bitmap IMAGECOLOR 255 255 255 # กําหนดสี Background ของแผนที FONTSET "Fonts/fonts1.list" # กําหนด Font IMAGETYPE PNG # กําหนดชนิดของภาพ Bitmap EXTENT -231930.03916 459597.455047 1673801.76813 2365717.07906 TEMPLATEPATTERN "printable.html|loader.html“ # กําหนดรปแบบของTEMPLATE ู SHAPEPATH "data" # กําหนด Folder ทีเก็บ ข้ อมล Shapefile ู ชัยภัทร เนืองคํามา 42
  43. # -------------------------------- Start Web object ------------------------------------------- WEB IMAGEPATH "/ms4w/tmp/ms_tmp/“ # กําหนด Path ของ ภาพ Bitmap IMAGEURL "/ms_tmp/" # กําหนด location ของ ภาพ Bitmap TEMPLATE "printable.html" # กําหนด HTML Template ทีแสดงแผนที METADATA # ระบุ Metadata ของข้ อมลตามมาตราฐาน WMS ู WMS_TITLE "ThaiMap" WMS_ABSTRACT "ThaiMap" WMS_ACCESSCONSTRAINTS none WMS_SRS "EPSG:4326" END END #WEB ชัยภัทร เนืองคํามา 43
  44. # -------------------------------- Start Projection object ------------------------------------------- PROJECTION "init=epsg:32647" # Projection UTM Zone 47 END # -------------------------------- Start Legend object ------------------------------------------- LEGEND STATUS ON # กําหนดสถานะการมองเห็นของ LEGEND POSITION UL # กําหนดตําแหน่ ง KEYSIZE 18 12 # กําหนดขนาด LABEL # กําหนดรปแบบอักษร ู TYPE BITMAP SIZE MEDIUM COLOR 0 0 89 END END # Legend ชัยภัทร เนืองคํามา 44
  45. # -------------------------------- Start Reference object ------------------------------------------- REFERENCE STATUS ON # กําหนดสถานะการมองเห็นของ Reference IMAGE graphics/clearmap.gif # กําหนดPath ภาพ SIZE 150 128 # กําหนดขนาด Extent -231930.03916 459597.455047 1673801.76813 2365717.07906 # กําหนด Extent COLOR -1 -1 -1 # กําหนดสี OUTLINECOLOR 255 0 0 # กําหนดสี ของเส้ นขอบ END # -------------------------------- Query object ------------------------------------------- QUERYMAP STATUS ON STYLE SELECTED # กําหนดรปแบบของการ Query ู COLOR 255 128 0 # กําหนดสี ของ Feature ทีถกทําการเลือก ู END ชัยภัทร เนืองคํามา 45
  46. LAYER NAME "Thai" # ชือของ Layer STATUS DEFAULT # กําหนดสถานะเริมต้ น DATA 'Thai/thai' # Path ทีเก็บข้ อมล ู TYPE LINE # ชนิดของ Layer UNITS METERS # หน่ วยของระยะทาง PROJECTION # โปรเจคชันของ Layer "init=epsg:32647" END METADATA WMS_TITLE "Thai Boundary" WMS_ABSTRACT "Thailand Boundary" WMS_SRS "EPSG:32647" END # metadata CLASS # ชนิดของ Class ทีแสดงข้ อมลกราฟฟิ ก ู NAME "thai" # ชือของ Class COLOR 255 255 0 # สี SIZE 2 # ขนาดของเส้ น END END # layer ชัยภัทร เนืองคํามา 46 END
  47. Implementation Step 4 : Add Point Layer LAYER # Layer village NAME village TYPE POINT STATUS OFF DATA "Thai/village" PROJECTION "init=epsg:32647" END METADATA DESCRIPTION "village" END # metadata CLASS #1 NAME "village" STYLE SYMBOL 'circle' COLOR 255 0 200 SIZE 5 END END # CLASS END # LayerEND ชัยภัทร เนืองคํามา 47
  48. Implementation Step 4 : Add Raster Layer LAYER NAME ortho TYPE RASTER DATA 'Ortho_image/bangkok.ecw' STATUS OFF PROJECTION "init=epsg:32647" END METADATA DESCRIPTION "Ortho Pohoto" END # metadata END ชัยภัทร เนืองคํามา 48
  49. Implementation Step 4 : Config WMS Service METADATA WMS_TITLE "Thai Boundary" WMS_ABSTRACT "Thailand Boundary" WMS_SRS "EPSG:32647" END # metadata ชัยภัทร เนืองคํามา 49
  50. Implementation Step 4 : Add WMS Layer LAYER # MODIS WMS map from JPL ... CONNECTIONTYPE WMS CONNECTION "http://wms.jpl.nasa.gov/wms.cgi?" METADATA "wms_srs" "EPSG:4326" "wms_name" "BMNG" "wms_server_version" "1.1.1" "wms_format" "image/jpeg" "wms_style" "Aug" END ... END ชัยภัทร เนืองคํามา 50
  51. STEP 5 Testing Map Service ชัยภัทร เนืองคํามา 51
  52. Implementation Step 5 http://localhost/cgi- bin/mapserv.exe?map=../htdocs/mapserv/thai250k.map&SERVICE=WMS &VERSION=1.1.1&REQUEST=GetMap&layers=province,thai&format=jpeg ชัยภัทร เนืองคํามา 52
  53. Implementation Step 5 ชัยภัทร เนืองคํามา 53
  54. STEP 6 Create Web Application ชัยภัทร เนืองคํามา 54
  55. Implementation Step 6 : Application WebGIS Application ทีทํางานแบบอาศัย web browser ทัวไป ่ เพียงอยางเดียว โดยจะอาศัยความสามารถในการประมวลผลของแม่ ่ ้ ่ ขายเป็ นหลัก ผูใช้ไมจําเป็ นทีจะต้องติดตังโปรแกรมหรื อ plug-in ใด ่ ่ เพิมเติม ปั จจุบนมีให้เลือกอยูมากมายเชน Ka-map ,P.mapper, ั Openlayers โดยรู ปแบบการทํางานจะเป็ นลักษณะของ AJAX Based ่ ่ ่ กลาวคือมีการแสดงผลข้อมูลภาพแผนทีจากตัวแมขาย และสามารถ สื บค้นและแสดงข้อมูล attribute ได้ ชัยภัทร เนืองคํามา 55
  56. Implementation Step 6 : P.mapper ่ P.mapper เป็ น Open source Web Mapping Framework ทีนาใช้ งานอีกตัวหนึง โดยพัฒนาขึนจากภาษา PHP ทํางานเชือมตอกบ ่ ั Mapserver ในโหมด PHPMapscript สําหรับตัว Web Application เป็ น AJAX Based บน Jqury Framework ่ ่ การใช้ Web Mapping Feamework มีขอดีคืองายตอการพัฒนา ้ ่ ็ ่ ั ่ แตข้อเสี ยกมีไมแพ้กนคือความยุงยากในการขยายหรื อพัฒนาฟังกชัน์ เพิมเติม ชัยภัทร เนืองคํามา 56
  57. Implementation Step 6 : p.mapper features DHTML (DOM) zoom/pan interface with mouse wheel, keyboard keys, slider, and reference map Query functions identify, select, search Query results display with database joins and hyperlinks Print functions HTML and PDF Configuration functions, behaviour and layout via xml ชัยภัทร เนืองคํามา 57
  58. 5 นาทีสําหรับ configuration !!! ชัยภัทร เนืองคํามา 58
  59. Implementation Step 6 : Pmapper 1. ดาวน์โหลด Pmapper ที http://pmapper.sourceforge.net 2. แตกไฟล์ Pmapper ไปที htdoc หรื อ WWW 3. ทดลอง run demo application http://127.0.0.1/pmapper4/pmapper-4/map.phtml ชัยภัทร เนืองคํามา 59
  60. Implementation Step 6 : Pmapper ้ 4. ไปทีโฟเดอร์ config ใต้ pmapper แกไขไฟล์ config_default.xml ชัยภัทร เนืองคํามา 60
  61. Implementation Step 6 : Setup XML Config ํ กาหนด mapfile ํ ่ ่ กาหนด Layer ทีจะอยูใน category ตางๆ ํ กาหนด Layer ทังหมดทีจะโหลดเข้ามาจาก Mapfile ํ กาหนด Layer ทังหมดทีจะแสดงผลตอนเริ ม ชัยภัทร เนืองคํามา 61
  62. Implementation Step 6 : Pmapper ชัยภัทร เนืองคํามา 62
  63. Implementation Step 6 : Pmapper ชัยภัทร เนืองคํามา 63
  64. Implementation Step 6 : Setup XML Config ํ กาหนดชือ Field ทีต้องการค้นหา ํ กาหนดชือ Field ทีต้องการค้นหา ชัยภัทร เนืองคํามา 64
  65. Implementation Step 6 : Pmapper เครื องมือค้นหาข้อมูลแบบ Suggest key เครื องมือค้นหาข้อมูลแบบปกติ ผลลัพธ์แบบตาราง ชัยภัทร เนืองคํามา 65
  66. Implementation Step 6 : Setup XML Config ยังเนียนไม่ พอ ต้ องการทีดีกว่ านี...... ชัยภัทร เนืองคํามา 66
  67. Implementation Step 6 : Pmapper Hack เมือต้องการจะปรับปรุ งหรื อพัฒนาอะไรเพิมเติมนอกจากที Pmapper Frame Work เตรี ยมไว้ให้สามารถทําได้ในรู ปแบบการเขียน ่ ่ โปรแกรมใหมโดย extend Class เพิมเติมจาก core module แตสิ งที จะต้องมีคือ 1. เขียนโปรแกรมแบบ PHP OOP ได้ 2. เขียนโปรแกรม JavaScript แบบ OOP ได้ 3. รู ้ AJAX 4. เข้าใจ XML ,CSS 5. มีความอดทน ชัยภัทร เนืองคํามา 67
  68. BOOK ชัยภัทร เนืองคํามา 68
  69. FINISH …. ชัยภัทร เนืองคํามา 69
เขียนโดย Blog4Our ที่ วันจันทร์, พฤษภาคม 02, 2554

0 ความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)