GIS3

1. Download java เข้า google พิมพ์ Download jre7 เลือกลิ้ง 2
ดังรูป เลือกตาม OS ของเรา ดูว่ากี่Bit
1.ติดตั้ง JAVA , Tomcat , Geoserver

2. ขึ้นให้เรากด Download
ดับเบิ้ลคลิกเข้าไป ดังรูป

3. กด Install
รอโหลดให้เสร็จ

4. กด Close
เข้า google พิมพ์ Download tomcat 7 เลือกลิ้งค์ 1

5. จะขึ้นดังรูป
กดเลือกตามภาพ

6. ขึ้นกดให้ Download
ดับเบิ้ลคลิกตามภาพ

7. กด Next
คลิก I Agree

8. คลิก ถูก วงสีแดง แล้วกด Next
ใส่ User Name :adminและ Password:tomcat แล้วกด Next

9. เลือกที่เก็บ แล้วกด Next
คลิก Install

10. รอโหลด
คลิก Finish

11. เข้า google พิมพ์ Download geoserver เลือกลิ้งค์ 2
ขึ้นดังภาพ คลิก Nighty ดังภาพ

12. คลิกตามภาพ
ขึ้น Download

13. ดับเบิ้ลคลิกเข้าไป ตามภาพ
Copy ข้อมูล ดังภาพ

14. ไปวางไว้ใน Webapps ตามภาพ
เข้า google พิมพ์ EditPlus 3 เลือกลิ้งค์ 2

15. จะขึ้นดังภาพ เลือกตามภาพ
ขึ้น Download

16. ดับเบิ้ลคลิก ตามภาพ
กด Accept

17. กด Start Copy
จะได้ดังภาพ แล้ว ดับเบิ้ลคลิกเข้าไป

18. ให้ใส่ Usename และ Password แล้วกด Register
จะขึ้นดังภาพ

19. เข้า google พิมพ์ Download postgresql เลือกลิ้งค์ 1
กด คลิก Windows ตามภาพ

20. คลิก Download
เลือกตาม OS ของเครื่อง

21. ขึ้น Download ดังภาพ
ดับเบิ้ลคลิก ตามภาพ

22. กด Next
กด Next

23. ใส่ Password : Postgis
กด Next

24. เลือกตามภาพ และกด Next
กด Next

25. รอโหลด
กด Finish

26. เลือกตามภาพ และกด Next
เลือกตามภาพ ให้ดูที่ Bit แล้วกด Next

27. หาที่เก็บ แล้วกด Next
รอโหลด

28. เข้า google พิมพ์ Download postgis เลือก ลิ้งค์ 1
ขึ้นตามรูป แล้วเลือกตามรูป

29. เลือก pg94
คลิกตามรูป (ให้เลือกตาม Bit)

30. ขึ้นให้กด Download ดังภาพ
ดับเบิ้ลคลิก ตามภาพ

31. คลิก I Agree
คลิกถูกตามภาพ แล้วกด Next

32. คลิก Next
ใส่ User Name :Postgresและ Password:postgis แล้วกด Next

33. กด Install
รอโหลด

34. โหลดเสร็จ กด Close
สร้าง Folder ที่จะจัดเก็บงาน

35. Copy file ที่ใช้ในการเรียน จากกลุ่ม GIS3 ที่ใช้เรียน
เปิด Tomcat ขึ้นมา แล้วไปที่ Java แล้วพิมพ์ –DGEOSERVER_DATA_DIR=D: GIS3 ส่วนนี้คือที่
เก็บ file งาน แล้วกด apply

36. มาที่ General แล้ว กด star ถ้า star อยู่แล้ว ให้กด stop แล้ว กด star ใหม่ อีกครั้ง
เข้า เว็บเบราว์เซอร์ พิมพ์ http://localhost:8080/geoserver จะเข้าหน้า Geoserver
แล้วใส่ Username ว่า admin และ Password ว่า geoserver แล้ว คลิก Login

37. จะขึ้นดังภาพ
คลิกที่ Layer Preview จะยังไม่ขึ้นข้อมูล เพราะยังไม่ได้ใส่ ต้องใส่ข้อมูลก่อนถึงขึ้น

38. เปิดโปรแกรม Postgres ขึ้นมา ใส่รหัส postgis แล้ว ok
จะได้ดังรูป

