งาน Capture GIS3

จัดทําโดย

นายสุรสิทธ์ิ ภูระหงษ

56170180 กลุม1

ข้ันตอนการลงโปรแกรม

1. การติดตัง้Java ใหตรวจสอบวาคอมพิวเตอรที่ใชงานวาเปน 32 หรือ 64 bit

จากนั้น เขา Website พิมพ java ใน Google จากนั้นโหลดตามรุนของเรา

- หลังจากนั้นเขาสูข้ันตอนการติดต้ัง ดังนี้

กด Install เพื่อติดต้ัง

เมื่อเสร็จแลวจะไดดังภาพ

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

เปด Web Browser พิมพ tomcat7 ใน google จากนั้นใหเลือกดังภาพ

ใหกดเขามา จากนั้นใหเลือก 32-bit/64-bit Windows Service Installer (pgp, md5, she1)

จากนั้นเขาสูข้ันตอนการติดต้ังโปรแกรม

กด Next เพื่อเขาสูหนาตางตอไป

เมื่อถึงหนานี้ ใหใส User name เปน admin สวน Password เปน tomcat

จากนั้นกด Next ตอไปเรื่อยๆ จนลงโปรแกรมเสร็จ

เมื่อลงเสร็จจะไดดังภาพ กด finish เปนอันจบ

จากนั้นสรางโฟลเดอร GIS3_58 ไวที่ไดร D:\

ไปที่ Start > Apache Tomcat 7.0 Tomcat7 > Monitor Tomcat เพื่อต้ังคา

จะปรากฏหนาตางข้ันมาดังภาพ จากนั้นไปที่แถบ Java

ในชอง java options ใหพิมพ -DGEOSERVER_DATA_DIR=D:\GIS3_58

ทําการทดสอบ Tomcat โดยเปด Web Browser พิมพ “localhost:8080” ในชอง URL

3. การติดตัง้ Geoserver

เปด Web Browser พิมพ geoserver ใน google จากนั้น กดเขาไปอันแรก

ใหเลือก Stable 2.8.1 Nighty

จากนั้นไปที่ packages เลือก Web Archive

เราจะไดไฟลมา จากนั้นใหทําการแตกไฟลออกมา

จะไดดังภาพ

ใหเรา Copy ตัว geoserve.war ไปวางใน

C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps

ทําการทดสอบ Geoserver เปด Web Browser ข้ึนมาพิมพ “localhost:8080/geoserver”

จากนั้นใส Username : admin และ Password : geoserver กด Login

จะไดดังภาพ

4. การติดตัง้ PostGIS

เปด Web Browser พิมพ postgis ใน google เลือกดังภาพ

กดเขาสู website จากนั้นกดที่ Download และไปที่หัวขอ Windows Downloads

เลือก PostgreSQL EDB binaries only

จากนั้นใหเลือก Postgre SQL installer

เลือกโหลด Version 9.4.5 จากนั้นใหเลือกระบบปฏิบัติการตามเครื่องที่ใชงาน

เขาสูข้ันตอนการติดต้ังโปรแกรม postgis เปดโปรแกรมข้ันมา กด Next

กด Next

กด Next

ชอง Password ใสวา postgis ชอง Retype password ก็ใสวา postgis เชนกัน จากนั้น

กด Next

ชอง port ใส 5432 ลงไป จากนั้น กด Next

กด Next

กด Next

หลังจากนั้นรอจนติดต้ังเสร็จ จากนั้น กด Finish

จะมีหนาตาง Stack Builder เดงข้ึนมา ใหเลือก PostgreSQL 9.3 (x64) on port 5432

จากนั้นกด next

ไปที่ Spatial Extensions เลือก PostGIS 2.1 Bundle for PostgreSQL 9.4 (64 bit) v2.2.0

จากนั้นกด Next จนข้ึนหนาตางโหลด

รอดาวนโหลด

จากนั้นกด Next

กด I Agree

ต๊ิกเครื่องหมายถูกหนา Create Spatial Database จากนั้นกด Next

เลือกที่เก็บไฟล จากนั้น กด Next

ชองUsername ใส postgress ชอง password ใส postgis ชอง port ใส 5432

กด Install

รอติดต้ัง ระหวางนั้นจะมีหนาตางเดงข้ึนมา ใหกด yes ทุกครั้ง จากนั้นรอจนเสร็จ

กด Finish เปนอันจบการลงโปรแกรม

ข้ันตอนการใชงานโปรแกรม Postgis

