�ݺ�ߣ

การติดตั้ง JAVA
1. ตรวจสอบคอมพิวเตอร์ที่ใช้งานว่าเป็น 32 bit หรือ 64 bit โดยไปที่ computer > properties
2. คอมพิวเตอร์ที่ใช้งานตอนนี้เป็น 64 bit

3. เปิด Web Browser ขึ้นมาจากนั้นเข้า Google พิมพ์“jre” เลือก link แรก
4. ไปที่ Java SE Runtime Environment 7u79 จากนั้นกด Accept License Agreement เลือก Windows x64 29.78 MB
jre-7u79-windows-x64.exe

5. เปิดโฟลเดอร์ที่เก็บไฟล์ ดับเบิ้ลคลิกที่ jre-7u79-windows-x64 จากนั้นกด Run
จากนั้นจะปรากฏหน้าต่างดังรูป จากนั้นกด Install และเมื่อ Install เสร็จเรียบร้อยแล้วให้กด Close
การติดตั้ง Tomcat
6. เปิด Web Browser ขึ้นมาจากนั้นเข้า Google พิมพ์“tomcat 7” เลือก link แรก

7. เลื่อนลงมาด้านล่าง เลือก 32-bit/64-bit Windows Service Installer (pgp, md5, she1)
8. เปิดโฟลเดอร์ที่เก็บไฟล์ ดับเบิ้ลคลิกที่ apache-tomcat-7.0.65 จากนั้นกด Run
จากนั้นจะปรากฏหน้าต่างดังรูป จากนั้นกด Next

9. กด I Agree
10. กด Checkbox หน้า Host Manager จากนั้นกด Next

11. กรอก User name และ Password โดยกาหนดให้ User name : admin และ Password : tomcat จากนั้นกด Next
12. กด Next

13. กด Install
14. กด Finish

15. จากนั้นสร้างโฟลเดอร์ GIS3_58 ไว้ใน D:
16. ทาการทดสอบ Tomcat โดยเปิด Web Browser ขึ้นมาพิมพ์ว่า “localhost:8080” จะปรากฏดังรูป

การติดตั้ง Geoserver
17. เปิด Web Browser ขึ้นมาจากนั้นเข้า Google พิมพ์“Geoserver” เลือก link แรก
18. ปรากฏหน้าต่างดังรูป ไปที่ Stable 2.8.0 Nighty

19. คลิกที่ Web Archive
20. เปิดโฟลเดอร์ที่เก็บไฟล์ จากนั้นทาการ Extract Files geoserver-2.8.x-latest-war และดับเบิ้ลคลิกที่โฟลเดอร์
geoserver-2.8.x-latest-war จากนั้น Copy ไฟล์ geoserver.war

21. นาไปใส่ไว้ใน C:Program FilesApache Software FoundationTomcat 7.0webapps
22. ทาการทดสอบ Geoserver โดยเปิด Web Browser ขึ้นมาพิมพ์ว่า “localhost:8080/geoserver” จะปรากฏดังรูป ใส่
Username : admin และ Password : geoserver จากนั้นกด Login

23. จะปรากฏดังรูป
การติดตั้ง PostGIS
24. เปิด Web Browser ขึ้นมาจากนั้นเข้า Google พิมพ์“postgis” เลือก link แรก

25. จากนั้นกด Download และไปที่ Windows Downloads
26. กด PostgreSQL EDB binaries only

27. กด Postgre SQL installer.
28. เลื่อนลงด้านล่าง เลือก Version 9.3.10 กด Win x86-64 (หมายเหตุ : เนื่องจากโหลด Version 9.4.5 แล้วเกิดปัญหา
จึงโหลด Version ที่ต่าลงมา)

29. เปิดโฟลเดอร์ที่เก็บไฟล์ ดับเบิ้ลคลิกที่ postgresql-9.3.10-1-windows-x64 จากนั้นกด Run
จากนั้นกด Next
30. กด Next

31. กด Next
32. ใส่ Password : postgis และ Retype password : postgis จากนั้นกด Next

33. กด Next
34. กด Next

35. กด Next
36. กด Finish

37. จะปรากฏหน้าต่าง Stack Builder 3.1.1 เลือก PostgreSQL 9.3 (x64) on port 5432 > next
38. ไปที่ Spatial Extensions กด Checkbox หน้า PostGIS 2.1 Bundle for PostgreSQL 9.3 (64 bit) v2.1.7 จากนั้นกด
Next

39. กด Next
40. กด Next

41. กด I Agree
42. กด Checkbox หน้า Create spatial database จากนั้นกด Next

43. จากนั้นกด Next
44. ใส่ Password : postgis จากนั้นกด Next