39. .ให้คลิก Server ของเรา แล้วใส่รหัส
.จะปรากฎหน้าต่างให้เราให้เราชื่อ database ตรงช่อง Name แล้วกด OK

40. .จะได้ Databaseของเรา
.คลิกที่รูปแว่นขยาย SQL เพื่อจะเพิ่ม Extensionของpostgis

41. ให้พิมพ์CREATE EXTENSION POSTGIS แล้วก็กดเครื่อง หมาย play จะได้ postgis เพิ่มมาอีกหนึ่งเครื่องมือ
8.คลิกที่รูปจิ๊กซอ Execute the last used plugin>>>postGIS shapefile and DBF loader 2.2

42. .จะขึ้นหน้าต่างดังภาพแล้วคลิก Add File ไปที่เก็บงาน เลือกไฟล์งานแล้วกด Open
.
.คลิกที่ Option

43. . เปลี่ยนตรงช่องให้พิมพ์ TIS-620 แล้วกด OK
กดImport แล้วกด ออก

44. คลิ๊กที่เครื่องหมายบวกหน้า Database >>Schemaspublic
คลิ๊กขวา Refesh ที่ Table จะปรากฎ ข้อมูลที่เรา Import เข้ามา

45. ไปที่ web browser เพื่อจะเช็คการทางานของ Tomcat พิมพว่า locolhost:8080
แล้วพิมพ locolhost:8080/geoserver เพื่อเข้า Geoserver > เข้าระบบโดย ใส่ username เป็น admin และใส่
รหัสเป็น geoserver จากนั้นกด login

46. คลิก server status เปลี่ยน Data directory เป็น D:GIS3_58
ดังรูป

47. กรอกประวัติผู้จัดทำแล้วแต่ว่ำจะกรอกไม่กรอก

48. เกี่ยวกับ
ไว้ดูแผนที่

49. พื้นที่ในกำรทำงำน เป็นเหมือนแฟ้มกำรทำงำนของเรำ ก่อนจะมีขอ้มูล หรือ Shapefile
กดที่ Workspaces > กด Add new workspaces

50. ตั้งชื่อ workspaces ว่า InternetGIS3 > ตั้งชื่อ Namespaces URI ว่า Gi > คลิก Default Workspaces >
Submit
เมื่อสร้างเสร็จจะปรากฏชื่อ workspaces ที่เราสร้าง

51. เมื่อสร้าง workspaces เสร็จ ต่อไปต้องสร้าง Stores ต่อ > กดที่ Stores > Add new Stores
คลิกที่ PostGIS

52. ช่อง Data Source Name* ตั้งชื่อว่า BUU Data > ช่อง Description ใส่คา ว่า DataBase of Burapha
University ในช่อง Database ที่เราตั้งใน Postgres ว่า 56170253 > ช่อง Username ใส่ว่า postgres ในช่อง
Passwd ใส่รหสัเป็น postgis > กด save

53. ในช่อง Abstract ใส่คา อธิบายว่า ขอบเขตของมหาวิทยาลัยบูรพา วิทยาเขตบางแสน > ในช่อง New Keyword
ใส่คาว่า ขอบเขต > เลือก Thai > Add Keyword

54. ช่อง Coordinate Reference Systems > คลิก Find
พิมพ์ 32647 เมื่อเจอแล้วกดเลือก

55. คลิก Compute from native bounds แลว้จะปรากฏค่าพิกัดขึ้น > save
.จะปรากฏชั้นข้อมูล boundary

56. คลิกที่ Layer Preview > คลิกที่ OpenLayers ในชั้นข้อมูล boundary
ได้ ข้อมูล boundary ขึ้นมา

57. ไปคลิกที่ Layers > คลิก Add a new resource (ทาเหมือนเดิมแต่เปลี่ยนข้อมูล)
.เลือกเป็น InternetGIS3:BUU Data

58. เลือก Publish ในช่อง building
ในช่อง Abstract ใส่คา อธิบายว่า อาคารในมหาวิทยาลัยบูรพา วิทยาเขตบางแสน > ในช่อง New Keyword ใส่คา
ว่า บูรพา > เลือก Thai > ในช่อง Vocabulary ใส่คาว่า Burapha > Add Keyword

