ณหทัย ซอเฮง รหัส 56170219

การตดตง JAVA

ตรวจสอบคอมพวเตอรทใชงานวาเปน 32 bit หรอ 64 bit โดยไปท computer > properties

คอมพวเตอรทใชงานตอนนเปน 64 bit

เปด Web Browser ขนมาจากนนเขา Google พมพ “jre” เลอก link แรก

ไปท Java SE Runtime Environment 7u79 จากนน กด Accept License Agreement เลอก Windows x64

29.78 MB jre-7u79-windows-x64.exe

กด Run

จะปรากฏหนาตางดงรปจากนนกด Install และเมอ Install เสรจเรยบรอยแลวใหกด Close

การตดตง Apache Tomcat

เปด Web Browser ขนมาจากนนเขา Google พมพ “tomcat 7” เลอก link แรก

เลอนลงมาดานลาง เลอก 32-bit/64-bit Windows Service Installer (pgp, md5, she1)

กด Run

จะปรากฏหนาตางดงรป จากนน กด Next

กด I Agree

กด Checkbox หนา Host Manager จากนน กด Next

กรอก User name และ Password โดยก าหนดให User name : admin และ Password : tomcat จากนน

กด Next

กด Next

กด Install

กด Finish

จากนน สรางโฟลเดอร GIS3_58 ไวใน D:\

ไปท Start > Apache Tomcat 7.0 Tomcat7 > Monitor Tomcat

จะปรากฏหนาตางดงรป ไปท Java พมพ -DGEOSERVER_DATA_DIR=D:\GIS3_58 ใสในชอง Java

Options จากนน กด Apply

ไปท General > Stop > Start > Ok กดปดหนาตางไดเลย

ท าการทดสอบ Tomcat โดยเปด Web Browser ขนมาพมพวา “localhost:8080” จะปรากฏดงรป

การตดตง Geoserver

เปด Web Browser ขนมาจากนนเขา Google พมพ“Geoserver” เลอก link แรก

ปรากฏหนาตางดงรป ไปท Stable 2.8.0 Nighty

คลกท Web Archive

ท าการ Extract ไฟล geoserver-2.8.x-latest-war.zip

.

ดบเบลคลกทโฟลเดอร geoserver-2.8.x-latest-war จากนน Copy ไฟล geoserver.war

น าไปใสไวใน C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps

ท าการทดสอบ Geoserver โดยเปด Web Browser ขนมาพมพวา “localhost:8080/geoserver” จะ

ปรากฏดงรป ใส Username : admin และ Password : geoserver จากนนกด Login

จะปรากฏดงรป

.

การตดตง PostGIS

เปด Web Browser ขนมาจากนน เขา Google พมพ “postgis” เลอก link แรก

จากนนกด Download และไปท Windows Downloads

กด PostgreSQL EDB binaries only

กด PostgreSQL installer.

.

เลอนลงดานลาง เลอก Version 9.4.5 กด Win x86-64

กด Run

กด Next

กด Next

กด Next

ใส Password : postgis และ Retype password : postgis จากนน กด Next

กด Next

กด Next

กด Next

กด Finish

จะปรากฏหนาตาง Stack Builder 3.1.1 เลอก PostgreSQL 9.3 (x64) on port 5432 กด next

ไปท Spatial Extensions กด Checkbox หนา PostGIS 2.1 Bundle for PostgreSQL 9.4 (64 bit)

v2.1.8 จากนนกด Next

กด Next

กด Next

กด I Agree

กด Checkbox หนา Create spatial database จากนนกด Next

กด Next

ใส Password : postgis จากนน กด Next

กด Install

กด Yes

กด Yes

กด Yes

กด Close

กด Finish

การใชงาน PostgreSQL 9.3

ไปท Start > PostgreSQL 9.3 > pgAdmin III

จะปรากฏหนาตางการท างานดงรป ดบเบลคลกท PostgreSQL 9.4 (localhost:5432) ปรากฏหนาตาง

Connect to Server กรอก Password : postgis จากนน กด OK

คลกขวาท Databases > New Database

จะปรากฏหนาตางดงรป ชอง Name : 56170219_G1 จากนนกด OK

จากนนไปท Execute arbitrary SQL queries. จะปรากฏหนาตาง พมพ “CREATE EXTENSION POSTGIS;”ลงไป กด Executequery และท าการปดหนาตางนนลงไปไดเลย

เมอใชค าสงเรยกเครองมอเสรจเรยบรอยแลว ใหไปท Plugins > PostGIS Shapefile and DBF loader 2.1

จะปรากฏหนาตางดงรป จากนน กด Add File

ไปยงโฟลเดอรทเกบขอมลทตองการ ในทนคอ D:\GIS3_58\BUU_LAYER เลอกชนขอมลทงหมด จากนน กด Open