45. กด Install
46. กด Yes

49. กด Close
50. กด Finish

การใช้งาน PostgreSQL 9.3
51. ไปที่ Start > PostgreSQL 9.3 > pgAdmin III
52. จะปรากฏหน้าต่างการทางานดังรูป ดับเบิ้ลคลิกที่ PostgreSQL 9.3 (localhost:5432) ปรากฏหน้าต่าง Connect to
Server กรอก Password : postgis จากนั้นกด OK

53. คลิกขวาที่ Databases > New Database
54. จะปรากฏหน้าต่างดังรูป ช่อง Name : GIS3_G1 จากนั้นกด OK

55. จากนั้นไปที่ (Execute arbitrary SQL queries.) จะปรากฏหน้าต่าง พิมพ์“CREATE EXTENSION
POSTGIS;” ลงไป กด (Execute query) ปิดหน้าต่างดังกล่าวได้เลย
56. เมื่อใช้คาสั่งเรียกเครื่องมือเสร็จเรียบร้อยแล้ว ให้ไปที่ (Plugins) > PostGIS Shapefile and DBF loader 2.1

57. จะปรากฏหน้าต่างดังรูป จากนั้นกด Add File

58. ไปยังโฟลเดอร์ที่เก็บข้อมูลที่ต้องการ ในที่นี้คือ D:GIS3_58BUU_LAYER เลือกชั้นข้อมูลทั้งหมดจากนั้นกด
Open
59. จากนั้นทาการเปลี่ยนภาษาโดยไปที่ Option เปลี่ยนจาก UTF-8 เป็น TIS-620 จากนั้นกด OK

60. กด Import และปิดหน้าต่างดังกล่าวไปได้เลย
61. จากนั้นไปที่ GIS3_G1 > Schemas > public > Tables เพื่อเช็คว่าชั้นข้อมูลเข้ามาอยู่ใน GIS3_G1 แล้ว กดหน้าต่าง
pgAdmin III ลงไปก่อน

การสร้าง และการตกแต่งชั้นข้อมูล
62. เปิดโปรแกรม (QGIS) จากนั้นไปที่ (Add PostGIS Layers)
63. ปรากฏหน้าต่าง Add PostGIS Table(s) จากนั้นไปที่ ใหม่ กรอกข้อมูลดังนี้ ชื่อ : g1, เครื่องแม่ข่าย : localhost,
ฐานข้อมูล : GIS3_G1, โหมด SSL : ยอมรับ, ชื่อผู้ใช้ : postgres และรหัสผ่าน : postgis กดกากบาทหน้า บันทึกชื่อ
ผู้ใช้ และรหัสผ่าน จากนั้นกด ทดสอบการเชื่อมต่อ

64. จะปรากฏหน้าต่างทดสอบการเชื่อมต่อ จากนั้นกด OK
65. กด OK > OK

66. กลับมาที่หน้าต่าง Add PostGIS Table(s) ไปที่ เชื่อมต่อ > public เลือกชั้นข้อมูลที่เป็นสีเข้มทั้ง 4 ชั้นข้อมูลคือ
boundary, building, road และ water จากนั้นกด เพิ่ม
67. ปรากฏหน้าต่างสาหรับกาหนดค่าพิกัด โดยค้นหาว่า “32647” กดเลือก WGS 84 / UTM zone 47N จากนั้นกด OK
ทาซ้าทั้ง 4 ชั้นข้อมูล

68. เมื่อเปิดชั้นข้อมูลขึ้นมาแล้ว จากนั้นให้ทาการสร้างจุด ATM โดยไปที่ (New Shapefile Layer)
69. เลือกชนิด : จุด, File encoding : EPSG:32647, WGS 84 / UTM zone 47N และชื่อ : Name จากนั้นกดเพิ่มตาราง
รายละเอียด > OK

70. จะปรากฏหน้าต่างให้ Save หาโฟลเดอร์ที่ต้องการเก็บ ตั้งชื่อว่า “point_1” จากนั้นกด Save
71. จากนั้นไปที่ (Toggle Editing) > (Add Feature) และทาการกาหนดจุด ATM ตามต้องการ

72. เมื่อทาการกาหนดจุด จะปรากฏหน้าต่างดังรูป ให้กรอกข้อมูลตามต้องการ
73. เมื่อกาหนดจุด ATM ได้ตามต้องการแล้ว ให้กด (Toggle Editing) > Save

