บุญทวี จันทร์มงคล 56170222 capture gis3 group1

การติดตั้ง JAVA

ขั้นตอนท่ี 1 กด Install

ขั้นตอนท่ี 2 รอการติดตั้ง

ขั้นตอนท่ี 3 เม่ือติดตั้งเสร็จกด Close

Downloads : http://www.oracle.com/technetwork/java/javase/downloads/jre7-downloads-1880261.html

การติดตั้ง Apache Tomcat

ขั้นตอนท่ี 1 Download ตามสเปคเคร่ือง

ขั้นตอนท่ี 2 กด Next >

ขั้นตอนท่ี 3 กด I Agree


ขั้นตอนท่ี 5 ใส่ User = admin, Pass = tomcat แลว้ กด Next >

ขั้นตอนท่ี 6

1. เลือกท่ีเก็บไฟล ์ 2. Next >


ขั้นตอนท่ี 8 ส้ินสุดการติดตั้ง

ขั้นตอนท่ี 9 ทดสอบตวั Tomcat โดยไปท่ี Browser แลว้พิมพ ์localhost:8080


1.เพิ่ม -DGOSERVER_DATA_DIR=D:\GIS3 2.ใส่ 128 3.ใส่ 256

Downloads : http://tomcat.apache.org/download-70.cgi

การติดตั้ง

Geoserver

ขั้นตอนท่ี 1 Nightly ใตแ้ถบสีเขียว

ขั้นตอนท่ี 2 กด Web Archive

ขั้นตอนท่ี 3 เม่ือได ้Geoserver มาแลว้ ใหท้ าการแตกไฟลแ์ลว้น าไฟล์ Geoserver.war ไปไวท่ี้ C:\Program

Files\Apache Software Foundation\Tomcat 7.0\webapps

ขั้นตอนท่ี 4 ทดสอบ Geoserver โดยไปท่ี Browser แลว้พิมพ ์localhost:8080/geoserver

1.ใส่ User = admin 2. Pass = geoserver

ขั้นตอนท่ี 5 จะไดต้ามภาพน้ี

การติดตั้งPostGIS


1. เลือกโฟลเ์ดอร์ติดตั้ง 2. กด Next>

ขั้นตอนท่ี 3 กด Next>


1. รหสั : postgis 2.กด Next>

ขั้นตอนท่ี 5 กด Next>


1. ให่ติดเคร่ืองหมายถูก 2. กด Finish


1. เลือก PosrgreSQL 9.4 2. กด Next >


1. เลือก version ล่าสุด 2. กด Next >



1. เลือกแค่ PosrGIS 2. กด Next >



1. User = postgres 2. Pass = postgis 3. Port : 5432 4. กด Next

ขั้นตอนท่ี 13 รอการติดตั้ง

ขั้นตอนท่ี 14 กด Finish

ขั้นตอนการท างาน

ขั้นตอนท่ี 1 คลิกท่ี PostgreSQL 9.4


1. รหสั : postgis 2. กด OK

ขั้นตอนท่ี 3 ทาการสร้าง Database ข้ึนมาใหม่ ไปท่ี Database คลิกขวา New Database

1. ตั้งช้ือวา่ GIS3 2. กด OK

ขั้นตอนท่ี 4 กด

1. พิมพ ์CREATE EXTENSION POSTGIS; 2. กดเล่น 3. ตรวจสอบความถูกตอ้ง

ขั้นตอนท่ี 5 กด แลว้กด Add File


1. เขา้ไปสถานท่ีเก็บขอ้มูล 2. เลือกไฟลท์ั้ง 4 ชั้นขอ้มูล 3. กด Open

ขั้นตอนท่ี 7 ไปท่ี Option...


1. เปล่ียนจาก UTF-8 เป็น TIS-620 2. กด OK

ขั้นตอนท่ี 9 กด Import

ขั้นตอนท่ี 10 จะได ้4ชั้นขอ้มูลมาเพิ่ม **ขอ้มูลจุดATMท าเช่นเดียวกนั**

ขั้นตอนท่ี 11 เปิดโปรแกรม QGIS ไปท่ี Add postgGIS layers กด New


1. Name : G1 2. Host : localhost 3. Port : 5432 4. Database : GIS3_G1 , SSL

mode : allow 5. User : postgres 6. Pass : postgis 7. ต๊ิกหนา้ Save

8. คลิกท่ี Test Connect (ทดสอบการเช่ือมต่อ) ทั้งสองอนั แลว้กด OK


1. เลือกชั้นขอ้มูล 2. กด Add


1. เลือก พิกดั EPSG:32647 ทุกอนั 2. กด OK

ขั้นตอนท่ี 15 เสร็จแลว้จะไดภ้าพแผนท่ีมหาวทิยาลยับูรพาข้ึนมา

