Implement Web GIS with

UMN Map Server

นาย ชัยภัทร เนืองคํามา
Email: pk_a1977@hotmail.com , teddybeargis@gmail.com
Blog: http://emap.wordpress.com

ชัยภัทร เนื
องคํามา 1
Introduction
UMN Map Server เป็ นโปรแกรม Web GIS Engine ประเภท
Open source ที
เป็ นที
ยอมรับในการนํามาใช้พฒั นาระบบสารสนเทศ
่
ภูมิศาสตร์ผานเครื ่ นเตอร์เน็ต (Internet GIS) โดย พัฒนาขึS นตัS งแตปี่
อขายอิ
1994 มีผใู ้ ช้และผูพ้ ฒั นาจํานวนมากทัว
โลก ปั จจุบนั UMN Map Server
อยูภ่ ายใต้การสนับสนุนของ OSGEO

ชัยภัทร เนื
องคํามา 2
http://mapserver.gis.umn.edu/

ชัยภัทร เนื
องคํามา 3
Feature
- รองรับการแสดงผลแบบ Thematic mapping
ั ปแบบการจัดเกบข้
-สนับสนุนการทํางานกบรู ็ อมูลภูมิสารสนเทศชนิด
่ ผานทาง
ตางๆ ่ GDAL/OGR ทัS ง Vector, Raster และ Spatial Database
- รองรับการทํางานบนโปรโตคอลมาตรฐานของ OGC เชน่
WMS,WFS,WCS,GML,SLD,FE,SOS,KML
-รองรับการทํางานแบบ Tiling Image ตามมาตรฐาน TMS
-ฟี เจอร์การแสดงผลการสื บค้นข้อมูลราสเตอร์ การจัดการข้อมูลภาพ
ราสเตอร์
ชัยภัทร เนื
องคํามา 4
Feature
่
-รองรับการแสดงผล TrueType font และการ Label แบบตางๆ
- โหมดการทํางานกบั CRS แบบ On the Fly Projection ผานทาง
่
ไลบารี ของ Proj4
- สนับสนุนการทํางานแบบ Cascading Map Service
- คอมไพล์ดว้ ย C ทํางานแบบ CGI หรื อจะเลือกใช้แบบ Map Script
่ เชน่ C#, Python ,PHP, Java
ภาษาตางๆ
- อื
นๆอีกมากมาย
ชัยภัทร เนื
องคํามา 5
Map Server Framework

ชัยภัทร เนื
องคํามา 6
Map Server Framework

ชัยภัทร เนื
องคํามา 7
Map Server Component

ชัยภัทร เนื
องคํามา 8
Map Server Component

ชัยภัทร เนื
องคํามา 9
 Demo
Demonstrate WebGIS Application

ชัยภัทร เนื
องคํามา 10
 Atlas of Canada
ชัยภัทร เนื
องคํามา 11
Ischia Island, Italy

ชัยภัทร เนื
องคํามา 12
Interactive Map of the State of Santa Catarina - Brazil
ชัยภัทร เนื
องคํามา 13
Free public access to water data in France
ชัยภัทร เนื
องคํามา 14
Olympic National Park
ชัยภัทร เนื
องคํามา 15
Italian National Institute of Statistics

ชัยภัทร เนื
องคํามา 16
South East Atlantic Coastal Ocean
ชัยภัทร เนื
องคํามา
Observing System 17
Mapserver for Romanian Cultural Heritage
ชัยภัทร เนื
องคํามา 18
ชัยภัทร เนื
องคํามา 19
ชัยภัทร เนื
องคํามา 20
ชัยภัทร เนื
องคํามา 21
ชัยภัทร เนื
องคํามา 22
นีน้ องชาย มันไม่ ได้ ยากอย่ างทีคิด
!!!!!!
ชัยภัทร เนื
องคํามา 23
 STEP
ขัEนตอนการทํางาน

ชัยภัทร เนื
องคํามา 24
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 ขึS น Server ทํา load balancing )

ชัยภัทร เนื
องคํามา 25
 STEP 1
จัดเตรียมข้ อมลู

ชัยภัทร เนื
องคํามา 26
Implementation Step 1

่ S นข้อมูล
- รู ้ Map Projection ของแตละชั
่ S นข้อมูล
- รู ้ BBOX ของแตละชั
- ตรวจสอบความสมบูรณ์ของ
ไฟล์ขอ้ มูล

ชัยภัทร เนื
องคํามา 27
Implementation Step 1

ก่ อนจะเป็ น Web GIS ต้ องเป็ น Desktop GIS

เสี ยก่ อน เพราะฉะนัEนจงเปิ ดมันด้ วย QGIS

ชัยภัทร เนื
องคํามา 28
 STEP 2
Optimize ข้ อมลู

ชัยภัทร เนื
องคํามา 29
Implementation Step 2 : Optimize Raster

Color Index

Radio metric Depth

Image Compression

ชัยภัทร เนื
องคํามา 30
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
Pyramid

ชัยภัทร เนื
องคํามา 32
GDAL/OGR

่ ่
GDAL เป็ นไลบารี
ที
ใช้ในการจัดการข้อมูลราสเตอร์ในแมขาย
แผนที
(Map Server) สําหรับการแสดงผล การจําแนกกลุ่ม ตลอดจน
่ อมูลโดยเป็ นซอฟท์แวร์ในกลุ่มของ Open Source ซึ
ง
การแบงข้
สนับสนุนรู ปแบบไฟล์ต่างๆดังนีS JPEG2000, IMG, GeoTiff, DOQ,
ECW