1.สราง database

ไปที่ Start จากนั้นไปที ่PostgreSQL 9.4 เปดโปรแกรม pgAdmin III ข้ึนมา

ดับเบ้ิลคลิกที่ PostgreSQL จะมีหนาตางเดงข้ึนมา ใหใส Password : postgis จากนั้น ok

จากนั้นคลิกขวาที่ Databases เลือก New Database

ใหต้ังชื่อ database ตามความตองการของผูใชงาน ในที่นี้ต้ังชื่อ 56170180_g1 จากนั้น ok

จากนั้นไปคลิกที่ 56170180_g1 ใหทํางานดังภาพ

ใหไปที่เครื่องมือ พิมพคําวา CREATE EXTENSION POSTGIS; ลงไป แลวนั้นกด

เครื่องหมาย รอจนมีขอความ successfully ข้ึนแสดงวาถูกตองแลว จากนั้นปดหนาตางไป

ตอบ NO

2.การนําเขาขอมูลสู database

กดเครื่องมือ จากนั้นเลือก PostGIS Shapefile and DBF louder 2.1

จากนั้นจะมีหนาตางดังภาพ ใหเราเลือก Add File

ใหเลือกไปยังที่ที่เราเก็บขอมูล BUU_LAYER ไว หลังจากนั้นใหเราเลือกขอมูลทั้งหมด กด open

จากนั้นใหกด option เปล่ียนเปน TIS-620 จากนั้นกด ok

กด Import และปดหนาตางไดเลย

การนําเขาขอมูลสู Geoserver

เปด Web Browser ข้ึนมาพิมพ http://localhost:8080/geoserver/web ทําการ login ให

เรียบรอย จากนั้นไปที่ แถบ Workspaces

จากนั้นกด Add new workspace

ในชอง Name ต้ังชื่อวา InternetGIS1 ชอง Namespace URI ต้ังชื่อวา GI แลวกดต๊ิก Default

จากนั้นกด Submit ดังภาพ

จากนั้นไปที่ Stores

กด Add new store

ไปที่ Vector Data Sources เลือก PostGIS ดังภาพ

ใสขอมูลชอง Data source Name : BUU_Data ชอง Desription : DataBase of Burapha

University ชอง host :localhost ชอง port : 5432 ชอง Database : 56170180_g1 ชอง

Schema :public ชอง User :postgres ชอง Password : postgis จากนั้นกด save

จะปรากฏขอมูลข้ึนมา ดังภาพ จากนั้นใหกด publish เริ่มที่ขอมูล boundary กอน

ชอง Abstract : ขอบเขตมหาวิทยาลัยบูรพา วิทยาเขตบางแสน New Keyword : ขอบเขต เสร็จ

แลวเลือก Thai จากนั้นกด Add Keyword

เล่ือนมาที่หัวขอ Coordinate Reference Systems กด Find ในชองคนหาพิมพ 32647

จากนั้นกดเลือก

จากนั้นไปที่ Bounding Boxes กด Compute from native bounds จากนั้นกด save

ใหเราทําใหครบทุกชั้นขอมูลที่มีอยู ทําครบแลวจะไดดังภาพ

ทดสอบเปดดูขอมูลไปที่ Layer Preview เลือก InternetGIS1:boundary

คลิก OpenLayers

จะไดดังภาพ

การใสสีและสัญลักษณใหกับช้ันขอมูล โดยโปรแกรม Qgis

1.เปดโปรแกรม Qgis ข้ึนมา จากนั้นไปที่เครื่องมือรูปชาง ดังภาพ

กด new

จากนั้นใหใส Name:group1 ชอง Host : localhost ชอง Database : 56170038_group1

ชอง SSL mode : allow ชอง Username : postgres ชอง Password : postgis

เสร็จแลวใหลองกด Test Connect ถาถูกตองจะไดดังภาพ แลวOK

กด connect กด public เลือก boundary กด Add

จะมีหนาตางเดงมา ใหเราเลือก Coordinate Reference Selector >> พิมพในชองFilter :

32647 แลวเลือก EPSG :32647 กด OK

จะไดดังภาพ จากนั้นใหดับเบ้ิลคลิกที่ boundary เพื่อเปล่ียนสี

กด color เลือกสีที่ชอบ จากนั้นไปที่ style > save style > SlD File เก็บไวใน GIS3_58 ต้ังชื่อ

วา boundary_group1 กด Save กด OK

