WebGIS
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

WebGIS

on

  • 6,215 views

 

Statistics

Views

Total Views
6,215
Views on SlideShare
6,136
Embed Views
79

Actions

Likes
1
Downloads
198
Comments
1

5 Embeds 79

http://blog4our.blogspot.com 50
http://www.slideshare.net 26
http://translate.googleusercontent.com 1
http://blog4our.blogspot.co.at 1
http://blog4our.blogspot.in 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • hi iam getting problem in installing map server application in Ms4w
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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