จากนนท าการเปลยนภาษาโดยไปท Option เปลยนจาก UTF-8 เปน TIS-620 กด OK

กด Import และปดหนาตางดงกลาว

ไปท 56170219_G1 > Schemas > public > Tables เพอเชควาชนขอมลเขามาอยใน 56170219_G1 แลวหรอไม หากมจะปรากฏดงภาพ

การสราง และการตกแตงชนขอมล

เปดโปรแกรม QGIS ขนมา จากนนไปท Add PostGIS Layers

ปรากฏหนาตาง Add PostGIS Table(s) จากนนไปท ใหม กรอกขอมลดงน ชอ : G1, เครองแมขาย :

localhost , ฐานขอมล : 56170219_G1 , โหมด SSL : ยอมรบ , ชอผใช : postgres และรหสผาน :

postgis กดกากบาทหนาบนทกชอผใช และรหสผาน จากนนกด ทดสอบการเชอมตอ

จะปรากฏหนาตางทดสอบการเชอมตอ จากนนกด OK

กด OK >> OK

กลบมาทหนาตาง Add PostGIS Table(s) ไปท เชอมตอ > public เลอกชนขอมลทเปนสเขมทง 4 ชน ขอมลคอ boundary, building, road และ water จากนน กด เพม

ปรากฏหนาตางส าหรบก าหนดคาพกดโดยคนหาวา “32647” กดเลอก WGS 84 / UTM zone 47N จากนน

กด OK ท าซ าทง 4 ชนขอมล

เมอเปดชนขอมลขนมาแลว จากนนใหท าการสรางจด ATM โดยไปท New Shapefile Layer

เลอกชนด : จด, File encoding : EPSG:32647, WGS 84 / UTM zone 47N และชอ : Name จากนนกด

เพมตารางรายละเอยด > OK

ตงชอ point_1 >> Save

ไปทเครองมอ Toggle Editing >> Add Feature

เมอคลกจดไปยงต าแหนงเสรจ >> id: 1 name: ATM กรงไทย id: 2 name: ATMไทยพาณชย id: 3 name: ATMออมสน id: 4 name: ATMกสกร id: 5 name: ATMกรงไทย

เมอก ำหนดจด ATM ไดตำมตองกำรแลว ใหกด Toggle Editing >> Save

จากนนเปลยนสชนขอมลโดยดบเบลคลกทชนขอมลทตองการ ในทนคอชนขอมล building จะปรากฏ หนาตางดงรป ชองดานบนเลอก : จดหมวดหม, ชอง : name จากนนกดจดกลม และกด OK (ท า การเปลยนสชนขอมลทงหมด)

ชนขอมลทงหมดทเปลยนสเรยบรอยแลว

Save ชนขอมลโดยดบเบลคลกทชนขอมลทตองการ ในทนคอ point_1 จะปรากฏหนาตางดงรป จากนน

ไปท รปแบบ > Save Style > SLD File

เลอกโฟลเดอรทตองการเกบชนขอมลตงชอวา point_1 จากนนกด Save > OK (ท าการ Save ชนขอมล

ทงหมด)

กลบไปทโปรแกรม pgAdmin III เพอท าการ Import ชนขอมลจด ATM (point_1.shp) เขาไปไวใน Postgres

การใชงาน Geoserver

เปด Web Browser ขนมาจากนนพมพ “localhost:8080/geoserver” กด Enter กรอก Username และ

Password ใหเรยบรอย จากนนไปท Workspaces > Add new workspace

Name : G1, Namespace URI : G1_BUU และกด Default Workspace จากนน กด Submit

จากนนไปท Stores > Add new Store

เลอก PostGIS - PostGIS Database

Data source Name : G1_Data, database : 56170219_G1, user : postgres และ password :

postgis จากนนกด Save

ไปท Styles > Add a new style

Choose File > เลอกชนขอมลทตองการ ในทนคอ boundary.sld จากนนกด OK > Upload

กด Preview legend > Submit (ท าซ าทงหมดยกเวนชนขอมลจด ATM (point_1.sld))

สวนขอมลจด ATM ล าดบแรกใหปด Web Browser ขนมาจากนนพมพ “www.iconfinder.com” กด Enter

และพมพใสชองคนหาวา “atm”

เลอกรปทตองการ (ขนาดไมเกน 15 px, นามสกล .png) และ Save ภาพไวในโฟลเดอรทตองการ

กลบไปท Geoserver > Styles > Add a new style > เรยกด... > เลอกชนขอมลทตองการ ในทนคอ point_1.sld จากนนกด OK > Upload และท าการแก Code ตงแตบรรทดท 11-22 เปน

<se:Graphic>

<se:ExternalGraphic>

