56670309 g3302

(GIS3) Lab_01

การตดตง JAVA ,Tomcat, Geoserver

-ท าการเชคความจเครองกอนทเราจะตดตงโปรแกรม: คลกขวา Computer > Properties

-ดท System type = 32-bit

-ไป web browser > Link >

หรอจะเขา web browser > พมพ jre > เลอก ลงแรก> เลอนลงมาจะเจอหนาดาวนโหลด

-กดลงทชอง > Accept Lincense Agreement

-ท าการเลอกดาวนโหลดตามความจของเครอง ใหโหลดในไฟล (.exe)

-เรมการตดตง JAVA >มหนาตางเดงขนมาใหกด Install >รอการตดตงโปรแกรม

-หากการตดตงเรยบรอยจะขนขอความ Successfully >กด Close ไดเลย

-เรมการตดตง Tomcat7 ไดเลย จาก Link>

หรอจะเขา web browser > พมพ Tomcat 7 > Linkแรก >Download> Tomcat 7.0

-กดท Core > เลอกไฟลเฉพาะ Installer

- จะมหนาตางปรากฏขนมาใหกด > Run เพอท าการแตกไฟล

-เมอแตกไฟลเรยบรอยแลว > กด I Agree

-กด ทชอง Host Manager > Next

-ใส User(admin) > Password(tomcat) > Next > Next >

-รอการตดตง กด Show details เชคความถกตอง > Next

-การตดตงส าเรจ กด Finish

-สราง Folder > Disk D: ตงชอ GIS3_58

-ไปท Start > All programs > Apache Tomcat 7.0 > Monitor Tomcat

-จะมหนาตางเดงขนมา กดท Tab(JAVA) > พมพ –DGEOSERVER_DATA_DIR=D:\GIS3_58

จากนนใหเลอนไปท Tab(General)

-กดท Stop > Start > Ok

-เขา web browser > พมพ localhost:8080 หากขน Successfully ส าเรจเรยบรอย

-เขา web browser > Link > geoserver.org > Nighty(Stable 2.8.1)

-กดท Web Archive เพอท าการตดตง แลวท าการแตกไฟล

-เมอแตกไฟลแลว ใหเขาไปท File > geoserver > geoserver.war เพอท าการ Coppy >

-น าไปวางไวท C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps

-เขา web browser > localhost:8080/geoserver/web/

เขารหส User(admin) Password(geoserver) > Login

-Login เสรจ เขาสหนาเวบ Geoserver

(GIS3) Lab_02

การตดตง Postgres

-เขา web browser > postgis.net > Download

-เลอนลงมา กดท Windows Downloads

-กดท PostgreSQL EDB binaries-only

-กดท PostgreSQL installers.

-ท าการเลอกดาวนโหลดตามขนาดความจของเครองคอมพวเตอรของคณ

Version 9.3.10 > Win X86-32

-เมอท าการแตกไฟลเรยบรอย จะขนหนาตางนขนมา กด > Next > Next

-ใส Password /Retype Password เปน (postgis) ทงค > Next

-Port (5432) > Next

-Next

-Finish

-เลอกเปน port 5432 > Next

-กด +หนา Spatial Extensions > เลอกท PostGIS 2.1 Bundle for PostgreSQL 9.3 (32 bit) > Next

-Next

-I Agree

-เลอกชอง Create Spatial database > Next > Next

-ใส User(postgres) Password(postgis) Port(5432) > Next

-Database (56670309_G3302) > Install

-การตดตงเสรจ ขน Complete > Close

(GIS3) Lab_03

การน าเขาขอมล Postgres/Postgis

-เขาโปรแกรม pgAdmin III

-Crick > Connect Service > ใส Password(postgis) > Store Password > OK

-Crick ขวา Database > New Database > Name(GIS3_G3302) > OK

-GIS3_G3302 > Schemas >Table(0)

