ขนแรกโหลดโปรแกรม Java 7 ตามสเปคเครอง (เครองนเปน 32 bit)

กด Download ทแถบสเขยว

กดตดตงคลกท Install >

รอตดตง เสรจแลวกด Close

ตวทสองใหโหลด Apache Tomcat

เลอก Download ตามสเปคเครอง

ท าการตดตงโปรแกรม Apache Tomcat คลกท Next >

คลก I Agree > Next

ใส User = admin , Pass = tomcat > Next > Next > Install

รอตดตง แลวกด Finish

ท าการทดสอบตว Tomcat โดยไปท Browser แลวพมพ localhost:8080 ในชอง Address Bar > Enter

ตอไปโหลด Geoserver

คลกท Nightly ใตแถบสเขยว

คลกท Web Archive

เมอได Geoserver มาแลว กท าการแตกไฟล

แลวน าไฟล Geoserver.war ไปไวท C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps

ท าการทดสอบ Geoserver โดยไปท Browser แลวพมพ localhost:8080/geoserver ในชอง Address Bar >

Enter ใส User = admin , Pass = geoserver

แลวจะไดดงภาพ

ตอไปโหลดโปรแกรม PostGIS

คลกท Download

คลกท Windows Downloads

คลกท PostgreSQL EDB binaries-only

คลกท PostgreSQL installers.

Download ตามสเปคเครอง

ท าการตดตง PostgreSQL คลก Next > Next > Next

ใส Pass = postgis , Re pass = postgis > Next

Port 5432 > Next > Next > Next

รอตดตง แลวกด Finish

กดท เลอก PostgreSQL… > Next

คลก + หนา Spatial Extension ตกถกหนาเวอรชนลาสด > Next > Next

รอโหลด

Next

I Agree

ตกถกหนา Create Spatial Database > Next

เลอกทเกบขอมล

ใส User = postgres , Pass = postgis > Next > Install

รอโหลด

กด Yes 3 ท แลวกด Close > Finish

ตอไปหาทเกบขอมลโดยไปท Folder GIS3_58 แลวสราง Folder รหสนสตไวขางใน

ตอไป ไปท Apache Tomcat > Java แลวพมพ -DGEOSERVER_DATA_DIR=D:\GIS3_58 ใน Java

Options: > Apply

จากนนไปทแถบ General > Stop > Start > OK

จากนนเปดโปรแกรม pgAdmin III ใส Pass = postgis > OK

จากนนใหท าการสราง Database ขนมาใหมดดยไปท Database คลกขวา New Database

ตงชอ GIS3_G1 > OK

เมอได Database มาแลว คลกท แวนขยาย SQL แลวพมพ CREATE EXTENSION POSTGIS; แลวกด

จากนนไปทรป จกซอว เลอก PostGIS Shapefile and DBF loader 2.2

Add File

เลอกไฟลทตองการ กด Open

ไปท Options… เปลยนจาก UTF-8 เปน TIS-620 > OK

Import แลวกากบาทปดไปไดเลย

เปดโปรแกรม QGIS คลกทรปชาง แลวกด New

Name = G1 , Host = localhost , Port = 5432 , Database = GIS3_G1 , SSL mode = allow , User = postgres ,

Pass = postgis คลกท Test Connect (ทดสอบการเชอมตอ) ตกหนา Save ทงสองอน แลวกด OK

แลวท าการเชอมตอกบ G1 ใส User และ Pass เลอกขอมลทงสตวแลวกด Add

ใสพกด EPSG:32647 ทกอน

เสรจแลวจะไดภาพแผนทมหาวทยาลยบรพาขนมา

ตอไปใหสราง Shapefile ขนมาใหม โดยไปท New Shapefile Layes…

Name = Name ใสพกด EPSG:32647 > Add to attributes list > OK

หาทเกบขอมล ตงชอ atm_g1 > Save

ตอไปคลกท และ แลวท าการสรางจด atm ใส id และ ชอ atm เมอครบทกจดแลวใหกด

ตอไปดบเบลคลกทชนขอมล atm_g1 > Style > Save Style > SLD File

ตอไปดบเบลคลกทชนขอมล building เปลยนจาก Single Symbol เปน Categorized

Column เลอกเปน Name > Classify > Style > Save Style > SLD File

ตอไปดบเบลคลกท boundary เลอกสทชอบ > Apply > Style > Save Style > SLD File

ตอไปใหน าไฟล atm_g1.sld เขา pgAdmin โดยไปท ไปทรป จกซอว เลอก PostGIS Shapefile and DBF

loader 2.2 > Add File เลอกไฟล atm กด Open ไปท Options… เปลยนจาก UTF-8 เปน TIS-620 > OK >

Import แลวกากบาทปดไปไดเลย แลวคลกขวาท Tables กด refresh จะได atm ขนมา

ตอไปไปท Geoserver > Workspaces > Add new workspaces

Name = Group1 , Namespace URI = G1_BUU ตกถก แลวกด Submit

ไปท Stores > Add new store