<se:OnlineResource xlink:type="simple" xlink:href="file:/D:/GIS3_58/atm.png"/>

<se:Format>image/png</se:Format>

</se:ExternalGraphic>

<se:Size>15</se:Size>

</se:Graphic>

จากนนกด Validate > Preview legend > Submit

ไปท Layers > Add a new resource

ชอง Add layer from เลอก G1:G1_Data จากนนกด Publish ของชนขอมล boundary

เรมตนหนาแรกท Tab Data เลอนลงดานลาง ไปท Find จะปรากฏหนาตางใหกรอกเลข 32647 จากนน

กด Enter และกด Compute from native bounds

ไปท Tab Publishing เลอนลงดานลาง Default Style เลอก boundary, Available Styles เลอก

boundary และกด >> ให boundary ไปอยท Selected Styles จากนนกด Save (ท าซ าทกชนขอมล)

จากนนไปท Layer Preview > OpenLayers ของทกชนขอมลเพอตรวจเชคชนขอมลวาแสดงผลหรอไม

การท า Google Map API

ดาวนโหลด Code HTML.docx ในกลม GIS3 จากนน Copy Code ทงหมดใสไวใน EditPlus

จากนนแก Code บรรทดท 14 จาก <script src="googlemap.js"></script> เปน <script

src="map1.js"></script>

ท าการ Save Code เกบไวใน D:\GIS3_58\Backup1 ตงชอวา G1, Save as type : HTML จากนนกด

Save > Yes

Copy Code var map ในกลม GIS3 ใสไวใน EditPlus

จากนนแก Code บรรทดท 38, 40, 46, 48, 54, 56, 62, 70 และ 72 จาก WORK เปน G1

ท าการ Save Code เกบไวใน D:\GIS3_58\Backup1 ตงชอวา map1, Save as type : JavaScript

จากนนกด Save

จากนน Copy ไฟลG1 และ map1 จาก D:\GIS3_58\Backup1 ไปใสไวใน C:\Program Files\Apache

Software Foundation\Tomcat 7.0\webapps\GIS3\56170219_G1

เปด Web Browser ขนมาพมพวา “localhost:8080/GIS3/56170219_G1/G1.html” จะปรากฏดงรป

การใชงาน GeoExt

เปด Web Browser ขนมาจากนนเขา Google พมพ “GeoExt 2” เลอก link แรก

ไปทหวขอ Download จากนนกด GeoExt 2.1.0

เลอนลงมาดานลาง หวขอ Download เลอกดาวนโหลดไฟลทเปน zip (Source code (zip))

กลบไปท Web Browser เปด Tab ใหมขนมาจากนนเขา Google พมพ “OpenLayers 3” เลอก link แรก

จากนนกด 2.x page

ไปทหวขอ Where to get OpenLayers 2: เลอกดาวนโหลดไฟล 2.13.1 (Stable) ทเปน .zip

ท าการแตกไฟลทงสองตวไปเกบไวใน C:\Program Files\Apache Software Foundation\Tomcat 7.

0\webapps\GIS3\56170219_G1\Libs (Libs เปนโฟลเดอรสรางใหม)

กลบไปท GeoExt 2 เลอนลงดานลาง เขาไปท LayerTree

ปรากฏหนาตางดงรป จากนนคลกขวาทพนทวางไปท View page source

Copy Code ทงหมดมาใสไวใน EditPlus

จากนนแก Code บรรทดท 17 จาก <script src="../../website-resources/OpenLayers-2.13.1/

OpenLayers.js"></script> เปน <script src="Libs/OpenLayers-2.13.1/OpenLayers.js"></script>,

บรรทดท 19 จาก <script type="text/javascript" src="../loader.js"></script> เปน <script

type="text/javascript" src="loader.js"></script> และลบ Code บรรทดท 25-35 ออก

ท าการ Save Code เกบไวใน D:\GIS3_58\Backup1 ตงชอวา Mymap, Save as type : HTML จากนน

กด Save > Yes

กลบไปท Source Code ของ LayerTree ดบรรทดท 21 และ 22 กด “../loader.js” และ “tree.js”

ดท Tab loader.js Copy Code ทงหมดมาใสไวใน EditPlus

แก Code บรรทดท 5 จาก GeoExt: "../../src/GeoExt", เปน GeoExt: "Libs/geoext2-2.0.3/src/GeoExt",

ท าการ Save Code เกบไวใน D:\GIS3_58\Backup1 ตงชอวา loader, Save as type : JavaScript จากนนกด Save

กลบมาดท Tab tree.js Copy Code ทงหมดมาใสไวใน EditPlus และ Save Code เกบไวใน

D:\GIS3_58\Backup1 ตงชอวา tree, Save as type : JavaScript จากนนกด Save

