webgis

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

Implement Web GIS with UMN Map Server

นาย ชัยภทัร เนื องคาํมาEmail: [email protected] , [email protected]

Blog: http://emap.wordpress.com


Introduction

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


http://mapserver.gis.umn.edu/


Feature

- รองรับการแสดงผลแบบ Thematic mapping

-สนบัสนุนการทาํงานกบรูปแบบการจดัเกบขอ้มลูภูมิสารสนเทศชนิดั ็ตางๆ่ ผานทาง่ GDAL/OGR ทงัS Vector, Raster และ Spatial Database

- รองรับการทาํงานบนโปรโตคอลมาตรฐานของ OGC เชน่ WMS,WFS,WCS,GML,SLD,FE,SOS,KML

-รองรับการทาํงานแบบ Tiling Image ตามมาตรฐาน TMS

-ฟีเจอร์การแสดงผลการสืบคน้ขอ้มลูราสเตอร์ การจดัการขอ้มลูภาพราสเตอร์


Feature

-รองรับการแสดงผล TrueType font และการ Label แบบตางๆ่

- โหมดการทาํงานกบั CRS แบบ On the Fly Projection ผานทาง่ ไลบารีของ Proj4

- สนบัสนุนการทาํงานแบบ Cascading Map Service

- คอมไพลด์ว้ย C ทาํงานแบบ CGI หรือจะเลือกใชแ้บบ Map Script ภาษาตางๆ่ เชน่ C#, Python ,PHP, Java

- อืนๆอีกมากมาย


Map Server Framework


Map Server Component


DemoDemonstrate WebGIS Application


Atlas of Canada


Ischia Island, Italy

ชยัภทัร เนืองคาํมา 13Interactive Map of the State of Santa Catarina - Brazil

ชยัภทัร เนืองคาํมา 14Free public access to water data in France

ชยัภทัร เนืองคาํมา 15Olympic National Park


Italian National Institute of Statistics


South East Atlantic Coastal Ocean

Observing System

ชยัภทัร เนืองคาํมา 18Mapserver for Romanian Cultural Heritage


นี น้องชาย มนัไม่ได้ยากอย่างที คดิ !!!!!!


STEP

ขัEนตอนการทาํงาน


Implementation Step

1. Prepare Geospatial Data (เตรียมขอ้มูล)2. Manipulate Geospatial Data (Optimize ขอ้มูล)3. Setup Mapserver4. Create Mapfile configuration (เขียน code สาํหรับ Mapfile)5. Test Service (ทดสอบการทาํงานของ Mapserver)6. Develop Web Application (HTML+JavaScript,AJAX)7. Test Application (Upload ขึนS Server ทาํ load balancing )


STEP 1

จดัเตรียมข้อมลู


Implementation Step 1

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



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


STEP 2

Optimize ข้อมลู


� Color Index

� Radio metric Depth

� Image Compression

Implementation Step 2 : Optimize Raster


� External Tiling

� Internal Tiling

11101001 10101001 10101001

10001001 10101001 10101001

11101001 10101001 10101001

10001001 10101001 10101001

1110100111101001 1110100111101001

1110100100101001

8 bit

16 bit

Tiling


Pyramid


GDAL/OGR

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


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


STEP 3

ตดิตัEงโปรแกรม Mapserver


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



1. ทาํการคดัลอกโฟลเ์ดอร์ MS4W ไปวางไวท้ี D:/2. เขา้ไปที folder --> D:\ ms4w Double Click ที apache-

install.bat คอมพิวเตอร์จะทาํการติดตงัโปรแกรมตางๆS ่ ภายใน MS4W Package



localhost


STEP 4

Coding your mapfile


Implementation Step 4 : Mapfile Class Object


Implementation Step 4 : Find Project Extent

-231930.03916 ,459597.455047, 1673801.76813 ,2365717.07906


# -------------------------------- Start Mapfile -------------------------------------------MAP

NAME "Thai" # ประกาศชื อ เริ มต้นของภาพ BitmapSTATUS ON # กาํหนดสถานะให้สามารถมองเห็นได้SIZE 600 420 # กาํหนดขนาดของภาพ BitmapIMAGECOLOR 255 255 255 # กาํหนดสี Background ของแผนที FONTSET "Fonts/fonts1.list" # กาํหนด Font IMAGETYPE PNG # กาํหนดชนิดของภาพ BitmapEXTENT -231930.03916 459597.455047 1673801.76813 2365717.07906TEMPLATEPATTERN "printable.html|loader.html“ # กาํหนดรปแบบของู TEMPLATESHAPEPATH "data" # กาํหนด Folder ที เกบ็ ข้อมลู Shapefile


# -------------------------------- Start Web object -------------------------------------------WEB

IMAGEPATH "/ms4w/tmp/ms_tmp/“ # กาํหนด Path ของ ภาพ BitmapIMAGEURL "/ms_tmp/" # กาํหนด location ของ ภาพ Bitmap TEMPLATE "printable.html" # กาํหนด HTML Template ที แสดงแผนที METADATA # ระบุ Metadata ของข้อมลตามู มาตราฐาน WMS

WMS_TITLE "ThaiMap"WMS_ABSTRACT "ThaiMap"WMS_ACCESSCONSTRAINTS noneWMS_SRS "EPSG:4326"

ENDEND #WEB


# -------------------------------- Start Projection object -------------------------------------------PROJECTION

"init=epsg:32647" # Projection UTM Zone 47END