59. ไปที่ส่วน Coordinate Reference Systems > Find
พิมพ์ 32647 เมื่อเจอแลว้กดเลือก

60. คลิก Compute from native bounds แลว้จะปรากฏค่าพิกัดขึ้น > save
จะขึ้นชั้นข้อมูล building

61. คลิกที่ Layer Preview > คลิกที่ OpenLayers ในชั้นข้อมูล building
จะปรากฏข้อมูล building ขึ้น

62. เปิดโปรแกรม QGIS
กด Add PostGIS Layers (ช้างที่มีบวก)

63. กด New
ตั้งชื่อเป็น group03 > Host ตั้งเป็น localhost > ตั้งชื่อ Database ว่า 56170253 > ช่อง username ตั้ง เป็น
postgres > ช่อง password ตั้งเป็น postgis > กด save username และ password > ใส่เสร็จกด Test
connect > กด OK 2 ครั้ง

64. กด connect
กดบวก public > เลือกข้อมูล > คลิก Add

65. พิมพ์ 32647 เลือกพิกัด WGS 84 / UTM zone 47N > OK (ทา 2 ครั้งเพราะเราเลือก 2 ข้อมูล)
เลื่อน bouandary มาไวข้างล่าง building

66. ได้ดังรูป
ดับเบิ้ลคลิกชั้นข้อมูล building

67. ไปที่ Style > เปลี่ยนจาก Single Symbol เป็น Categorized > colum เลือก name > Classify > Apply
ไปที่ Style มุมล่างซ้าย > Save Style > SLD File

68. ตั้งชื่อว่า building > Save > OK
ไปที่เวป Geoserver > ไปที่ Styles > คลิก Add new Style

69. คลิก เลือกไฟล์
เลือก building.sld > Open

70. กด upload (โค้ดจะปรากฏขึ้น) > คลิก Preview legend > คลิก Submit
ไปที่ Layers > คลิก building

71. กด Publishing .ช่อง Default Style เปลี่ยนจาก Polygon เป็น building > ช่อง Available Styles เลือก building
ย้ายไปช่อง Selected Styles > save
คลิก Layer Preview > คลิก OpenLayers ในช่อง building

72. จะปรากฏข้อมูลขึ้น

73. เปิดโปรแกรม QGIS ขึ้นมา
ไปที่ Add PostGIS Layers (ช้าง)

74. จะปรากฏหน้าต่าง Add PostGIS Table(s) > เลือกเป็น group3 > กด connect >> กด+หน้า public >
เลือกข้อมูล bouandary และ building > Add
ใส่พิกัด พิมพ์ 32647 ข้อมูลเลือก WGS 84 / UTM zone 47N > OK (ทา ซ้า 2 ครั้งเพราะเรามี 2 ข้อมูล)

75. .เลื่อน bouandary มาไว้ด้านล่าง building
ไปคลิกคา สั่ง New Shapefile Layer

76. จะปรากฏหน้าต่าง New Vector Layer > เลือก Point > File encoding เลือกเป็น TIS-620 > Selected CRS
เลือกเป็น EPGS:36247,WGS 84 / UTM zone 47N > ช่อง Name ตั้งชื่อว่า Name > กด Add attrbute to list
> OK
เลือกที่ save > Disk D > ไปที่ floder ชื่อ GIS3_58 > ไปที่ floder ชื่อ BUU_LAYER > ตั้งชื่อว่า ATM_3 >
save

77. ไปที่เครื่องมือ Toggle Edting
ไปที่เครื่องมือ Add Feature

78. ให้ไปจุดตรงที่มี ATM
.ใส่เลขลาดับของจุด > ตั้งชื่อ > OK > จุด ATM จนครบทุกตู้ในแผนที

79. เมื่อจุดครบแล้วไปกดที่เครื่องมือ Toggle Edting > save
ดับเบิ้ลคลิกที่ ATM_3 > จะปรากฏหน้าต่าง Leyer Properties ขึ้น ไปที่ Style (มุมล่างซ้าย) > Save Style >
SLD File ตั้งชื่อว่า ATM_3 และ save ใน folder ชื่อ GIS3_58