จากนั้นเปด Geoserver ข้ึนมาไปที่ Styles กด Add a new style

เล่ือนลงมา กด เลือกไฟล แลวไปเลือกไฟล boundary_group1 ที่สรางไว จากนั้นกด upload

จะไดดังภาพ จากนั้นกด preview legend แลวกด Submit

จากนั้นไปที่ layers เลือก boundary

กด Publishing

เล่ือนลงมาดานลาง Default style เลือก boundary_group1 จากนั้น ชอง available เลือก

boundary_group1 แลวกด ยายฝงไปอยูชอง selected จากนั้นกด save

จากนั้นลองไปดูวาขอมูลแลวมีสีหรือไม ใหกลับไปที่ Layer preview แลวไปที่ InternetGIS1:

boundary กด OpenLayers ดูจะไดดังภาพ

การใสสีใหกบัขอมูล building

กดเลือก building กด add

แลวจะมีหนาตางเดงมา ใหเราเลือก Coordinate Reference Selector >> พิมพในชองFilter :

32647 แลวเลือก EPSG :32647 กด OK จากนั้นจะไดดังภาพ

ดับเบ้ิลคลิกที่ building จากนั้นเปล่ียนจาก single symbol เปน Categorized

ชอง column เลือก Name แลวกด classify จะไดดังภาพ

จากนั้นไปที่ style > save style > SlD File เก็บไวใน GIS3_58 ต้ังชื่อวา building_group1 กด

Save กด OK

จากนั้นใหเปด Geoserver ข้ึนมาไปที่ Styles กด Add a new style เล่ือนลงมา กด เลือกไฟล

แลวไปเลือกไฟล building_group1 ทีส่รางไว จากนั้นกด upload

จะไดดังภาพ จากนั้นกด preview legend แลวกด Submit

จากนั้นไปที่ layers เลือก building กด Publishing เล่ือนลงมาดานลาง Default style เลือก

building_group1

จากนั้นชอง available เลือก building_group1 แลวกด ยายฝงไปอยูชอง selected จากนั้นกด

save

จากนั้นลองไปดูวาขอมูลแลวมีสีหรือไม ใหกลับไปที่ Layer preview แลวไปที่ InternetGIS1:

building กด OpenLayers ดูจะไดดังภาพ

การสรางและใสสัญลักษณใหขอมูลจุด

เปดโปรแกรม qgis ข้ึนมา จากนั้นใหทําการ เลือก group1 กด connect จากนั้นเลือกขอมูล

boundary และ building กด add

ใหเลือกระบบพิกัด EPSG 32647 กด ok

จะไดดังภาพ

จากนั้นใหเราไปที่เครื่องมือ New Shapefile Layer เมื่อกดเขามาแลวจะปรากฏหนาตางดังภาพ

ชอง Type : Point ชอง File encoding : TIS-620 ชอง EPSG : 32647,WGS 84 /UTM zone

47N ชอง Name : Name จากนั้นกด Add to attributes list >> OK

จากนั้นให save ไปที่ GIS3_58 ต้ังชื่อวา point_1 กด save

ไปที่เครื่องมือ Toggle Editing และ Add Feature ดังภาพ จากไหนใหทําการกําหนดจุดตามที่

ตองการ

เมื่อกดจุดลงไปจะปรากฏหนาตางใหใสขอมูลตามตองการ ดังภาพ

ทําจนครบตามตองการจะไดดังภาพ กด save

ใหเราทําการดับเบ้ิลคลิก point_1 จากนั้นไปที่ style > save style > SlD File เก็บไวใน

GIS3_58 ต้ังชื่อวา point_1 กด Save กด OK

จากนั้นใหเรากลับไปนําเขาขอมูลจุดเขาสู database ทําการเปดโปรแกรมข้ึนมา แลวไปที่

56170180_g1 กดเครื่องมือ จากนัน้เลือก PostGIS Shapefile and DBF louder 2.1

Add File ไปที่ GIS3_58 เลือก point_1.shp จากนั้นกด option เปล่ียนเปน TIS-620 กด

Import

ไปเปด Web Browser ใหเขาไปที่ https://www.iconfinder.com จากนั้นพิมพในชองวา atmใหเรา

เลือกรูปที่ตองการ ขนาดไมเกิน 15 px นามสกุล .png นําเก็บไวที่ GIS3_58 ต้ังชื่อวา atm

จากนั้นกลับไปที่ Geoserver เพื่อนํา point เขาสู geoserver ไปที่ Styles กด Add a new