74. จากนั้นเปลี่ยนสีชั้นข้อมูล โดยดับเบิ้ลคลิกที่ชั้นข้อมูลที่ต้องการ ในที่นี้คือ ชั้นข้อมูล building จะปรากฏหน้าต่าง
ดังรูป ช่องด้านบนเลือก : จัดหมวดหมู่, ช่อง : name จากนั้นกดจัดกลุ่ม และกด OK (ทาการเปลี่ยนสีชั้นข้อมูล
ทั้งหมด)
75. ชั้นข้อมูลทั้งหมดที่เปลี่ยนสีเรียบร้อยแล้ว

76. ต่อไปจะเป็นการ Save ชั้นข้อมูลโดยดับเบิ้ลคลิกที่ชั้นข้อมูลที่ต้องการ ในที่นี้คือ point_1 จะปรากฏหน้าต่างดังรูป
จากนั้นไปที่ รูปแบบ > Save Style > SLD File
77. จะปรากฏหน้าต่างดังรูป เลือกโฟลเดอร์ที่ต้องการเก็บชั้นข้อมูล ตั้งชื่อว่า point_1 จากนั้นกด Save > OK (ทาการ
Save ชั้นข้อมูลทั้งหมด)

78.กลับไปที่โปรแกรม pgAdmin III เพื่อทาการ Import ชั้นข้อมูลจุด ATM (point_1.shp) เข้าไปไว้ใน Postgres
การใช้งาน Geoserver
79. เปิด Web Browser ขึ้นมาจากนั้นพิมพ์ “localhost:8080/geoserver” กด Enter กรอก Username และ Password ให้
เรียบร้อย จากนั้นไปที่ Workspaces > Add new workspace

80. Name : G1, Namespace URI : G1_BUU และกด Default Workspace จากนั้นกด Submit
81. จากนั้นไปที่ Stores > Add new Store

82. เลือก PostGIS - PostGIS Database
83. Data source Name : G1_Data, database : GIS3_G1, user : postgres และ passwd : postgis จากนั้นกด Save

84. ไปที่ Styles > Add a new style
85. เรียกดู... > เลือกชั้นข้อมูลที่ต้องการ ในที่นี้คือ boundary.sld จากนั้นกด OK > Upload

86. กด Preview legend > Submit (ทาซ้าทั้งหมด ยกเว้นชั้นข้อมูลจุด ATM (point_1.sld))
87. ส่วนข้อมูลจุด ATM ลาดับแรกให้เปิด Web Browser ขึ้นมาจากนั้นพิมพ์ “www.iconfinder.com” กด Enter และ
พิมพ์ใส่ช่องค้นหาว่า “atm”

88. เลือกรูปที่ต้องการ (ขนาดไม่เกิน 15 px, นามสกุล .png) และ Save ภาพไว้ในโฟลเดอร์ที่ต้องการ

89. กลับไปที่ Geoserver > Styles > Add a new style > เรียกดู... > เลือกชั้นข้อมูลที่ต้องการ ในที่นี้คือ point_1.sld
จากนั้นกด OK > Upload และทาการแก้Code ตั้งแต่บรรทัดที่ 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

90. ไปที่ Layers > Add a new resource
91. ช่อง Add layer from เลือก G1:G1_Data จากนั้นกด Publish ของชั้นข้อมูล boundary

92. เริ่มต้นหน้าแรกที่ Tab Data เลื่อนลงด้านล่าง ไปที่ Find จะปรากฏหน้าต่าง ให้กรอกเลข 32647 จากนั้นกด Enter
และกด Compute from native bounds
93. ไปที่ Tab Publishing เลื่อนลงด้านล่าง Default Style เลือก boundary, Available Styles เลือก boundary และกด
>> ให้ boundary ไปอยู่ที่ Selected Styles จากนั้นกด Save (ทาซ้าทุกชั้นข้อมูล)

94. จากนั้นไปที่ Layer Preview > OpenLayers ของทุกชั้นข้อมูลเพื่อตรวจเช็คชั้นข้อมูลว่าแสดงผลหรือไม่
การทา Google Map API
95. ดาวน์โหลด Code HTML.docx ในกลุ่ม GIS3 จากนั้น Copy Code ทั้งหมดใส่ไว้ใน EditPlus

96. จากนั้นแก้ Code บรรทัดที่ 14 จาก <script src=/slideshow/capture56170244/56057285/"googlemap.js"></script> เป็น <script src="map1.js"></script>
97. ทาการ Save Code เก็บไว้ใน D:GIS3_58Backup1 ตั้งชื่อว่า G1, Save as type : HTML จากนั้นกด Save > Yes

98. Copy Code var map ในกลุ่ม GIS3 ใส่ไว้ใน EditPlus
99. จากนั้นแก้ Code บรรทัดที่ 38, 40, 46, 48, 54, 56, 62, 70 และ 72 จาก WORK เป็น G1