-กดแวนขยาย SQL > พมพ CREATE EXTENSION POSTGIS; > กด Execute Query

-ขน Successfully > Close > No

-กด Click ขวา Table > Refresh > Table(1)

-กดทไอคอนจกซอว (ShapfileDBF)

-กด View Connect > Add File

-เขา D:\GIS3_58\BUU_LAYER > เลอกชนมลทงหมด(*.shp) > Open

-Options เพอตงคา

-ตงคา TIS-620 > OK

-Import

-เชคชนขอมลทงหมดให ขน Completed > Close

-เขาโปรแกรม QGIS Desktop 2.8.4 >

ส าหรบบางเครองทเปนภาษาไทย หรอตองการเปลยนภาษา QGIS

> Settings > Options

-เงอนไข > ทองถน > กดx ทเขยนทบระบบทองถน > เลอกภาษา > OK > ออกจากโปรแกรมแลว

เขามาใหม

-เขาโปรแกรม QGIS > Add PostGIS Layers

-New > เตรยมชนขอมลน าเขา

-ใสขอมล Name(GIS3_3302) Host(localhost) Port(5432) Database(GIS3_3302) SSL(allow)

Username(postgres) Password(postgis) > กดx Save User/Pass > Test Connect

-เมอขน Successful > OK

-Ok

-Connect

-เลอกชนขอมล > Add

-หนาตางจะเดงมาใหใสคาพกด > 32647 > กดเลอกจนกวาจะครบจ านวนชนขอมล > Close

(GIS3) Lab_04

การใช Geoserver

-เขา web browser > loclhost:8080/geoserver/web

-Workspaces > Add ne workspace >

Name(G3302) Namespace(G3302_BUU) > Default > Submit

-Stores > Add new store

-New data source >PostGIS-(PostGIS Database)

-กรอกขอมลลงไป > Save

-Layers > Add a new resource > G3302:BUU

New Layer > Publish(boundary)

-New Key(ขอบเขต) > เลอกภาษา > Add Key

-ไดผลลพธ(ขอบเขตth) > Find

-คนหาพกด 32647 > เลอกพกด

-กด Comput native จะไดพกด ละตจด/ลองจจด > Save

-Layer Preview > OpenKayers > ดผลลพธ

-preview :boundary

-Layers > Add a new > G3302:BUU

-New Layer > Publish(building)

-New Key(อาคารมหาวทยาลยบรพา) > เลอกภาษา > Add Key > Find


-compute native >พกดขน > Save

-Layer Preview > OpenLayers

-Preview building

-Layers > Add a new > G3302:BUU

-New Layer > Publisg(road)

-New Key(ถนน) > เลอกภาษา > Add Key > Find


-Compute native > แสดงพกด > Save


-ท าการ เพม Layers เหมอนชนขอมลตางๆ > Publish >Add Key >Find > คนหาพกด > compute native >

แสดงพกด > Save > Layer Preview > OpenLayers

-Preview Water

(GIS3) Lab_05

การใช QGIS ใสส SLD น าเขา Geoserver

-เขาโปรแกรม QGIS Desktop 2.8.4 >

-Connect

-เลอกชนขอมล > Add

-หนาตางจะเดงมาใหใสคาพกด > 32647 > เลอก (OK) จนกวาจะครบจ านวนชนขอมล > Close

-เมอไดชนขอมลมาเรยบรอยท าการ ลาก boundary มาไวลางสด > ดบเบลคลกขวาชนขอมล

เลอกสตามใจชอบ

-เลอกชนขอมล building > Categorized > Column(name) > Classify > Apply

-จดเกบ D:/GIS3_58 > Save > OK

-เลอกชนขอมล boundary > ตกแตง > Apply > จดเกบ D:/GIS3_58

-เลอกชนขอมล water > ตกแตง > Apply > จดเกบ D:/GIS3_58 > Save > OK

-เลอกชนขอมล road > ตกแตง > Apply > จดเกบ D:/GIS3_58 > Save > OK