PostGIS – PostGIS Database

Data Source Name = G1_Data , dbtype = postgis , host = localhost , port = 5432 , database = GIS3_G1 ,

schema = public , user = postgres , pass = postgis > Save

ไปท boundary > Publish

ใสพกด 32647

คลกท Compute from native bounds > Save

ตอไปไปท Styles > Add new style

คลกเลอกไฟล boundary_g1.sld > Open

Upload > Preview > submit

Add new style > คลกเลอกไฟล building_g1.sld > Open > Upload > Preview > submit

Add new style > คลกเลอกไฟล atm_g1.sld > Open > Upload แกไขขอมลบรรทดท 11 – 22

เปนขอมลรปสญลกษณ atm ดงบรรทด 11 – 17

เราสามารถโหลดสญลกษณไดจาก iconfinder เลอกอนแรก

เมอเขามาหนานแลวใหพมพ atm

จากนนใหเลอก free แลวปรบขนาดใหเหลอ 16 เลอกรปทตองการแลวกด PNG

เมอไดรปแลวใหใหใสชอรปหลงแฟมแลวกด Validate > Preview > submit

กจะไดขอมลดงภาพ

จากนนไปท Layers > boundary

ไปท Publishing , Default Style = boundary_g1 แลวยายชนขอมล boundary_g1 จาก Available Styles ไปท

Selected Styles > Save

จากนนไปท Layer Preview > boundary_g1 > OpenLayers

จะไดรปขอบเขตมหาวทยาลยบรพาขนมา

จากนนไปท Layers > Add a new resource

เลอก Add layer from = Group1:G1_Data > atm > Publish

ใสคาพกด 32647

คลกท Compute from native bounds

จากนนไปท Publishing , Default Style = atm_g1 จากนนยายชนขอมล atm_g1 จาก Available Styles ไป

Selected Styles > Save

จากนนไปท Layer Preview > atm_g1 > OpenLayer

จะไดขอมลจด ATM ขนมา

จากนนไปท Layers > Add a new resource

เลอก Add layer from = Group1:G1_Data > building > Publish

ใสคาพกด 32647 แลวคลกท Compute from native bounds

จากนนไปท Publishing , Default Style = building_g1

จากนนยายชนขอมล building_g1 จาก Available Styles ไป Selected Styles > Save

จากนนไปท Layer Preview > building_g1 > OpenLayer

จะไดขอมลอาคารขนมา

จากนนไปท Layers > Add a new resource

เลอก Add layer from = Group1:G1_Data > road > Publish

ใสคาพกด 32647 แลวคลกท Compute from native bounds > Save

จากนนไปท Layer Preview > road > OpenLayer

จะไดขอมลเสนถนนขนมา

จากนนไปท Layers > Add a new resource

เลอก Add layer from = Group1:G1_Data > water > Publish

ใสคาพกด 32647 แลวคลกท Compute from native bounds > Save

จากนนไปท Layer Preview > road > OpenLayer

จะไดขอมลแหลงน าขนมา

ตอไปเปด EditPlus 3 ขนมา ใสโคด HTML เสรจแลวกด Save

ใหสราง Folder ใหมชอ backup แลวตงชอไฟล G1 เลอก Type HTML > Save

จากนนใหเปดหนากระดาษใหม แลวใสโคด

แกไขโคดบรรทดท 38 , 40 , 46 , 48 , 54 , 56 , 62 , 64 เปลยนค าวา work เปน Group1

จากนนท าการคดลอกโคดบรรทดท 61 – 68 มาใสในบรรทดท 69 เปลยน var water เปน var ATM เปลยน