100. ทาการ Save Code เก็บไว้ใน D:GIS3_58Backup1 ตั้งชื่อว่า map1, Save as type : JavaScript จากนั้นกด Save
101. จากนั้น Copy ไฟล์ G1 และ map1 จาก D:GIS3_58Backup1 ไปใส่ไว้ใน C:Program FilesApache Software
FoundationTomcat 7.0webappsGIS356170244_1

102. เปิด Web Browser ขึ้นมาพิมพ์ว่า “localhost:8080/GIS3/56170244_1/G1.html” จะปรากฏดังรูป
การใช้งาน GeoExt
103. เปิด Web Browser ขึ้นมาจากนั้นเข้า Google พิมพ์“GeoExt 2” เลือก link แรก

104. ไปที่หัวข้อ Download จากนั้นกด GeoExt 2.0.3
105. เลื่อนลงมาด้านล่าง หัวข้อ Download เลือกดาวน์โหลดไฟล์ที่เป็น zip (Source code (zip))

106. กลับไปที่ Web Browser เปิด Tab ใหม่ขึ้นมาจากนั้นเข้า Google พิมพ์“OpenLayers 3” เลือก link แรก
107. จากนั้นกด 2.x page

108. ไปที่หัวข้อ Where to get OpenLayers 2: เลือกดาวน์โหลดไฟล์ 2.13.1 (Stable) ที่เป็น .zip
109. ทาการแตกไฟล์ทั้งสองตัวไปเก็บไว้ใน C:Program FilesApache Software FoundationTomcat
7.0webappsGIS356170244_1Libs (Libs เป็นโฟลเดอร์สร้างใหม่)

110. กลับไปที่ GeoExt 2 เลื่อนลงด้านล่าง เข้าไปที่ LayerTree
111. ปรากฏหน้าต่างดังรูป จากนั้นคลิกขวาที่พื้นที่ว่างไปที่ดูซอร์สโค้ด

112. Copy Code ทั้งหมดมาใส่ไว้ใน EditPlus
113. จากนั้นแก้ Code บรรทัดที่ 20 จาก <script src=/slideshow/capture56170244/56057285/website-resources/OpenLayers-2.13.1/
OpenLayers.js"></script> เป็น <script src="Libs/OpenLayers-2.13.1/OpenLayers.js"></script>,
บรรทัดที่ 22 จาก <script type="text/javascript" src="../loader.js"></script> เป็น <script type="text/javascript"
src="loader.js"></script> และลบ Code บรรทัดที่ 28-36 ออก

114. ทาการ Save Code เก็บไว้ใน D:GIS3_58Backup1 ตั้งชื่อว่า Mymap, Save as type : HTML จากนั้นกด Save >
Yes
115. กลับไปที่ Source Code ของ LayerTree ดูบรรทัดที่ 21 และ 22 กด “../loader.js” และ “tree.js”

116. ดูที่ Tad loader.js Copy Code ทั้งหมดมาใส่ไว้ใน EditPlus
117. แก้Code บรรทัดที่ 5 จาก GeoExt: "../../src/GeoExt", เป็น GeoExt: "Libs/geoext2-2.0.3/src/GeoExt",

118. ทาการ Save Code เก็บไว้ใน D:GIS3_58Backup1 ตั้งชื่อว่า loader, Save as type : JavaScript จากนั้นกด Save
119. กลับดูที่ Tad tree.js Copy Code ทั้งหมดมาใส่ไว้ใน EditPlus และ Save Code เก็บไว้ใน D:GIS3_58Backup1
ตั้งชื่อว่า tree, Save as type : JavaScript จากนั้นกด Save

120. จากนั้น Copy ไฟล์ loader, Mymap และ tree จาก D:GIS3_58Backup1 ไปใส่ไว้ใน C:Program FilesApache
Software FoundationTomcat 7.0webappsGIS356170244_1
121. เปิด Web Browser ขึ้นมาพิมพ์ว่า “localhost:8080/GIS3/56170244_1/Mymap.html” จะปรากฏดังรูป

การนา BUU_LAYER เข้า GeoExt
122. ไปที่ C:Program FilesApache Software FoundationTomcat 7.0webappsGIS356170244_1 คลิกขวาที่
tree.js > EditPlus 3
123. แก้Code บรรทัดที่ 34 จาก center: [14, 37.5], เป็น center: [100.925684, 13.277333], บรรทัดที่ 35 จาก zoom:
7, เป็น zoom: 15, ลบ Code บรรทัดที่ 37-45 และบรรทัดที่ 48-68 ออก