style เล่ือนลงมา กด เลือกไฟล แลวไปเลือกไฟล point_1.sld ที่สรางไว จากนั้นกด upload

จะมีโคดข้ึนมา ใหเราไปแกโคดบรรทัดที่ 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 ใหเลือกเปน

InternetGIS1:BUU_Data แลวไปที่ point_1 กด publish

เล่ือนมาที่หัวขอ Coordinate Reference Systems กด Find ในชองคนหาพิมพ 32647

จากนั้นกดเลือก จากนั้นไปที่ Bounding Boxes กด Compute from native bounds

จากนั้นกลับไปดานไป กดเลือก Publishing เล่ือนลงมาดานลาง Default style เลือก point_1

จากนั้นชอง available เลือก point_1 แลวกด ยายฝงไปอยูชอง selected จากนั้นกด save

จากนั้นลองไปดูวาขอมูลแลวมีภาพหรอืไม ใหกลับไปที่ Layer preview แลวไปที่ InternetGIS1:

point_1 กด OpenLayers ดูจะไดดังภาพ

การทํา Google Map API

ใหไปทําการสราง Folder ไวใน C:\Program Files\Apache Software Foundation\Tomcat

7.0\webapps ใหต้ังชื่อวา GIS3 และใน GIS3 ใหสราง Folder 56170180_1 เอาไว และไป

สราง Folder ใน D:\GIS3_58 ต้ังชื่อวา backup1

จากนั้นใหไปโหลดเอกสาร HTML ในกลุม gis3 มา แลวเปดข้ึนมา แลวใหทําการ copy ไปวางใน

โปรแกรม EditPlus ดังภาพ

จากนั้นแกโคด ในบรรทัดที่ 14 จาก <script src="googlemap.js"></script> ใหเราเปล่ียนเปน

<script src="map1.js"></script> จากนั้นใหทําการ save เก็บไวใน Folder backup1 ที่สราง

เอาไว ต้ังชื่อวา G1 นามสกุล .HTML

จากนั้นไปสรางเอกสารใหมใน EditPlus แลวไป copy โคด var map จากกลุม GIS3 นํามาวางใน

EditPlus

เปด geoserver ไปที่ layer preview กดดู URL ของขอมูลและทําการ copy ไว

ใหเราทําการแกโคด บรรทัดที่ 38, 40, 46, 48, 54, 56, 62, 64 เปล่ียน URL กับ ชื่อ Layer ให

ตรงกับของเรา จากนั้นให copy บรรทดั 61-68 ไปวางบรรทัดที ่69 แลวเปล่ียนใหเปน ATM ดังนี้

var ATM = new OpenLayers.Layer.WMS("ATM",

"http://localhost:8080/geoserver/InternetGIS1/wms",

{

layers: "InternetGIS:point_1",

transparent: true

},{opacity: 1},

{visibility:false}

);

จะไดดังภาพดานลาง

จากนั้นดูบรรทัดที่ 77 ใหเพิ่ม ATM เขาไป ดังภาพ

แลวให save เก็บไวที่ backup1 ต้ังชื่อวา map1 นามสกุล .js (Javascript)

จากนั้นใหเรา Copy G1.HTML กับ map1.js ที่อยูใน backup1 ไปวางไวใน C:\Program

Files\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170180_1

ลองเปด Web browser ข้ึนมา พิมพ URL วา localhost:8080/GIS3/56170180_1/G1.html

ลงไป ก็จะข้ึนดังภาพ

การใชงาน GeoExtและ OpenLayer

1.โหลด geoext2 เปด Web Browser ข้ึนมา พิมพ geoext2 เลือกตามภาพ จากนั้นกดเขาไป

จากนั้นไปที่ download กดตรง geoext2.1.0 เพื่อเขาไป

เนื่องจาก เวอรชั่นลาสุดคือ 2.1.0 แตที่เราจะไดใชคือ 2.0.3 ใหเราเลือกตามภาพ

ก็จะมาสูตัว v.2.0.3 จากนั้นใหเราโหลด source code(Zip) แลวใหทําการแตกไฟลเก็บไว

2.โหลด openlayer ใหเปด Web Browser ข้ึนมา พิมพ openlayer3 เลือกตามภาพ จากนั้นกด

เขาไป

แลวกดเขาไปที่ 2.xpage

จากนั้นกด โหลด 2.13.1(stable) เลือก .zip ทําการแตกไฟลออกมาเก็บไว