WMS("แหลงน า", เปน WMS("ATM", เปลยน layers: "Group1:water", เปน layers: "Group1:atm_g1",

แลวเตม ATM หลง Water ในบรรทดท 77

กด Save ตงชอวา googlemap , type = .js > Save

จากนนท าการคดลอกไฟล G1 , googlemap จาก Folder backup ไปท C:\Program Files\Apache Software

Foundation\Tomcat 7.0\webapps แลวสราง Folder GIS3 ขนมา แลวสราง Folder รหสนสต ไวขางใน แลว

Paste ไฟลไวขางใน

จากนนเปด Browser ใส URL localhost:8080/GIS3/56170271/G1.html

จากนนโหลด OpenLayers 3

คลกท 2.x page.

.Zip

จากนนโหลด Geoext 2

คลกท GeoExt 2.1.0

เลอนลงมาลางสด Download > Source code (zip)

เสรจแลวใหแตกไฟลไวท C:\Program Files\Apache Software Foundation\Tomcat

7.0\webapps\GIS3\56170271\Libs

จากนนใหกลบมาทหนา GeoExt 2 เลอนลงมาท Examples คลกท LayerTree

จากนนใหคลกขวาทพนทสขาว เลอก ดรหสตนฉบบ

คดลอกโคดทงหมดไปใสใน Editplus

แกไขบรรทดท 18 เปลยน ../../website-resources/OpenLayers-2.13.1 เปน Libs/OpenLayers-2.13.1

จากนนกลบไปท Browser ไปดโคดบรรทดท 19 คลกท "../loader.js"

คดลอกโคดไปใสใน EditPlus

แกไขบรรทดท 5 เปลยน "../../src/GeoExt" เปน "Libs\geoext2-2.1.0\src\GeoExt"

กด Save ตงชอ loader , type .js > Save

Copy ไฟล loader.js ไปไวท C:\Program Files\Apache Software Foundation\Tomcat

7.0\webapps\GIS3\56170271

มาทหนา Noname3 ลบ ../ หนา loader.js ออก

จากนนใหกลบมาทหนา GeoExt.tree คลกท tree.js

Copy code ไปใสใน EditPlus

Save ไวใน backup ตงชอวา tree , type .js

Copy ไฟล tree ไปท C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170271

กลบมาท Noname3 ลบ โคดบรรทดท 26 – 36

เสรจแลว Save ไวท backup ตงชอวา Mymap , type HTML > Save

จากนน Copy ไฟล Mymap ไปไวท C:\Program Files\Apache Software Foundation\Tomcat

7.0\webapps\GIS3\56170271

แลวไปท Browser พมพ URL http://localhost:8080/GIS3/56170271/Mymap.html แลวจะไดหนาตางแบบน

ขนมา

ตอไปใหเปดโปรแกรม QGIS ขนมาแลวไปท Plugins > Manage and install Plugins…

เมอไดหนาตางนขนมาแลวใหท าการตดตง Plugin 2 ตว

ตวแรก QGIS Cloud Plugin > Install plugin

ตวท 2 OpenLayers Plugin > Install plugin

เสรจแลวใหรสตารทโปรแกรม QGIS ใหม แลวไปท Add vector layer > Browse เลอกขอมล boundary.shp

, building.shp,road.shp และ water.shp > Open > Open

เมอไดรปขนมาแลวกปรบสตามใจชอบ แลวไปท Cloud

ใครมรหสอยแลว Login ไดเลย ใครทยงไมมใหกดท Signup สมครใหเรยนรอยแลว Login เขามา แลวเราจะ

ได Database ขนมา

จากนนไปท Upload Data > Refresh layers > Upload data

รอสกครแลวจะขนหนาตาง Save Project ใหเลอกทเกบขอมลเปน backup ตงชอวา Online_GIS3_G1 >

Save

จากนนไปท Add background layer > Google Maps > Google Satellite

แลวจะไดภาพดงน

จากนนไปกดท Publish Map > Save

แลวจะได URL ตาง ๆ ขนมา

ใหคลกทลงคแรกกจะไดภาพแบบน

ตอไปจะท าการใสขอมล ม.บรพา ลง Mymap โดยเปด ไฟล tree.js ขนมา แลวไปทบรรทดท 34 ใหเปลยน

พกดจาก > และบรรทดท 35 เปลยน

จาก zoom 7 เปน zoom 15

จากนนลงมาบรรทดท 37 ใหลบ Code ตงแตบรรทดท 37 – 45

เสรจแลวลงมาบรรทดท 48 แลวลบ Code บรรทดท 48 – 68

จากนนมาบรรทดท 49 เปลยนจาก Gas Stations > ขอบเขต ม.บรพา

จากนนไปท Browser เปด Geoserver Web ขนมา ไปท Layer Preview > OpenLayers ของ boundary แลวท า

การคดลอก URL http://localhost:8080/geoserver/Group1/wms ไปแทนท URL บรรทดท 50

จากนนกลบไปทหนา Geoserver > Layer Preview คดลอก Group1:boundary จากชอง Name ไปใสหลง

Layers ในบรรทดท 51

จากนนลงมาบรรทดท 59 เปลยนจาก Bus Stops > อาคาร ม.บรพา คดลอก URL จากบรรทดท 50 มาแทน

บรรทดท 60 แลวบรรทดท 62 หลง Layers ใหเปลยนจาก OSM-Bushaltestellen > Group1:building

จากนนใหท าการคดลอก Code จากบรรทดท 59 – 70 มาวางไวทบรรทด 71 แลวเปลยนจาก อาคาร ม.บรพา

> ถนน แลวบรรทดท 74 หลง Layers ใหเปลยนจาก Group1:building > Group1:road

จากนนใหท าการคดลอก Code จากบรรทดท 71 – 82 มาวางไวทบรรทด 83 แลวเปลยนจาก ถนน > แหลง

น า แลวบรรทดท 86 หลง Layers ใหเปลยนจาก Group1:road > Group1:water

เสรจแลวลงมาทบรรทดท 97 ใหเปลยนจาก Tasmania > BUU คดลอก URL จากบรรทดท 84 มาใสแทน

บรรทดท 98 จากนนบรรทดท 100 – 103 ใหเปลยนเปน Group1:boundary, Group1:building, Group1:road,

Group1:water เสรจแลวกด Save

จากนนไปท Browser พมพ URL http://localhost:8080/GIS3/56170271/Mymap.html กจะไดตามรป