ขั้นตอนท่ี 16 ดบัเบิ้ลคลิกท่ีชั้นขอ้มูล building

1. เลือก Style 2.เลือก Name 3. กด Categorized

ขั้นตอนท่ี 17 Column เลือกเป็น Name > Classify > Style > Save Style > SLD File

**ท าทุกชั้นขอ้มูลใหเ้ป็น .sld **

ขั้นตอนท่ี 18 ไปท่ี Geoserver > Workspaces > Add new workspaces

1. ไปท่ี Workspaces 2. กด Add new workspace


1. Name : GIS3 2. Namespace URI : BUU 3. กด Submit

ขั้นตอนท่ี 20 ไปท่ี Stores > Add new store

ขั้นตอนท่ี 21 เลือก PostGIS – PostGIS Database


1. Workspace : GIS3 2. Data Source Name : G1_Data 3. host : localhost 4. port : 5432 5. database : GIS3 6. user : postgres pass : postgis 1แลว้กด Save

ขั้นตอนท่ี 23ไปท่ี boundary > Publish

ขั้นตอนท่ี 24 1. ใส่พิกดั 32647 2.คลิกท่ี Compute from native bounds 3. กด save

ขั้นตอนท่ี 25 ไปท่ี Styles > Add new style

ขั้นตอนท่ี 26 1. เลือก building.sld แลว้ Upload... 2. Validata > Preview > submit


1. เลือก building.sld แลว้ Upload... 2. แกไ้ขCodeตามภาพ 3. Validata > Preview > submit

**เราสามารถโหลดสัญลกัษณ์ไดจ้าก iconfinder ขนาดภาพ 16px สกุลPNG**

ขั้นตอนท่ี 28 Add layer from : GIS3:atm_g1 > atm_g1> Publish 1. ใส่พิกดั 32647 2.คลิกท่ี Compute from native bounds 3. กด save

ขั้นตอนท่ี 29 ไปท่ี Layer > atm_g1 > Edit Layer 1. เลิอก atm_g1 2. ยา้ย atm_g1 จากซา้ยไปขวา แลว้กด Save

**.ใหท้ า boundary,buildingตามขั้นตอนท่ี26กบั28,ส่วน atm_g1 มีการเปล่ียนCodeท าตามขั้นตอนท่ี27-28**

ตวัอยา่ง

ขั้นตอนท่ี 30 ไปเปิด EditPlus 3 ข้ึนมา ใส่โคด้ HTML

ขั้นตอนท่ี 31 สร้าง Folder ใหม่ช่ือ backup แลว้ตั้งช่ือไฟล์ G1 เลือก Type HTML > Save

ขั้นตอนท่ี 32 เปิดหน้ากระดาษใหม่ แล้วใสโ่ค้ด

ขั้นตอนท่ี 33 แกไ้ข Code ตามภาพ

ขั้นตอนท่ี 34 กด Save ตั้งช่ือวา่ googlemap , type = .js > Save

ขั้นตอนท่ี 35 จากนั้นทาการคดัลอกไฟล์ G1 , googlemap จาก Folder backup ไปท่ี C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps แลว้สร้าง Folder GIS3 ข้ึนมา แลว้สร้าง Folder รหสันิสิต ไวข้า้งใน แลว้ Paste ไฟลไ์วข้า้งใน

ขั้นตอนท่ี 36 จากนั้นเปิด Browser ใส่ URL localhost:8080/GIS3/56170222/G1.html

ขั้นตอนท่ี 37 โหลด OpenLayers 3

ขั้นตอนท่ี 38 คลิกท่ี 2.x page.

ขั้นตอนท่ี 39 เลือกไฟล.์Zip

ขั้นตอนท่ี 40 โหลด Geoext 2

ขั้นตอนท่ี 41 คลิกท่ี GeoExt 2.1.0

ขั้นตอนท่ี 42 เลือก Source code (zip)

ขั้นตอนท่ี 43 แตกไฟลไ์วท่ี้ C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170222\Libs

ขั้นตอนท่ี 44 จากนั้นใหก้ลบัมาท่ีหนา้ GeoExt 2คลิกท่ี LayerTree

ขั้นตอนท่ี 45 จากนั้นใหค้ลิกขวาท่ีพื้นท่ีสีขาว เลือก ดูรหสัตน้ฉบบั

ขั้นตอนท่ี 46 คดัลอกCodeทั้งหมดไปใส่ใน Editplus แกไ้ขบรรทดัท่ี 18 เปล่ียน ../../website-resources/OpenLayers-2.13.1 เป็น Libs/OpenLayers-2.13.1และลบ ../ หนา้ loader.js ออก และลบ Codeบรรทดัท่ี 27 –37 เสร็จแลว้ Save ไวท่ี้ backup ตั้งช่ือวา่ Mymap , type HTML > Save