จากนั้นใหเราไปสราง Folder ไวใน C:\Program Files\Apache Software

Foundation\Tomcat 7.0\webapps\GIS3\56170180_1 ต้ังชื่อวา libs แลวนํา geoext และ

openlayer ที่เราแตกไฟลมาไวเก็บไว ดังภาพ

กลับไปที่ เวป geoext2 ไปที่หัวขอ Exaples กดเลือก layer tree

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

ใหทําการ copy โคดทั้งหมด ไปวางใน โปรแกรม EditPuls

แกโคด บรรทัดที่ 19 ต้ังแต <script src="../../website-resources/OpenLayers-2.13.1/

OpenLayers.js"></script> เปล่ียนเปน <script src="Libs/OpenLayers-

2.13.1/OpenLayers.js"></script>

จากนั้นกลับไปที่หนาโคดที่เรากดดูรหสัตนฉบับ ไปบรรทัดที่ 21 กดเขาไปในคําวา loader.js จะ

ปรากฏหนาโคดข้ึนมาใหม ใหเรา copy มา

กลับไปที่โปรแกรม EditPlus เปดเอกสารใหมข้ึนมา และทําการวางโคดที่ copy มาลงไป จากนั้น

ใหดูบรรทัดที่ 5 แกโคด ต้ังแต "../../src เปล่ียนเปน libs/geoext2-2.0.3/src

จากนั้นใหเรา save เก็บไวที่ backup1 ต้ังชื่อวา loader นามสกุล .js

ใหเราไป copy loder.js ที่เราสราง ไปไวใน C:\Program Files\Apache Software

Foundation\Tomcat 7.0\webapps\GIS3\56170180_1 วางลงไป

จากนั้นกลับไปที่ เอกสาร noname1 ใน EditPlus ดูบรรทัดที่ 22 ลบ ../ ออกเหลือแค loader.js

กลับไปที่ เวป geoext อีกครั้ง กดเขา tree.js

เมื่อเขาไปแลวให copy โคดทั้งหมด จากนั้นนําไปวางใน editplus

เปดเอกสารใหม หลังจากนั้นวางโคดลงไป แลวทําการ save เก็บไวใน backup1 ต้ังชื่อวา tree

นามสกุล .js

ใหนํา tree ไปวางที่ C:\Program Files\Apache Software Foundation\Tomcat

7.0\webapps\GIS3\56170180_1

กลับไปที่เอกสาร noname1 ใหเราลบ ต้ังแตบรรทัด 28-37 จากนั้นให save เก็บไวที่ backup1

ต้ังชื่อวา Mymap นามสกุล .HTML

จากนั้นนํา Mymap ไปวางที่ C:\Program Files\Apache Software Foundation\Tomcat

7.0\webapps\GIS3\56170180_1

ลองเปด Web Browser ข้ึนมาพิมพ “localhost:8080/GIS3/56170180_1/Mymap.html”

จะไดดังภาพ

จากนั้นใหเรากลับไปที่ C:\Program Files\Apache Software Foundation\Tomcat 7.

0\webapps\GIS3\56170180_1 เปด tree.js ใน Editplus

ตอไปใหเราไปที่ บรรทัดที่ 34 เปล่ียนจาก center: [14, 37.5] เปน center: [100.925684 ,

13.277333] และบรรทัดที่ 35 เปล่ียนจาก 7 เปน 15 ดังภาพ

หลังจากนั้นใหเราลบบรรทัดที่ 37-45 ออก

เมื่อลบแลวจากนั้นใหลบ บรรทัดที่ 48-68 ออกตอ

บรรทัดที่ 49 ใหเราเปล่ียนจาก"Gas Stations" เปน “ขอบเขต ม.บูรพา”

จากนั้นกลับไปที่ Geoserver ไปที่ layer preview กดดู URL ของขอมูล boundary และทําการ

copy ไว ต้ังแต http://localhost:8080/geoserver/InternetGIS1/wms

จากนั้นนําไปวางที่บรรทัดที่ 50 และกลับไปที่ Geoserver ไปที่ layer preview กดดู URL ของ

ขอมูล boundary ให copy คําวา InternetGIS1:boundary มา นําไปวางที่บรรทัดที่ 51 จะได

ดังภาพ

ไปบรรทัดที่ 59 ทําการเปล่ียนชื่อเปน อาคาร ม.บูรพา

จากนั้นบรรทดัที่ 60 ใหวาง URL http://localhost:8080/geoserver/InternetGIS1/wms ที่