ชัยภัทร เนื
องคํามา 33
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
 STEP 3
ติดตัEงโปรแกรม
Mapserver

ชัยภัทร เนื
องคํามา 35
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
Implementation Step 3 : Setup
1. ทําการคัดลอกโฟล์เดอร์ MS4W ไปวางไว้ที
D:/
2. เข้าไปที
folder --> D:\ ms4w Double Click ที
apache-
่ ภายใน MS4W
install.bat คอมพิวเตอร์จะทําการติดตัS งโปรแกรมตางๆ
Package

ชัยภัทร เนื
องคํามา 37
Implementation Step 3 : Setup

localhost

ชัยภัทร เนื
องคํามา 38
 STEP 4
Coding your mapfile

ชัยภัทร เนื
องคํามา 39
Implementation Step 4 : Mapfile Class Object

ชัยภัทร เนื
องคํามา 40
Implementation Step 4 : Find Project Extent

-231930.03916 ,459597.455047, 1673801.76813 ,2365717.07906

ชัยภัทร เนื
องคํามา 41
# -------------------------------- 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
# -------------------------------- 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
# -------------------------------- 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
# -------------------------------- 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
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
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
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
Implementation Step 4 : Config WMS Service
METADATA
WMS_TITLE "Thai Boundary"
WMS_ABSTRACT "Thailand Boundary"
WMS_SRS "EPSG:32647"
END # metadata

ชัยภัทร เนื
องคํามา 49
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
 STEP 5
Testing Map Service

ชัยภัทร เนื
องคํามา 51
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
Implementation Step 5

ชัยภัทร เนื
องคํามา 53
 STEP 6
Create Web Application

ชัยภัทร เนื
องคํามา 54
Implementation Step 6 : Application
WebGIS Application ที
ทาํ งานแบบอาศัย web browser ทัว
ไป
่ ยว โดยจะอาศัยความสามารถในการประมวลผลของแม่
เพียงอยางเดี
่ นหลัก ผูใ้ ช้ไมจํ่ าเป็ นที
จะต้องติดตัS งโปรแกรมหรื อ plug-in ใด
ขายเป็
เพิม
เติม ปั จจุบนั มีให้เลือกอยูม่ ากมายเชน่ Ka-map ,P.mapper,
Openlayers โดยรู ปแบบการทํางานจะเป็ นลักษณะของ AJAX Based
่ อมีการแสดงผลข้อมูลภาพแผนที
จากตัวแมขาย
กลาวคื ่ ่ และสามารถ
สื บค้นและแสดงข้อมูล attribute ได้

ชัยภัทร เนื
องคํามา 55
Implementation Step 6 : P.mapper
P.mapper เป็ น Open source Web Mapping Framework ที
น่าใช้
่ ั
งานอีกตัวหนึ
ง โดยพัฒนาขึS นจากภาษา PHP ทํางานเชื
อมตอกบ
Mapserver ในโหมด PHPMapscript สําหรับตัว Web Application เป็ น
AJAX Based บน Jqury Framework
่ ่
การใช้ Web Mapping Feamework มีขอ้ ดีคืองายตอการพัฒนา
แตข้่ อเสี ยกมี็ ไมแพ้
่ กนคื
ั อความยุง่ ยากในการขยายหรื อพัฒนาฟังกชั์ น

เพิม
เติม

ชัยภัทร เนื
องคํามา 56
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
 5 นาทีสําหรับ configuration !!!

ชัยภัทร เนื
องคํามา 58
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
Implementation Step 6 : Pmapper
้
4. ไปที
โฟเดอร์ config ใต้ pmapper แกไขไฟล์
config_default.xml

ชัยภัทร เนื
องคํามา 60
Implementation Step 6 : Setup XML Config
ํ
กาหนด mapfile

ํ
กาหนด Layer ที
จะอยูใ่ น category ตางๆ
่
ํ
กาหนด Layer ทัS งหมดที
จะโหลดเข้ามาจาก Mapfile

ํ
กาหนด Layer ทัS งหมดที
จะแสดงผลตอนเริ
ม

ชัยภัทร เนื
องคํามา 61
Implementation Step 6 : Pmapper

ชัยภัทร เนื
องคํามา 62
Implementation Step 6 : Pmapper

ชัยภัทร เนื
องคํามา 63
Implementation Step 6 : Setup XML Config

ํ
กาหนดชื
อ Field ที
ตอ้ งการค้นหา

ํ
กาหนดชื
อ Field ที
ตอ้ งการค้นหา

ชัยภัทร เนื
องคํามา 64
Implementation Step 6 : Pmapper

เครื
องมือค้นหาข้อมูลแบบ Suggest key

เครื
องมือค้นหาข้อมูลแบบปกติ
ผลลัพธ์แบบตาราง
ชัยภัทร เนื
องคํามา 65
Implementation Step 6 : Setup XML Config

ยังเนียนไม่ พอ
ต้ องการทีดีกว่ านี.E .....

ชัยภัทร เนื
องคํามา 66
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
BOOK

ชัยภัทร เนื
องคํามา 68
 FINISH ….
ชัยภัทร เนื
องคํามา 69