-Styles > Add a new style

-เลอกไฟล SLD > Preview >

-Submit

-Layers > Publishing

-เลอกชนขอมล > สงจาก Avilable ไป Selected > Save


-OpenLayers

-Styles > Add a new style

-เลอกไฟล SLD > Upload > Preview

-Layers > building > Publishing

-สงชนขอมลไปฝงขวา > Save


-Styles > Add a new >

-เลอกไฟล SLD > Upload > Preview > Submit

-Layers > Publishing > สงชนขอมลไปฝงขวา > Save


(GIS3) Lab_06

การสราง Point เพมไอคอน

-เปด QGIS > Add PostGIS Layers

-เลอกกลม > Connect

-เลอก boundary / building > Add

-ใชพกด 32647 > OK >

-ไดชนขอมลมา > New Shapfile Layer

-Type(Point) > เลอกพกด 32647 (84/47) > Name(name) > Add to attribute > OK

-เกบไว > D:/GIS3_58/BUU_LAYER > Save

-ได Point

-เลอก point > กดทดนสอ > Add Feature > เลอกทตองการจด

จดท1 จดท2 จดท3 จดท4

-เมอเลกท ำงำน ใหกดทรปดนสอเพอหยดกำรท ำงำน (Toggle Editing)

-เมอหยดงาน หนาตางจะเดงขนใหท าการ > Save

-

-เลอก Point > ตกแตง > Apply > Style > Save SLD > OK

-จดเกบ D:/GIS3_58 > Save SLD > OK

-เขา pgAdmin.III > Connect > Database

-connect (GIS3_3302) > รปจกซอ(PosrGIS Shapefile/DBF)

PostGIS Connection > Add File

-เปด > D:/GIS3_58/BUU_LAYER > Open

-Options > TIS-620 > OK > Import > Close

-Refresh > Table > Point

-ตกแตง point > Apply > Save SLD > OK

-จดเกบ Point > D:/GIS3_58/ > Save SLD >Close

-Styles > Add a New

-เลอกไฟล > Upload > Preview > Submit

-

-Layers > Add a new resource > G3302:BUU

-New Layer > Publish(point)

-Find > 32647 > Compute native > Save

-Layers > Point

-Publishing > สง Point_3302 ไปฝงขวา > Save


-web browser > WWW.iconfinder.com >ATM

http://www.iconfinder.com/

-Free > 30 px > PNG >Download

-Save >atm.png > D:/GIS3_58

-Styles > point_3302

-coppy code > ใสใน Upload

-แก Code > Upload > Validate > Preview > Submit


(GIS3) Lab_07

การใช Editplus สราง HTML

-สราง folder > GIS3 > C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps

-สราง folder 56670309 ใสใน C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\GIS3

-สราง Folder >WEB-INF ไวใน > C:\Program Files\Apache Software Foundation\Tomcat

7.0\webapps\GIS3\56670309

-เปด Editplus > I Agree

-สราง Code

-Save > Desktop > coppy file ไปไวใน webapp/GIS3/56670309

-localhost:8080/GIS3/56670309/Index.html

(GIS3) Lab_08

การแปลงพกด Proj4js ใหเปนชนขอมลเปดกบ Google map ได

-เปดท Link แรก

-คลกขวาทวาง > ดรหสตนฉบบ

-คลก Link > google-v3.js

-coppy link > Editplus

-เปดใน Editplus

-ลบบรรทด 33-39 ออก

-เปลยนพกด (100.925927 , 13.277537) และเปลยนจาก 5 เปน 15

-Save > googlemap.js >ไวใน D:\GIS3\56670309 >coppy

-วาง C:\Apache\Tomcat\Webapp\GIS3\56670309

-คลกขวา > เปด Editplus3

-น า Code มาใส > Save >3302.html

-เปด > OpenLayers

-coppy link

