งาน

1. งาน Capture GIS3
จัดทําโดย
นายสุรสิทธิ์ ภูระหงษ
56170180 กลุม1

2. ขั้นตอนการลงโปรแกรม
1. การติดตั้งJava ใหตรวจสอบวาคอมพิวเตอรที่ใชงานวาเปน 32 หรือ 64 bit
จากนั้น เขา Website พิมพ java ใน Google จากนั้นโหลดตามรุนของเรา
- หลังจากนั้นเขาสูขั้นตอนการติดตั้ง ดังนี้
กด Install เพื่อติดตั้ง

3. เมื่อเสร็จแลวจะไดดังภาพ
2. การติดตั้งApache Tomcat
เปด Web Browser พิมพ tomcat7 ใน google จากนั้นใหเลือกดังภาพ

4. ใหกดเขามา จากนั้นใหเลือก 32-bit/64-bit Windows Service Installer (pgp, md5, she1)
จากนั้นเขาสูขั้นตอนการติดตั้งโปรแกรม
กด Next เพื่อเขาสูหนาตางตอไป

5. เมื่อถึงหนานี้ ใหใส User name เปน admin สวน Password เปน tomcat
จากนั้นกด Next ตอไปเรื่อยๆ จนลงโปรแกรมเสร็จ
เมื่อลงเสร็จจะไดดังภาพ กด finish เปนอันจบ

6. จากนั้นสรางโฟลเดอร GIS3_58 ไวที่ไดร D:
ไปที่ Start > Apache Tomcat 7.0 Tomcat7 > Monitor Tomcat เพื่อตั้งคา
จะปรากฏหนาตางขั้นมาดังภาพ จากนั้นไปที่แถบ Java
ในชอง java options ใหพิมพ -DGEOSERVER_DATA_DIR=D:GIS3_58

7. ทําการทดสอบ Tomcat โดยเปด Web Browser พิมพ “localhost:8080” ในชอง URL
3. การติดตั้ง Geoserver
เปด Web Browser พิมพ geoserver ใน google จากนั้น กดเขาไปอันแรก

8. ใหเลือก Stable 2.8.1 Nighty
จากนั้นไปที่ packages เลือก Web Archive

9. เราจะไดไฟลมา จากนั้นใหทําการแตกไฟลออกมา
จะไดดังภาพ

10. ใหเรา Copy ตัว geoserve.war ไปวางใน
C:Program FilesApache Software FoundationTomcat 7.0webapps
ทําการทดสอบ Geoserver เปด Web Browser ขึ้นมาพิมพ “localhost:8080/geoserver”
จากนั้นใส Username : admin และ Password : geoserver กด Login

11. จะไดดังภาพ
4. การติดตั้ง PostGIS
เปด Web Browser พิมพ postgis ใน google เลือกดังภาพ

12. กดเขาสู website จากนั้นกดที่ Download และไปที่หัวขอ Windows Downloads
เลือก PostgreSQL EDB binaries only

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

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

15. กด Next
ชอง Password ใสวา postgis ชอง Retype password ก็ใสวา postgis เชนกัน จากนั้น
กด Next

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

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

18. จะมีหนาตาง 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 จนขึ้นหนาตางโหลด

19. รอดาวนโหลด
จากนั้นกด Next

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

21. เลือกที่เก็บไฟล จากนั้น กด Next
ชองUsername ใส postgress ชอง password ใส postgis ชอง port ใส 5432

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

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

24. ขั้นตอนการใชงานโปรแกรม Postgis
1.สราง database
ไปที่ Start จากนั้นไปที่ PostgreSQL 9.4 เปดโปรแกรม pgAdmin III ขึ้นมา
ดับเบิ้ลคลิกที่ PostgreSQL จะมีหนาตางเดงขึ้นมา ใหใส Password : postgis จากนั้น ok
จากนั้นคลิกขวาที่ Databases เลือก New Database

25. ใหตั้งชื่อ database ตามความตองการของผูใชงาน ในที่นี้ตั้งชื่อ 56170180_g1 จากนั้น ok
จากนั้นไปคลิกที่ 56170180_g1 ใหทํางานดังภาพ

26. ใหไปที่เครื่องมือ พิมพคําวา CREATE EXTENSION POSTGIS; ลงไป แลวนั้นกด
เครื่องหมาย รอจนมีขอความ successfully ขึ้นแสดงวาถูกตองแลว จากนั้นปดหนาตางไป
ตอบ NO
2.การนําเขาขอมูลสู database
กดเครื่องมือ จากนั้นเลือก PostGIS Shapefile and DBF louder 2.1