80. save ใน folder ชื่อ GIS3_58 ตั้งชื่อว่า ATM_3 > save > OK
เข้า Geoserver โดยไปที่ web browser พิมพ์ว่า locolhost:8080/geoserver

81. เปิด Tab ใหม่ขึ้นมา 1 อัน แล้วพิมพ์คาว่า www.iconfinder.com > ค้นหาคาว่า ATM
ปรับขนาดของ icon เป็น 16
.

82. .เลือกไฟล์ icon อันไหนก็ไดที่มีคาว่า PNG > คลิกเข้าไปที่ icon > คลิกดาวน์โหลดตรงคา ว่า PNG
Copy ไฟล์ที่โหลดมาไปวาง > Disk D > GIS3_58 > วางในโฟล์เดอร์

83. แล้วเปลี่ยนชื่อเป็น atm3
จากนั้นเปิดโปรแกรม pgAdmin III
เข้าไปที่ Database ของเรา > Schemas > คลิก+ตรงหน้า public > Tables

84. .ไปที่เครื่องมือ Execute the last used plugin (รูปจิ๊กซอว์) > PostGIS Shapefile and DBF loader 2.2
จะปรากฏหน้าต่าง PostGIS Shapefile Import/Export Manager > Import > Add File

85. เลือกไฟล์ชื่อ ATM_3 > open
กด Options

86. .เปลี่ยนจาก UTF-8 เป็น TIS-620 > OK
.กด Import

87. .เข้าไปที่เวป Geoserver > Styles
.กด Add new styles

88. .กดเลือกไฟล์ > เลือก > ATM_3 > open
กด Upload จะขึ้นโค้ด > กด Preview Legend > ตัวอย่างจุดจะแสดงขึ้นมา

89. .เข้า Facebook > เข้ากลุ่ม GIS3 > copy โค้ด ดังภาพ
เลือกบรรทัดที่ 11-22

90. .Ctrl+v โค้ดใหม่ที่ copy มา แทนลงไป
.เติมเลข 3 หลัง atm ในบรรทัด ที่ 13

91. กด Validate (การแก้ไขโค้ด) > Preview Legend > Sumid
ไปที่ Layers > กด Add new resource

92. .เลือก InternetGIS3:BUU Data
กด publish ของ ATM_3

93. ไปที่ส่วน Coordinate Reference Systems > Find พิมพ์32647 เมื่อเจอแล้วกดเลือก
คลิก Compute from native bounds แล้วจะปรากฏค่าพิกัดขึ้น

94. กด Publishing
ไปที่ช่อง Default Style เลือก เป็น ATM_3 ช่อง Available Styles เลือก ATM_3 ย้ายไปช่อง Selected Styles >
save

95. ไปที่ Layer Preview .กด OpenLayers ของ InternetGIS3: ATM_3
ข้อมูลจุด ATM จะปรากฏขึ้น

96. ไปที่ Disk C > Progarm files > Apache Software Fouandation > Tomcat 7.0 > webapps > GIS3 >
คลิกขวาสร้าง floder ของเรา ตั้งชื่อเป็นรหัสนิสิตตามด้วยกลุ่ม 56170253_3 > เข้า floder 56170173_3 > สร้าง
floder ใหม่ตั้งชื่อว่า WEB-INF (ในTomcat เราต้องสร้าง floder ชื่อ WEB-INF ไว้ใน floder ที่เรา ต้องการเผยแผ่)
เข้า EditPlus

97. คลิก NEW เลือก Normal Text หรือ Ctrl + N

98. พิมพ์โค้ด พร้อมใส่รหัสสี ดังรูป

99. กด File > save As
saveใน floder ชื่อ 56170253_3 > ตั้งชื่อเป็นรหัสนิสิตตามด้วย.html > 56170253.html > ช่อง Save as type
เลือกเป็น HTML > กด save > กดปิดโปรแกรม EditPlus 3

100. ไปที่ web browser แล้วพิมพ์ว่า locolhost:8080/GIS3/56170253_3 /56170253_3.html > ข้อมูลจะปรากฏ

101. .เปิด Tab ของ web browser ขึ้นมาใหม่ 1 อัน > แลว้พิมพ์ค้นหาคาว่า openlayers google maps v3 example
คลิกขวาที่พื้นที่ว่าง > เลือกดูรหัสต้นฉบับ