จากนน Copy ไฟล loader, Mymap และ tree จาก D:\GIS3_58\Backup1 ไปใสไวใน C:\Program

Files\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170219_G1

เปด Web Browser ขนมาพมพวา “localhost:8080/GIS3/56170219_G1/Mymap.html” จะปรากฏดงรป

การน า BUU_LAYER เขา GeoExt

ไปท C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170219_G1

คลก ขวาท tree.js > EditPlus 3

แก Code บรรทดท 34 จาก center: [14, 37.5], เปน center: [100.925684, 13.277333], บรรทดท 35

จาก zoom: 7, เปน zoom: 15, ลบ Code บรรทดท 37-45 และบรรทดท 48-68 ออก

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

บรรทดท 50 เปลยนจาก https://ows.terrestris.de/geoserver/osm/wms เปน http://localhost:8080/geoserver/G1/wms,

บรรทด ท 51 เปลยนจาก osm:osm-fuel เปน G1:boundary

บรรทดท 59 เปลยนจาก Bus Stops เปน อาคาร ม.บรพา,

บรรทดท 60 เปลยนจาก https://ows.terrestris.de/osm-haltestellen? เปน http://localhost:8080/geoserver/G1/wms

และบรรทดท 62 เปลยนจาก OSM-Bushaltestellen เปน G1:building

Copy Code บรรทดท 59-70 วางตอดานลาง 3 รอบ บรรทดท 71, 83 และ95 เปลยนจากอาคาร ม.บรพา เปน ถนน, แหลงน า และATM ตามล าดบบรรทดท 74, 86 และ98 เปลยนจาก G1:building เปน G1:road, G1:water และG1:point_1 ตามล าดบ

บรรทดท 109 เปลยนจาก Tasmania เปน BUU, บรรทดท 110 เปลยนจาก http://demo.opengeo.org/

geoserver/wms เปน http://localhost:8080/geoserver/G1/wms บรรทดท 114-117 เปลยนจาก

"topp:tasmania_state_boundaries", เปน "G1:boundary",

"topp:tasmania_water_bodies", เปน "G1:building",

"topp:tasmania_cities", เปน "G1:road",

"topp:tasmania_roads" เปน "G1:water",

และเพม "G1:point_1" เขาไป

จากนนไปท File > Save As เกบไวใน D:\GIS3_58\Backup1 จากนนกด Save > Yes

จากนน Copy ไฟล tree จาก D:\GIS3_58\Backup1 ไปใสไวใน C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170219_G1

เปด Web Browser ขนมาพมพวา “localhost:8080/GIS3/56170219_G1/Mymap.html” จะปรากฏดงรป

การท า QGIS Cloud

เปดโปรแกรม QGIS ไปท Piugins > Plugins > Manage and Install Plugins เพอตดตงเครองมอเสรม

ชองคนหาพมพ “Qgis Cloud Plugin” เลอก QGIS Cloud Plugin จากนนกดตดตงสวนเพมเตม

ชองคนหาพมพ “Qgis Clo” เลอก QGIS Cloud Plugin จากนนกด Install plugin

ชองคนหาพมพ “openlayer” เลอก OpenLayers Plugin จากนนกด Install plugin

จากนนไปท Add Vector layer > Browse ไปท D:\GIS3_58\BUU_LAYER เลอกชนขอมลทม นามสกล .shp ประกอบดวย Boundary.shp, building.shp, Road.shp และWater.shp > Open > Open

ตกแตงชนขอมลทงหมดใหสวยงามตามตองการ จากนน QGIS Cloud > Signup

Username : 56170219, Email : [email protected], Password : kk212999 และ Password

confirmation : kk212999 > Sign up

จากนนเขา Hotmail กด Confirm my account

กลบมาท QGIS ไปท Login > User : 56170219 และ Password : kk212999 > OK > Create

ไปท Tab Upload Data > Refresh layers > Upload Data จะปรากฏหนาตางดงรป เกบไวในD:\GIS3_58\Backup1 ตงชอวา online_gis3_g1 > Save

ไปท QGIS Cloud กด Publish Map จะปรากฏ Link ในกรอบดานลาง คลกขวาท Link แรก เลอก Copy Link Location

เปด Web Browser น า Link ท Copy มาใสไวในชองดานบน จากนนกด Enter จะปรากฏดงรป

หากตองการทราบชอของอาคารแตละหลงใหไปท Object identification จากนนคลกท Polygon ท

ตองการ จะปรากฏชออาคาร และความสงของอาคาร ในกรอบ Attribute Data

จดท าโดย

น.ส.ณหทย ซอเฮง รหสนสต 56170219 กลม 1

Link QGIS Cloud http://qgiscloud.com/56170219/online_GIS3_G1_56170219