27. จากนั้นจะมีหนาตางดังภาพ ใหเราเลือก Add File
ใหเลือกไปยังที่ที่เราเก็บขอมูล BUU_LAYER ไว หลังจากนั้นใหเราเลือกขอมูลทั้งหมด กด open

28. จากนั้นใหกด option เปลี่ยนเปน TIS-620 จากนั้นกด ok
กด Import และปดหนาตางไดเลย

29. การนําเขาขอมูลสู Geoserver
เปด Web Browser ขึ้นมาพิมพ http://localhost:8080/geoserver/web ทําการ login ให
เรียบรอย จากนั้นไปที่ แถบ Workspaces
จากนั้นกด Add new workspace

30. ในชอง Name ตั้งชื่อวา InternetGIS1 ชอง Namespace URI ตั้งชื่อวา GI แลวกดติ๊ก Default
จากนั้นกด Submit ดังภาพ
จากนั้นไปที่ Stores

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

32. ใสขอมูลชอง 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 กอน

33. ชอง Abstract : ขอบเขตมหาวิทยาลัยบูรพา วิทยาเขตบางแสน New Keyword : ขอบเขต เสร็จ
แลวเลือก Thai จากนั้นกด Add Keyword
เลื่อนมาที่หัวขอ Coordinate Reference Systems กด Find ในชองคนหาพิมพ 32647
จากนั้นกดเลือก

34. จากนั้นไปที่ Bounding Boxes กด Compute from native bounds จากนั้นกด save
ใหเราทําใหครบทุกชั้นขอมูลที่มีอยู ทําครบแลวจะไดดังภาพ

35. ทดสอบเปดดูขอมูลไปที่ Layer Preview เลือก InternetGIS1:boundary
คลิก OpenLayers
จะไดดังภาพ

36. การใสสีและสัญลักษณใหกับชั้นขอมูล โดยโปรแกรม Qgis
1.เปดโปรแกรม Qgis ขึ้นมา จากนั้นไปที่เครื่องมือรูปชาง ดังภาพ
กด new

37. จากนั้นใหใส Name:group1 ชอง Host : localhost ชอง Database : 56170038_group1
ชอง SSL mode : allow ชอง Username : postgres ชอง Password : postgis
เสร็จแลวใหลองกด Test Connect ถาถูกตองจะไดดังภาพ แลวOK
กด connect กด public เลือก boundary กด Add

38. จะมีหนาตางเดงมา ใหเราเลือก Coordinate Reference Selector >> พิมพในชองFilter :
32647 แลวเลือก EPSG :32647 กด OK
จะไดดังภาพ จากนั้นใหดับเบิ้ลคลิกที่ boundary เพื่อเปลี่ยนสี

39. กด color เลือกสีที่ชอบ จากนั้นไปที่ style > save style > SlD Fileเก็บไวใน GIS3_58 ตั้งชื่อ
วา boundary_group1 กด Save กด OK
จากนั้นเปด Geoserver ขึ้นมาไปที่ Styles กด Add a new style

40. เลื่อนลงมา กด เลือกไฟล แลวไปเลือกไฟล boundary_group1 ที่สรางไว จากนั้นกด upload
จะไดดังภาพ จากนั้นกด preview legend แลวกด Submit

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

42. เลื่อนลงมาดานลาง Default style เลือก boundary_group1 จากนั้น ชอง available เลือก
boundary_group1 แลวกด ยายฝงไปอยูชอง selected จากนั้นกด save
จากนั้นลองไปดูวาขอมูลแลวมีสีหรือไม ใหกลับไปที่ Layer preview แลวไปที่ InternetGIS1:
boundary กด OpenLayers ดูจะไดดังภาพ

43. การใสสีใหกับขอมูล building
กดเลือก building กด add
แลวจะมีหนาตางเดงมา ใหเราเลือก Coordinate Reference Selector >> พิมพในชองFilter :
32647 แลวเลือก EPSG :32647 กด OK จากนั้นจะไดดังภาพ

44. ดับเบิ้ลคลิกที่ building จากนั้นเปลี่ยนจาก single symbol เปน Categorized
ชอง column เลือก Name แลวกด classify จะไดดังภาพ

45. จากนั้นไปที่ style > save style > SlD Fileเก็บไวใน GIS3_58 ตั้งชื่อวา building_group1 กด
Save กด OK
จากนั้นใหเปด Geoserver ขึ้นมาไปที่ Styles กด Add a new style เลื่อนลงมา กด เลือกไฟล
แลวไปเลือกไฟล building_group1 ที่สรางไว จากนั้นกด upload