# -------------------------------- Start Legend object -------------------------------------------LEGEND

STATUS ON # กาํหนดสถานะการมองเห็นของ LEGENDPOSITION UL # กาํหนดตาํแหน่งKEYSIZE 18 12 # กาํหนดขนาด

LABEL # กาํหนดรปแบบอกัษรูTYPE BITMAPSIZE MEDIUMCOLOR 0 0 89

ENDEND # Legend


# -------------------------------- Start Reference object -------------------------------------------REFERENCE

STATUS ON # กาํหนดสถานะการมองเห็นของ ReferenceIMAGE graphics/clearmap.gif # กาํหนดPath ภาพSIZE 150 128 # กาํหนดขนาดExtent -231930.03916 459597.455047 1673801.76813 2365717.07906 # กาํหนด ExtentCOLOR -1 -1 -1 # กาํหนดสีOUTLINECOLOR 255 0 0 # กาํหนดสีของเส้นขอบ

END# -------------------------------- Query object -------------------------------------------QUERYMAP

STATUS ONSTYLE SELECTED # กาํหนดรปแบบของการู QueryCOLOR 255 128 0 # กาํหนดสีของ Feature ที ถกทําการเลอืกู

END


LAYERNAME "Thai" # ชื อของ LayerSTATUS DEFAULT # กาํหนดสถานะเริ มต้นDATA 'Thai/thai' # Path ที เกบ็ข้อมลูTYPE LINE # ชนิดของ LayerUNITS METERS # หน่วยของระยะทางPROJECTION # โปรเจคชั นของ Layer

"init=epsg:32647"ENDMETADATA

WMS_TITLE "Thai Boundary"WMS_ABSTRACT "Thailand Boundary"WMS_SRS "EPSG:32647"

END # metadataCLASS # ชนิดของ Class ที แสดงข้อมลู กราฟฟิก

NAME "thai" # ชื อของ ClassCOLOR 255 255 0 # สีSIZE 2 # ขนาดของเส้น

ENDEND # layerEND


Implementation Step 4 : Add Point LayerLAYER # Layer village

NAME villageTYPE POINTSTATUS OFFDATA "Thai/village"

PROJECTION"init=epsg:32647"

ENDMETADATA

DESCRIPTION "village"END # metadata

CLASS #1NAME "village"

STYLESYMBOL 'circle'COLOR 255 0 200SIZE 5

ENDEND # CLASS

END # LayerEND


Implementation Step 4 : Add Raster LayerLAYER

NAME orthoTYPE RASTERDATA 'Ortho_image/bangkok.ecw'STATUS OFFPROJECTION

"init=epsg:32647"ENDMETADATA

DESCRIPTION "Ortho Pohoto"END # metadata

END


Implementation Step 4 : Config WMS ServiceMETADATA

WMS_TITLE "Thai Boundary"WMS_ABSTRACT "Thailand Boundary"WMS_SRS "EPSG:32647"

END # metadata


Implementation Step 4 : Add WMS LayerLAYER # MODIS WMS map from JPL...CONNECTIONTYPE WMSCONNECTION "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


STEP 5

Testing Map Service



http://localhost/cgi-bin/mapserv.exe?map=../htdocs/mapserv/thai250k.map&SERVICE=WMS &VERSION=1.1.1&REQUEST=GetMap&layers=province,thai&format=jpeg


STEP 6

Create Web Application


Implementation Step 6 : Application

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


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 มีขอ้ดีคืองายตอการพฒันา่ ่ แตขอ้เสียกมีไมแพก้นคือความยงุยากในการขยายหรือพฒันาฟังกชนั่ ็ ่ ั ่ ์ เพิมเติม


Implementation Step 6 : p.mapper features

DHTML (DOM)zoom/pan interface with mouse wheel, keyboard keys, slider, and reference mapQuery functionsidentify, select, searchQuery results displaywith database joins and hyperlinksPrint functionsHTML and PDFConfigurationfunctions, behaviourand layout via xml


5 นาทสีําหรับ configuration !!!


Implementation Step 6 : Pmapper

1. ดาวน์โหลด Pmapper ที http://pmapper.sourceforge.net2. แตกไฟล ์Pmapper ไปที htdoc หรือ WWW3. ทดลอง run demo application

http://127.0.0.1/pmapper4/pmapper-4/map.phtml



4. ไปทีโฟเดอร์ config ใต ้pmapper แกไขไฟล์้ config_default.xml


Implementation Step 6 : Setup XML Config

กาหนดํ Layer ทีจะอยใูน่ category ตางๆ่

กาหนดํ Layer ทงัหมดทีจะโหลดเขา้มาจากS Mapfile

กาหนดํ mapfile

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



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

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



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

เครืองมือคน้หาขอ้มลูแบบปกติ ผลลพัธ์แบบตาราง



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


Implementation Step 6 : Pmapper Hack

เมือตอ้งการจะปรับปรุงหรือพฒันาอะไรเพมิเติมนอกจากที Pmapper Frame Work เตรียมไวใ้หส้ามารถทาํไดใ้นรูปแบบการเขียนโปรแกรมใหมโดย่ extend Class เพิมเติมจาก core module แตสิงที่ จะตอ้งมีคือ

1. เขียนโปรแกรมแบบ PHP OOP ได้2. เขียนโปรแกรม JavaScript แบบ OOP ได้3. รู้ AJAX4. เขา้ใจ XML ,CSS5. มีความอดทน


BOOK


FINISH ….

webgis

Technology