124. บรรทัดที่ 49 เปลี่ยนจาก Gas Stations เป็น ขอบเขต ม.บูรพา, บรรทัดที่ 50 เปลี่ยนจาก
https://ows.terrestris.de/geoserver/osm/wms เป็น http://localhost:8080/geoserver/G1/wms, บรรทัดที่ 51 เปลี่ยนจาก
osm:osm-fuel เป็น G1:boundary
บรรทัดที่ 59 เปลี่ยนจาก Bus Stops เป็น อาคาร ม.บูรพา, บรรทัดที่ 60 เปลี่ยนจาก https://ows.terrestris.de/osm-
haltestellen? เป็น http://localhost:8080/geoserver/G1/wms และบรรทัดที่ 62 เปลี่ยนจาก OSM-Bushaltestellen เป็น
G1:building

125. Copy Code บรรทัดที่ 59-70 วางต่อด้านล่าง 3 รอบ บรรทัดที่ 71, 83 และ95 เปลี่ยนจากอาคาร ม.บูรพา เป็น
ถนน, แหล่งน้า และATM ตามลาดับ บรรทัดที่ 74, 86 และ98 เปลี่ยนจาก G1:building เป็น G1:road, G1:water และ
G1:point_1 ตามลาดับ

126. บรรทัดที่ 111 เปลี่ยนจาก Tasmania เป็น BUU, บรรทัดที่ 112 เปลี่ยนจาก http://demo.opengeo.org/
geoserver/wms เป็น http://localhost:8080/geoserver/G1/wms บรรทัดที่ 114-117 เปลี่ยนจาก
"topp:tasmania_state_boundaries", เป็น "G1:boundary",
"topp:tasmania_water_bodies", เป็น "G1:building",
"topp:tasmania_cities", เป็น "G1:road",
"topp:tasmania_roads" เป็น "G1:water",
และเพิ่ม "G1:point_1" เข้าไป

127. จากนั้นไปที่ File > Save As เก็บไว้ใน D:GIS3_58Backup1 จากนั้นกด Save > Yes
128. จากนั้น Copy ไฟล์ tree จาก D:GIS3_58Backup1 ไปใส่ไว้ใน C:Program FilesApache Software
FoundationTomcat 7.0webappsGIS356170244_1

129. เปิด Web Browser ขึ้นมาพิมพ์ว่า “localhost:8080/GIS3/56170244_1/Mymap.html” จะปรากฏดังรูป
การทา QGIS Cloud
130. เปิดโปรแกรม (QGIS) ไปที่ Plugins > Manage and Install Plugins เพื่อติดตั้งเครื่องมือเสริม

131. ช่องค้นหาพิมพ์ “Qgis Cloud Plugin” เลือก QGIS Cloud Plugin จากนั้นกดติดตั้งส่วนเพิ่มเติม
132. ช่องค้นหาพิมพ์ “openlayer” เลือก OpenLayers Plugin จากนั้นกดติดตั้งส่วนเพิ่มเติม

133. จากนั้นไปที่ (Add Vector layer) > แสดง ไปที่ D:GIS3_58BUU_LAYER เลือกชั้นข้อมูลที่มีนามสกุล .shp
ประกอบด้วย Boundary.shp, building.shp, Road.shp และWater.shp > Open > Open
134. ตกแต่งชั้นข้อมูลทั้งหมดให้สวยงามตามต้องการ จากนั้นที่ QGIS Cloud > Signup

135. กรอกข้อมูลในช่อง Username , Email , Password และ Password confirmation > Sign up
136. จากนั้นเข้า Hotmail กด Confirm my account

137. กลับมาที่ QGIS ไปที่ Login > User และ Password > OK > Create
138. ไปที่ Tab Upload Data > Refresh layers > Upload Data จะปรากฏหน้าต่างดังรูป เก็บไว้ใน
D:GIS3_58Backup1 ตั้งชื่อว่า online_GIS3_G1 > Save

139. ไปที่ Tab Map ช่อง Add background layer > Google Maps > Google Satellite
140. พอภาพขึ้นให้กด Publish Map > Save

141. จะปรากฏ Link ในกรอบด้านล่าง คลิกขวาที่ Link แรก เลือก Copy Link Location
142. เปิด Web Browser นา Link ที่ Copy มาใส่ไว้ในช่องด้านบน จากนั้นกด Enter จะปรากฏดังรูป
http://qgiscloud.com/teawathit/online_GIS3_G1

�ݺ�ߣ

capture_56170244

Recommended

More Related Content

Viewers also liked (15)

Similar to capture_56170244 (20)

capture_56170244