46. จะไดดังภาพ จากนั้นกด preview legend แลวกด Submit
จากนั้นไปที่ layers เลือก building กด Publishing เลื่อนลงมาดานลาง Default style เลือก
building_group1

47. จากนั้นชอง available เลือก building_group1 แลวกด ยายฝงไปอยูชอง selected จากนั้นกด
save
จากนั้นลองไปดูวาขอมูลแลวมีสีหรือไม ใหกลับไปที่ Layer preview แลวไปที่ InternetGIS1:
building กด OpenLayers ดูจะไดดังภาพ

48. การสรางและใสสัญลักษณใหขอมูลจุด
เปดโปรแกรม qgis ขึ้นมา จากนั้นใหทําการ เลือก group1 กด connect จากนั้นเลือกขอมูล
boundary และ building กด add
ใหเลือกระบบพิกัด EPSG 32647 กด ok

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

50. ชอง 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

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

52. ทําจนครบตามตองการจะไดดังภาพ กด save
ใหเราทําการดับเบิ้ลคลิก point_1จากนั้นไปที่ style > save style > SlD Fileเก็บไวใน
GIS3_58 ตั้งชื่อวา point_1กด Save กด OK

53. จากนั้นใหเรากลับไปนําเขาขอมูลจุดเขาสู 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

54. จากนั้นกลับไปที่ 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
หากโคดถูกจะปรากฏรูปไอคอนที่เราไปโหลดมา ดังภาพดานลาง

55. จากนั้นไปที่ layers > add a new resource จากนั้นชอง add layer from ใหเลือกเปน
InternetGIS1:BUU_Data แลวไปที่ point_1 กด publish

56. เลื่อนมาที่หัวขอ Coordinate Reference Systems กด Find ในชองคนหาพิมพ 32647
จากนั้นกดเลือก จากนั้นไปที่ Bounding Boxes กด Compute from native bounds
จากนั้นกลับไปดานไป กดเลือก Publishing เลื่อนลงมาดานลาง Default style เลือก point_1
จากนั้นชอง available เลือก point_1 แลวกด ยายฝงไปอยูชอง selected จากนั้นกด save

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

58. การทํา Google Map API
ใหไปทําการสราง Folder ไวใน C:Program FilesApache Software FoundationTomcat
7.0webapps ใหตั้งชื่อวา GIS3 และใน GIS3 ใหสราง Folder 56170180_1 เอาไว และไป
สราง Folder ใน D:GIS3_58 ตั้งชื่อวา backup1

59. จากนั้นใหไปโหลดเอกสาร HTML ในกลุม gis3 มา แลวเปดขึ้นมา แลวใหทําการ copy ไปวางใน
โปรแกรม EditPlus ดังภาพ

60. จากนั้นแกโคด ในบรรทัดที่ 14 จาก <script src="googlemap.js"></script> ใหเราเปลี่ยนเปน
<script src="map1.js"></script> จากนั้นใหทําการ save เก็บไวใน Folder backup1 ที่สราง
เอาไว ตั้งชื่อวา G1 นามสกุล .HTML
จากนั้นไปสรางเอกสารใหมใน EditPlus แลวไป copy โคด var map จากกลุม GIS3 นํามาวางใน
EditPlus

61. เปด 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}
);

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

63. แลวให save เก็บไวที่ backup1 ตั้งชื่อวา map1 นามสกุล .js (Javascript)
จากนั้นใหเรา Copy G1.HTML กับ map1.js ที่อยูใน backup1 ไปวางไวใน C:Program
FilesApache Software FoundationTomcat 7.0webappsGIS356170180_1

64. ลองเปด Web browser ขึ้นมา พิมพ URL วา localhost:8080/GIS3/56170180_1/G1.html
ลงไป ก็จะขึ้นดังภาพ

65. การใชงาน GeoExtและ OpenLayer
1.โหลด geoext2 เปด Web Browser ขึ้นมา พิมพ geoext2 เลือกตามภาพ จากนั้นกดเขาไป
จากนั้นไปที่ download กดตรง geoext2.1.0 เพื่อเขาไป

66. เนื่องจาก เวอรชั่นลาสุดคือ 2.1.0 แตที่เราจะไดใชคือ 2.0.3 ใหเราเลือกตามภาพ
ก็จะมาสูตัว v.2.0.3 จากนั้นใหเราโหลด source code(Zip) แลวใหทําการแตกไฟลเก็บไว