-แทนในบรรทด 38,46,54,62

-เปลยน WORK ใหเปน G3302

-เพม Code ATM

-เขา localhost:8080/GIS3/56670309/3302.html > ผลลพธทได

(GIS3) Lab_09

Openlayer เพมชนขอมล BUU ลงในเวบ localhost

-browser > Openlayer3 > Link แรก

-Click > 2xpage.

-Download > .zip

-สราง Folder > Libs ใน webapp\GIS3\56670309

-แตกไฟล OpenLayers

-Click > Link แรก

- Click > GxoExt 2.1.0

-Download > Source.code(zip)

-แตกไฟล > geoext 2-2.1.0

-Coppy folder ทง2 ทท าการแตกไฟลมา

-น ามาวางไวท webapp\GIS3\56670309\Libs

-Click > LayerTree

-Click ขวาทวาง > ดรหสตนฉบบ

-

-เปด Link

-น าเขา Editplus3 > ท าการแกไข

-น าไปแทนบรรทดท 20

-Click >/oader.js

-

-น ามาวางใน Editplus

-แก Code

-Save > loafer.js > Coppy file

-น ามาวาง > webapp\GIS3\56670309

-ลบบรรทด22 ตรง../

-Click > “tree.js”

-Save > tree.js

-น าไปวาง > \webapp\GIS3\56670309

-ลบ Code บรรทดท 28-38

-Save > Mymap.html > copy file

-น ามาวางไวท \webapp\GIS3\56670309

-localhost:8080/GIS3/56670309/Mymap.html

(GIS3) Lab_12

Load GeoExt และ Openlayer

-เขาไปใน \webapp\GIS3\56670309 > Click ขวาท tree >Editplus3

-เปด Editplus3 (tree)

-ท าการแกไขบรรทด 34 > (100.925684 , 13.277333)

-ท าการลบบรรทด 37-45

-ลบบรรทด 48-68

-ท าการแกไขใหเปนชอ Layers ของตวเอง

-น ามาใชแกไข Code

-ท าการแกไขจนครบ

-แกไขบรรทด 100-103

-แกเปน (ตวอยางดานลาง) > จากนนท าการ > Save > tree.js

-localhost:8080/GIS3/56670309/Mymap.html

(GIS3) Lab_13

การใช QGIS Cloud

-เปด Qgis Desktop

-ไปท Plugings > Manage and Install Plugins

-พมพ Qgis C > ในชอง (Search) > รอโปรแกรมคนหา

-เลอก QGIS Cloud Plugin > Install Plugin

-เมอเรยบรอยใหกด Close

-Click > Add Vector Layer

-Add vector kayer > File > Browse

-ท าการเลอกชนขอมลทงหมดใน สกล .shp > Open

-Open

-น าขอมลเขามาเรยบรอย

-ท าการตกแตง เปลยนสไดทกชนขอมล

-ไปท > Cloud Setting

-Sigup

-โปรแกรมจะเดงใหเราท าการสมคร > กรอกใหเรยบรอย > Login > ไปยนยน e-mail ทใชสมคร

-Click > Confirm my account

-เมอท าการยนยนเรยบรอยจะมหนาตางแบนนขนมา

-Login

-ใสขอมลทยนยนไป > OK

-Click > Create

-เมอท าการ Create เรยบรอยจะปรากฏ Database

-มาท Tab >Upload Data > Upload Data

-เมอท าการ Upload เสรจ จะมหนาตาง Save Project เดงมาใหเราท าการจดเกบ > ท าการเลอกทจดเกบ >

D:\GIS3_58\56670309 > ชอ Online_GIS3_G3302.qgs > Save

-เมอ Save Project เสรจ จะปรากฏชอใหเหน > Click > Publish Map

-จากนนจะขน Link ใหเราท าการตรวจสอบ โดยกดทตว Link ไดเลย

-Link มการท างานถกตอง

Technology

56670309 g3302