เคย Copy ไวแลววางลงไป และบรรทัดที่ 62 เปล่ียนจาก layers: 'OSM-Bushaltestellen' เปน

layers: ‘InternetGIS1:building' ดังภาพ

ให Copy ต้ังแตบรรทัดที่ 59-70 นําไปวางที่บรรทัดที่ 71

จากนั้นบรรทดัที่ 71 ใหเปล่ียนชื่อเปน ถนน ม.บูรพา บรรทัดที่ 74 ก็เปล่ียนจาก layers:

'InternetGIS1:building' เปน layers: 'InternetGIS1:road' ดังภาพ

จากนั้นให Copy บรรทัดที่ 71-82 นําไปวางที่บรรทัดที่ 83

จากนั้นใหเราทําการเปล่ียนชื่อจาก ถนน ม.บูรพา เปนแหลงน้ํา ม.บูรพา ในบรรทัดที่ 83

สวนบรรทัดที่ 86 ก็เปล่ียนจาก layers: 'InternetGIS1:road' เปน layers: 'InternetGIS1:water'

ดังภาพ

ตอไปใหเราไปที่บรรทัดที่ 97 เปล่ียนจาก new OpenLayers.Layer.WMS("Tasmania (Group

Layer)" เปน new OpenLayers.Layer.WMS("BUU (Group Layer)"

ไปที่บรรทัดที่ 98 ใหนํา URL http://localhost:8080/geoserver/InternetGIS1/wms ที่

เคย Copy ไวแลววางลงไป

จากนั้นบรรทดัที่ 100-103 ใหเราเปล่ียนชื่อ เปน "InternetGIS1:boundary", "

InternetGIS1:building"," InternetGIS1:road", " InternetGIS1:water" ดังภาพ

จากนั้นใหเรากด save เก็บไวใน backup1 ต้ังชื่อวา tree เหมือนเดิม

แลวนําไปวางที่ C:\Program Files\Apache Software Foundation\Tomcat

7.0\webapps\GIS3\56170180_1

จากนั้นทดสอบโดยการเปด URL http://localhost:8080/GIS3/56170180_1/Mymap.html

การทํา GIS Cloud

ใหเราเปดโปรแกรม Qgis ข้ึนมา

จากนั้นไปที่ Plugins > Manage and Install Plugins

ใหเราทําการ พิมพคําวา Qgis cloud ลงไป จากนั้น กด Install เพื่อติดต้ังสวนเสริม

ตอไป พิมพคําวา openlayers plugin ลงไปจากนั้น กด Install เพื่อติดต้ังสวนเสริม จากนั้นกด

ปดโปรแกรมและเปดใหมอีกครั้ง เพื่อเริ่มตนการทํางานสวนเสริมที่เราติดต้ังไป

จากนั้นไปที่เครื่องมือ add vector layer

กด browse แลวใหเราไป ที่ Folder D:\GIS3_58\BUU_LAYER จากนั้นเลือกขอมูล

Boundary.shp, building.shp, Road.shp และWater.shp กด open จากนั้น กด open อีก

ครั้ง

ใหเราทําการเปล่ียนสีขอมูลไดตามใจชอบ เมื่อเปล่ียนสีแลวจะไดดังภาพ

ไปที่ QGIS Cloud กด signup เพื่อทําการสมัคร User

ทําการกรอกขอมูล user ที่ตองการ E-mail ที่ใชงาน และ password

หลังจากใสขอมูลแลวใหเรากด sign up เพื่อสมัคร จากนั้นใหเราไปที่ hotmail ของเราแลวทําการ

ยืนยันขอมูลการสมัครของเรา

จากนั้นใหกลับไปที่โปรแกรม Qgis กด login แลวจะมีหนาตางใหเราใส user กับ password ที่

สมัครลงไป เสร็จแลวกด ok

กด create 1 ครั้ง รอสักครูจะปรากฏขอมูลข้ึนมา

จากนั้นใหเราไปที่ แถบ Upload Data จากนั้นกด Upload Data

หลังจากนั้นจะมีหนาตางเดงข้ึนมาให save ใหเรา save ไปที่ D:\GIS3_58\backup1 ต้ังชื่อวา

online_GIS3_G1

ใหเรากด Add background layer เลือก Google Maps > Google Setellite

จากนั้น กด Publish Map กด save

จะมี Link แผนที่ของเราข้ึนมา ดังภาพ

นํา link ไปเปดดู จะไดดังภาพ