102. คลิก google-v3.js
เลือกทั้งหมด Ctrl + A และ Ctrl + C

103. เข้า EditPlus คลิก Ctrl+V วางข้อมูล และให้ลบตั้งแต่ บรรทัดที่ 33-39
เปลี่ยนเลข 5 เป็น 15 ในบรรทัดที่ 31 เพื่อให้แผนที่ซูมเข้าไปมากขึ้น
ใส่พิกัด ตรง ชั้น 28 (100.925684 , 13.277333)

104. กด File > save > saveใน floder ชื่อ 56170253_3 > ตั้งชื่อ > googlemap3 > ในช่อง Save as type เลือก
เป็น .js > กด save > กดปิดโปรแกรม EditPlus 3

105. ไปที่ Disk C > Progarm files > Apache Software Fouandation > Tomcat 7.0 > webapps > GIS3 >
56170253_3 > คลิกขวาที่ไฟล์ 56170253_3.html > EditPlus 3
ให้ลบข้อมูลออก .ลบ HELLO WOLD และโค้ดสี

106. ให้พิมพ์โค้ด บรรทัดที่ 4
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="googlemap_3.js"></script>

107. ให้พิมพ์ โค้ดเพิ่ม บรรทัดที่ 8 > Ctrl+S เพื่อ save
<BODY onload="init()">
<div id="map" class="smallmap"></div>
</BODY>
คลิกเครื่องหมาย + ที่มุมบนขวาแล้วเลือกแบบแผนที่ ข้อมูลแผนที่จะปรากฏขึ้น

108. โหลดไฟล์ ชื่อ proj4js.rar จาก facebook กลุ่ม GIS3
แตกไฟล์ proj4js.rar
ไปที่ Disk C > Progarm files > Apache Software Fouandation > Tomcat 7.0 > webapps >
วางโฟล์เดอร์ proj4js

109. เข้าโฟล์เดอร์ proj4js > lib > defs > ใช้ EPSG0900913.js
Disk C > Progarm files > Apache Software Fouandation > Tomcat 7.0 > webapps > GIS3 >
56170253_3 > คลิกขวาที่ไฟล์ 56170253_3.html > EditPlus 3

110. คลิกขวาที่ไฟล์ googlemap3.js > EditPlus 3
แก้โค้ดของ html ก่อน

111. ไปที่กลุ่ม GIS3 > Copy โค้ด
กลับไปที่ EditPlus 3 > กด Enter หลัง </script>
วางโค้ดที่ copy มาในบรรทัดที่ 6

112. ใส่ comment ให้โค้ดหลัง TITLE ว่า <!--Google Map API--> บรรทัดที่ 4
.ลบโค้ดที่ไม่จา เป็นออก ในบรรทัดที่15

113. กด Ctrl+s เพื่อ save
ไปที่โค้ดของ googlemap3 .js

114. ให้พิมพ์โค้ด บรรทัดที่ 2-14 ดังภาพ
//Extent Bound
var minx = -20037508.34;
var miny = -20037508.34;
var maxx = 20037508.34;
var maxy = 20037508.34;
var prj32647 = new OpenLayers.Projection("EPSG:32647");
var prjGoogle = new OpenLayers.Projection("EPSG:900913");
var prj4326 = new OpenLayers.Projection("EPSG:4326");
var bounds = new OpenLayers.Bounds(minx,miny,maxx,maxy);
bounds.transform(prj32647, prjGoogle);
var option = {maxExtent:bounds, maxResolution:'auto', units:'m',
projection: prjGoogle,displayProjection:prj4326};
map = new OpenLayers.Map('map', option );

115. ให้เลือก บรรทัดที่ 2-14 แล้ว คลิกขวา เลือก Cut หรือ Ctrl+X
จากนั้นให้ลบโค้ดในบรรทัดที่ 4 ทิ้ง

116. .แล้วกด Ctrl+v เพื่อวางข้อมูล > Ctrl+s เพื่อ save

117. ไปที่ Disk C > Progarm files > Apache Software Fouandation > Tomcat 7.0 > webapps > GIS3 >
56170253_3 > เลือก 56170253_3.html คลิกขวา เลือก EditPlus
เลือก googlemap_3.js คลิกขวา เลือก Editplus