67. 2.โหลด openlayer ใหเปด Web Browser ขึ้นมา พิมพ openlayer3 เลือกตามภาพ จากนั้นกด
เขาไป
แลวกดเขาไปที่ 2.xpage

68. จากนั้นกด โหลด 2.13.1(stable) เลือก .zip ทําการแตกไฟลออกมาเก็บไว
จากนั้นใหเราไปสราง Folder ไวใน C:Program FilesApache Software
FoundationTomcat 7.0webappsGIS356170180_1 ตั้งชื่อวา libs แลวนํา geoext และ
openlayer ที่เราแตกไฟลมาไวเก็บไว ดังภาพ

69. กลับไปที่ เวป geoext2 ไปที่หัวขอ Exaples กดเลือก layer tree
ใหเราคลิกขวาที่โลง จากนั้นกด ดูรหัสตนฉบับ

70. ใหทําการ copy โคดทั้งหมด ไปวางใน โปรแกรม EditPuls
แกโคด บรรทัดที่ 19 ตั้งแต <script src="../../website-resources/OpenLayers-2.13.1/
OpenLayers.js"></script> เปลี่ยนเปน <script src="Libs/OpenLayers-
2.13.1/OpenLayers.js"></script>

71. จากนั้นกลับไปที่หนาโคดที่เรากดดูรหัสตนฉบับ ไปบรรทัดที่ 21 กดเขาไปในคําวา loader.js จะ
ปรากฏหนาโคดขึ้นมาใหม ใหเรา copy มา
กลับไปที่โปรแกรม EditPlus เปดเอกสารใหมขึ้นมา และทําการวางโคดที่ copy มาลงไป จากนั้น
ใหดูบรรทัดที่ 5 แกโคด ตั้งแต "../../src เปลี่ยนเปน libs/geoext2-2.0.3/src

72. จากนั้นใหเรา save เก็บไวที่ backup1 ตั้งชื่อวา loader นามสกุล .js
ใหเราไป copy loder.js ที่เราสราง ไปไวใน C:Program FilesApache Software
FoundationTomcat 7.0webappsGIS356170180_1 วางลงไป

73. จากนั้นกลับไปที่ เอกสาร noname1 ใน EditPlus ดูบรรทัดที่ 22 ลบ ../ ออกเหลือแค loader.js
กลับไปที่ เวป geoext อีกครั้ง กดเขา tree.js

74. เมื่อเขาไปแลวให copy โคดทั้งหมด จากนั้นนําไปวางใน editplus
เปดเอกสารใหม หลังจากนั้นวางโคดลงไป แลวทําการ save เก็บไวใน backup1 ตั้งชื่อวา tree
นามสกุล .js

75. ใหนํา tree ไปวางที่ C:Program FilesApache Software FoundationTomcat
7.0webappsGIS356170180_1
กลับไปที่เอกสาร noname1 ใหเราลบ ตั้งแตบรรทัด 28-37 จากนั้นให save เก็บไวที่ backup1
ตั้งชื่อวา Mymap นามสกุล .HTML

76. จากนั้นนํา Mymap ไปวางที่ C:Program FilesApache Software FoundationTomcat
7.0webappsGIS356170180_1
ลองเปด Web Browser ขึ้นมาพิมพ “localhost:8080/GIS3/56170180_1/Mymap.html”
จะไดดังภาพ

77. จากนั้นใหเรากลับไปที่ C:Program FilesApache Software FoundationTomcat 7.
0webappsGIS356170180_1 เปด tree.js ใน Editplus
ตอไปใหเราไปที่ บรรทัดที่ 34 เปลี่ยนจาก center: [14, 37.5] เปน center: [100.925684 ,
13.277333] และบรรทัดที่ 35 เปลี่ยนจาก 7 เปน 15 ดังภาพ

78. หลังจากนั้นใหเราลบบรรทัดที่ 37-45 ออก
เมื่อลบแลวจากนั้นใหลบ บรรทัดที่ 48-68 ออกตอ

79. บรรทัดที่ 49 ใหเราเปลี่ยนจาก"Gas Stations" เปน “ขอบเขต ม.บูรพา”
จากนั้นกลับไปที่ Geoserver ไปที่ layer preview กดดู URL ของขอมูล boundary และทําการ
copy ไว ตั้งแต http://localhost:8080/geoserver/InternetGIS1/wms

