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