118. .เปิดไฟล์ HTML.docx > Copy ทั้งหมด
ลบข้อมูลทั้งหมด ของ HTML

119. วางข้อมูลที่เรา copy มาวางไว้.HTML แล้วไปแก้ ให้ ชื่อที่จัดเก็บตรงกัน googlemap_3.JS ดังภาพ
ให้กด Save หรือ Ctrl+S

120. COPY ข้อมูลมา จากfacebook กลุ่ม GIS3
ลบข้อมูลเดิม แล้ว วางข้อมูล ที่ copy มาวางไว้ ใน นามสกุล .Js
ไปบรรทัดที่ 38 ลบ url เดิมทิ้ง

121. ให้กด Save หรือ Ctrl+S
ไปที่ web browser พิมพ์ว่า locolhost:8080/geoserver

122. เลือก Layer Preview
เลือก InternetGIS3:boundary >boundary>OpenLayers

123. จะปรากฏข้อมูลขึ้น
จากนั้น Copy locolhost:8080/geoserver/ InternetGIS3/wms

124. กลับไปที่ EditPlus 3 > ลบ url เดิม > แล้ววาง url ที่เรา copy มา จะได้ดังภาพ
Copy InternetGIS3: boundary ดังภาพ

125. ในบรรทัดที่ 40 เปลี่ยนจาก WORK: boundary เป็น InternetGIS3: boundary
ไปที่ geoserver > Layer Preview คลิก OpenLayers ในช่อง InternetGIS3: building

126. จากนั้น Copy locolhost:8080/geoserver/ InternetGIS3/wms
กลับไปที่ EditPlus 3 > ลบ url เดิมในบรรทัดที่ 46 แล้ววาง url ใหม่ที่เรา copy มา

127. Copy InternetGIS3: building ดังภาพ
ในบรรทัดที่ 48 เปลี่ยนจาก WORK: building เป็น InternetGIS3: building

128. ไป geoserver > Layer Previwe คลิก OpenLayer ของ InternetGIS3:atm_3
จะได้ดังรูป

129. ในบรรทัดที่ 53 เปลี่ยนจาก ตัวแปร Road เป็น ATM > เปลี่ยนจากถนนเป็นตู้ATM
ในบรรทัด 54 เปลี่ยนจาก url เดิมเป็น locolhost:8080/geoserver/ InternetGIS3/wms
ในบรรทดัที่ 56 เปลี่ยนจาก WORK: road เป็น InternetGIS3:ATM_3
ลบชั้นข้อมูลบรรทัดที่ 61-68 ในบรรทดัที่ 63 ลบตัวแปร road และ เปลี่ยนเป็น ATM > และลบตัวแปร water
ออกไป >

130. กด Ctrl+s เพื่อ save
ไปที่ web browser พิมพ์ locolhost:8080/GIS3/56170253_3/56170253_3.html > ข้อมูลจะ ปรากฏ
ดังภาพ

131. ไปที่ web browser ค้นหาคา ว่า OpenLayers3 > เลือกลิงค์แรก
แล้วให้คลิกที่ 2.x page

132. ให้คลิกDownload ที่ Zip

133. ให้แตกไฟล์
ไปที่ Disk C > Progarm files > Apache Software Fouandation > Tomcat 7.0 > webapps > GIS3 >
56170253_3 >สร้างโฟล์เดอร์ขึ้นว่า ตั้งว่า Libs แล้วเอาโฟล์เดอร์ OpenLayers 2.13.1 มาวางไว้

134. ค้นหา geoext2 เลือก ลิ้งค์แรก
คลิก GeoExt 2.0.3

135. คลิกที่ Source code (zip) เพื่อ Download
ไปที่ Disk C > Progarm files > Apache Software Fouandation > Tomcat 7.0 > webapps > GIS3 >
56170253_3 > Libs แล้วเอาโฟล์เดอร์ GeoExt2 -2.0.3 มาวางไว้

136. มาที่หน้าเวป GeoExt2 เลื่อนลงมาที่ส่วน Exemples > คลิกเลือก LayerTree
จะปรากฏรูปแบบตัวอย่างหน้าเว็ปของ LayerTree ขึ้น > คลิกขวาในพื้นที่สีขาว > เลือกดูรหัสต้นฉบับ