80. จากนั้นนําไปวางที่บรรทัดที่ 50 และกลับไปที่ Geoserver ไปที่ layer preview กดดู URL ของ
ขอมูล boundary ให copy คําวา InternetGIS1:boundary มา นําไปวางที่บรรทัดที่ 51 จะได
ดังภาพ
ไปบรรทัดที่ 59 ทําการเปลี่ยนชื่อเปน อาคาร ม.บูรพา

81. จากนั้นบรรทัดที่ 60 ใหวาง URL http://localhost:8080/geoserver/InternetGIS1/wms ที่
เคย Copy ไวแลววางลงไป และบรรทัดที่ 62 เปลี่ยนจาก layers: 'OSM-Bushaltestellen' เปน
layers: ‘InternetGIS1:building' ดังภาพ
ให Copy ตั้งแตบรรทัดที่ 59-70 นําไปวางที่บรรทัดที่ 71

82. จากนั้นบรรทัดที่ 71 ใหเปลี่ยนชื่อเปน ถนน ม.บูรพา บรรทัดที่ 74 ก็เปลี่ยนจาก layers:
'InternetGIS1:building' เปน layers: 'InternetGIS1:road' ดังภาพ
จากนั้นให Copy บรรทัดที่ 71-82 นําไปวางที่บรรทัดที่ 83

83. จากนั้นใหเราทําการเปลี่ยนชื่อจาก ถนน ม.บูรพา เปนแหลงน้ํา ม.บูรพา ในบรรทัดที่ 83
สวนบรรทัดที่ 86 ก็เปลี่ยนจาก layers: 'InternetGIS1:road' เปน layers: 'InternetGIS1:water'
ดังภาพ
ตอไปใหเราไปที่บรรทัดที่ 97 เปลี่ยนจาก new OpenLayers.Layer.WMS("Tasmania (Group
Layer)" เปน new OpenLayers.Layer.WMS("BUU (Group Layer)"

84. ไปที่บรรทัดที่ 98 ใหนํา URL http://localhost:8080/geoserver/InternetGIS1/wms ที่
เคย Copy ไวแลววางลงไป
จากนั้นบรรทัดที่ 100-103 ใหเราเปลี่ยนชื่อ เปน "InternetGIS1:boundary", "
InternetGIS1:building"," InternetGIS1:road", " InternetGIS1:water" ดังภาพ

85. จากนั้นใหเรากด save เก็บไวใน backup1 ตั้งชื่อวา tree เหมือนเดิม
แลวนําไปวางที่ C:Program FilesApache Software FoundationTomcat
7.0webappsGIS356170180_1

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

87. การทํา GIS Cloud
ใหเราเปดโปรแกรม Qgis ขึ้นมา
จากนั้นไปที่ Plugins > Manage and Install Plugins

88. ใหเราทําการ พิมพคําวา Qgis cloud ลงไป จากนั้น กด Install เพื่อติดตั้งสวนเสริม
ตอไป พิมพคําวา openlayers plugin ลงไปจากนั้น กด Install เพื่อติดตั้งสวนเสริม จากนั้นกด
ปดโปรแกรมและเปดใหมอีกครั้ง เพื่อเริ่มตนการทํางานสวนเสริมที่เราติดตั้งไป

89. จากนั้นไปที่เครื่องมือ add vector layer
กด browse แลวใหเราไป ที่ Folder D:GIS3_58BUU_LAYER จากนั้นเลือกขอมูล
Boundary.shp, building.shp, Road.shp และWater.shp กด open จากนั้น กด open อีก
ครั้ง

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

91. ทําการกรอกขอมูล user ที่ตองการ E-mail ที่ใชงาน และ password
หลังจากใสขอมูลแลวใหเรากด sign up เพื่อสมัคร จากนั้นใหเราไปที่ hotmail ของเราแลวทําการ
ยืนยันขอมูลการสมัครของเรา

92. จากนั้นใหกลับไปที่โปรแกรม Qgis กด login แลวจะมีหนาตางใหเราใส user กับ password ที่
สมัครลงไป เสร็จแลวกด ok
กด create 1 ครั้ง รอสักครูจะปรากฏขอมูลขึ้นมา

93. จากนั้นใหเราไปที่ แถบ Upload Data จากนั้นกด Upload Data
หลังจากนั้นจะมีหนาตางเดงขึ้นมาให save ใหเรา save ไปที่ D:GIS3_58backup1 ตั้งชื่อวา
online_GIS3_G1

94. ใหเรากด Add background layer เลือก Google Maps > Google Setellite
จากนั้น กด Publish Map กด save

95. จะมี Link แผนที่ของเราขึ้นมา ดังภาพ
นํา link ไปเปดดู จะไดดังภาพ