ขั้นตอนท่ี 47 ไปท่ี Browser ไปดูCodeบรรทดัท่ี 21 คลิกท่ี "../loader.js" แลว้คดัลอกCodeไปใส่ใน EditPlusแกไ้ขเปล่ียน "../../src/GeoExt" เป็น "Libs\geoext2-2.1.0\src\GeoExt"

ขั้นตอนท่ี 48 ตั้งช่ือ loader , type .js กด Save

ขั้นตอนท่ี 49 จากนั้นใหก้ลบัมาท่ีหนา้ GeoExt.tree คลิกท่ี tree.js คดัลอก code ไปใส่ใน EditPlus Save ไว้ใน backup ตั้งช่ือวา่ tree , type .js

ขั้นตอนท่ี 50 จากนั้น Copy ไฟล ์Mymap, tree.js, loader.js ไปไวท่ี้ C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170222

ขั้นตอนท่ี 51 แลว้ไปท่ี Browser พิมพ ์URL http://localhost:8080/GIS3/56170222/Mymap.html แลว้จะได้

หนา้ต่างแบบน้ีข้ึนมาดงัภาพ

ขั้นตอนท่ี 52 เปิดโปรแกรม QGIS ข้ึนมาแลว้ไปท่ี Plugins > Manage and install Plugins…

ขั้นตอนท่ี 52 ห าการติดตั้ง Plugin 2 ตวั QGIS Cloud Plugin และ OpenLayers Plugin ตานล าดบั

ขั้นตอนท่ี 53 เสร็จแลว้ใหรี้สตาร์ทโปรแกรม QGIS ใหม่ แลว้ไปท่ี Add vector layer > Browse เลือกขอ้มูล

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

ขั้นตอนท่ี 54 ไปท่ี Cloud ใครท่ียงัไม่ไดส้มคัรไปท่ี Signup สมคัรใหเ้รียนร้อยแลว้ Login เขา้มา แลว้เราจะ

ได ้Database ข้ึนมา

ขั้นตอนท่ี 55 จากนั้นไปท่ี Upload Data > Refresh layers > Upload data รอสักพกั

ขั้นตอนท่ี 56 Save Project ใหเ้ลือกท่ีเก็บขอ้มูลเป็น backup ตั้งช่ือวา่ Online_ GIS3_G1 > Save

ขั้นตอนท่ี 57 ไปท่ี Add background layer > Google Maps > Google Satellite

ขั้นตอนท่ี 58 จากนั้นไปกดท่ี Publish Map > Save จะไดด้งัภาพ

ขั้นตอนท่ี 59 จะได้ URL ตา่ง ๆ ขึน้มาแล้วคลิกท่ีลิง้ค์แรกก็จะได้ดงัภาพ

ขั้นตอนท่ี 60 ใส่ขอ้มูล ม.บูรพา ลง Mymap แกไ้ขพิกดัเป็น [100.925684, 13.277333] zoom เป็น 15

ขั้นตอนท่ี 61 ลบ Code ตั้งแต่บรรทดัท่ี 37-45

ขั้นตอนท่ี 62 ลบ Code ตั้งแต่บรรทดัท่ี 48-68

ขั้นตอนท่ี 65 เปล่ียนจาก Gas Stations > ขอบเขต ม.บูรพา จากนั้นไปท่ี Browser เปิด Geoserver Web ข้ึนมา

ไปท่ี Layer Preview > OpenLayers ของ boundary แลว้ทาการคดัลอก URL

http://localhost:8080/geoserver/GIS3/wms ไปแทนท่ี URL "https://ows.terrestris.de/osm-haltestellen?"

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

Layers **ท าทั้ง 4 ชั้นขอ้มูล(boundary, building, road, water)**

ขั้นตอนท่ี 66 ใหเ้ปล่ียนจาก Tasmania > BUU คดัลอก URL จากขั้นตอนท่ี 65 มาใส่แทนบรรทดัท่ี 98

จากนั้นบรรทดัท่ี 100 – 103 ใหเ้ปล่ียนเป็น GIS3:boundary, GIS3:building, GIS3:road, GIS3:water เสร็จ

แลว้กด Save

ขั้นตอนท่ี 67 ไปท่ี Browser พิมพ ์URL http://localhost:8080/GIS3/56170222/Mymap.html ก็จะไดต้ามภาพ

QGIS cloud : http://qgiscloud.com/thaithegpon/Online_GIS3_G1

บุญทวี จันทร์มงคล 56170222 capture gis3 group1

Data & Analytics