137. จะปรากฏโค้ดไฟล์ HTML ขึ้น
คัดลอกโค้ดไฟล์ HTML ทั้งหมด

138. เข้า EditPlus แล้ว กด Ctrl+N แล้ววางข้อมูล Ctrl+V
กลับไปที่ EditPlus 3 แล้วแก้ไขโค้ดในบรรทัดที่ 20 ตามภาพ (เปลี่ยนเป็น <script src="Libs/OpenLayers-
2.13.1/OpenLayers.js"></script> )

139. เติม Libs ตามภาพ
.กลับไปที่ web browser เปิด tab โค้ดไฟล์ HTML > คลิก ../loader.js ในบรรทัด ที่21

140. Copy ทั้งหมด
ไปที่ EditPlus 3 > กด Ctrl+V วางข้อมูล

141. ไปที่ Disk C > Progarm files > Apache Software Fouandation > Tomcat 7.0 > webapps > GIS3 >
56170253_3 > Lips > geoext2-2.0.3 > โฟล์เดอร์ src > GeoExt > Copy Lips geoext2-2.0.3src
GeoExt ดังภาพ
กลับไปที่ EditPlus 3 > แก้ไขโค้ด วางโค้ดใหม่ในบรรทัดที่ 5 ตามภาพ (เปลี่ยนจาก เป็น /)

142. กด Ctrl+s > เลือก save ที่ Disk D > โฟล์เดอร์ GIS3_58 > โฟล์เดอร์ชื่อ backup3_3303 > เข้าไปในโฟล์ เดอร์
backup3_3303 > ตั้งชื่อว่าloader > เปลี่ยน save as type เป็น Java Script > Save > Yes
ไปที่ EditPlus 3 > บรรทัดที่ 22 ให้ลบ ../ หน้า loader ออก ดังภาพ

143. กลับไปที่ web browser ของ geoext2 > คลิก tree.js ด้านขวามือ
COPY โค้ดทั้งหมด

144. กลับไปที่ EditPlus 3 > กด Ctrl+v วางโค้ด
กด Ctrl+s > เลือก save ที่ Disk D > โฟล์ดอร์ GIS3_58 > โฟล์เดอร์ชื่อ backup3_3303 > เข้าไปในโฟล์เดอร์
backup3_3303 > ตั้งชื่อว่า tree > เปลี่ยน save as type เป็น Java Script > Save > Yes >

145. กลับไปที่ EditPlus 3 > เปิดโค้ดไฟล์ HTML (อันแรก) > ลบโค้ดบรรทัดที่ 26 ถึง 36
กด Save > เลือก save ที่ Disk D > โฟล์เดอร์ GIS3_58 > โฟล์เดอร์ชื่อ backup3_3303 > เข้าไปในโฟล์ เดอร์
backup3_3303 > ตั้งชื่อว่า Mymap > เปลี่ยน save as type เป็น HTML > Save

146. ไปที่ Disk D > โฟล์เดอร์ GIS3_58 > โฟล์เดอร์ชื่อ backup3_3303 > Copyไฟล์ Mymap , tree , loader
ไปที่ Disk C > Progarm files > Apache Software Fouandation > Tomcat 7.0 > webapps > GIS3 >
56170253_3 > เลือก Paste หรือ Ctrl+V วางข้อมูล

147. ไปที่ เวป พิมพ์คาว่า locolhost:8080/GIS3/56170253_3/Mymap.html
จะปรากฏข้อมูลขึ้น

148. ไปที่ Disk C > Progarm files > Apache Software Fouandation > Tomcat 7.0 > webapps > GIS3 >
56170253_3 > คลิกขวาที่ไฟล์ tree.js > คลิก EditPlus 3
แก้โค้ดบรรทัดที่ 34 เปลี่ยนจาก 14, 37.5 เป็น 100.925684, 13.277333 > ในบรรทัดที่ 35 เปลี่ยนจาก 7 เป็น 15

149. ลบโค้ดตั้งแต่บรรทัดที่ 37-45
.ลบโค้ดบรรทัดที่ 48-68

150. แก้ไขโค้ดในบรรทัดที่ 49 เป็น ขอบเขต ม.บูรพา > ในบรรทัดที่ 50 copy localhost ของข้อมูลเรามาวาง > ในบรรทัดที่
51 แก้เป็น InternetGIS3:boundary
.แก้ไขโค้ดในบรรทัดที่ 59 เป็น อาคาร ม.บูรพา > ในบรรทัดที่ 60 copy localhost จากบรรทัด 50 มาวาง > ในบรรทัด
ที่ 62 แก้เป็น InternetGIS3:building

151. ไฮไลทโค้ดบรรทดัที่ 59-70 > copy
ไปที่บรรทดัที่ 71 > วางโค้ด
แก้ไขโค้ดในบรรทัดที่ 71 จาก อาคาร ม.บูรพา เป็น ถนน > ในบรรทัดที่ 72 copy localhost มาวาง ในบรรทัดที่ 74 แก้
เป็น InternetGIS3:road

152. ไฮไลทโด้ดบรรทัดที่ 71-82 > copy
ไปที่บรรทัดที่ 83 > วางโค้ด
.แก้ไขโค้ดในบรรทัดที่ 83 จาก ถนน เป็น แหล่งน้า > ในบรรทัดที่ 84 copy localhost มาวาง ในบรรทัดที่ 86 แก้เป็น
InternetGIS3:water

153. บรรทัดที่ 97แก้โค้ดจาก Tasmania เป็น BUU > บรรทัดที่ 98 copy localhost จากบรรทัด 84 มาวาง > บรรทัดที่
100 แก้เป็น InternetGIS3:boundary > บรรทัดที่ 101 แก้เป็น InternetGIS3:building > บรรทัดที่ 102 แก้เป็น
InternetGIS3:road > บรรทัดที่ 103 แก้เป็น InternetGIS3:water
save > Copyไฟล์ tree.js ไปที่ Disk C > Progarm files > Apache Software Fouandation > Tomcat
7.0 > webapps > GIS3 > 56170253_3 > Ctrl+v

154. จะปรากฏผลลัพธ์ ดังนี้

155. เปิดโปรแกรม QGIS ขึ้นมา

156. เลือก Plugins > Manage and Install Plugins
พิมพ์ Qgis cloud ทาการติดตั้ง QGIS Cloud Plugin (ขึ้นว่า Reinstall plugin แสดงว่า ติดต้งแล้ว) เสร็จแล้ว Close

157. พิมพ์ Open layers ทาการติดตั้ง Open Layers Plugin (ขึ้นว่า Reinstall plugin แสดงว่า ติดตั้งแล้ว) เสร็จแล้ว
Close
ไปที่ Add Vector Layer

158. Encoding เลือก System คลิก Browse
ไปที่ Disk D > GIS3_58 > BUU_LAYER > เลือกข้อมูลที่นามสกุล .shp ของ Road Water Building และ
Bourdary > open

159. open
ใหเรียงข้อมูล จากบนมาล่าง Road > building>Water>Boundary ตามภาพ

160. ดับเบิ้ลคลิก Boundary เพื่อเปลี่ยนสี
ดับเบิ้ลคลิก Water เพื่อเปลี่ยนสี

161. ดับเบิ้ลคลิป building เปลี่ยน Single Symbol เป็น Categorized , ตรงช่อง Column ให้เลือก Name แล้ว คลิก
Classify > OK

162. ดับเบิ้ลคลิก Road เปลี่ยนสี

163. คลิก Cloud Settings

164. คลิก Siqnup
ให้สมัคร ใส่ข้อมูล แล้วคลิก Siqn up

166. กด Confirm my account

167. กลับไปโปรแกรม QGIS > กด login
ปรากฏหน้าต่าง login ใส่ Username และ Password > OK

168. กด Create
จะปรากฏชื่อ Database ขึ้น

169. ไปที่ Upload Data
กด Refresh layers

170. กด Upload data
เลือก save ที่ Disk D > GIS3_58 > backup3_3303 > ตั้งชื่อว่า online_GIS3_G3_3303 > save

171. กด Add background layer > กด Google Maps > แล้วเลือกว่าจะคลิก Google …. ประเภทไหน
กด Publish Map เพื่อใหข้อมูลออนไลน์

172. กด save
จะมี link ขึ้นมา > ให้กด link แรก

173. รอโหลด
จะปรากฏผลลัพธ์ข้อมูลขึ้น