Mananya

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

2. คอมพิวเตอร์ที่ใช้งานตอนนี้เป็น 32 bit
เปิด Web Browser ขึ้นมาจากนั้นเข้า Google พิมพ์ “jre” เลือก link แรก

3. ไปที่ Java SE Runtime Environment 7u79 จากนั้นกด Accept License Agreement เลือก Windows x64
29.78 MB jre-7u79-windows-x64.exe
จากนั้นก็ lnstall

4. การติดตั้ง Tomcat
เปิด Web Browser ขึ้นมาจากนั้นเข้า Google พิมพ์ “tomcat 7” เลือก link แรก
เลื่อนลงมาด้านล่าง เลือก 32-bit/64-bit Windows Service Installer (pgp, md5, she1)

5. จะปรากฏหน้าต่างดังรูป ให้กดบันทึกแฟ้ม
เปิดโฟลเดอร์. จะปรากฏหน้าต่างดังรูป จากนั้นกด Next

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

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

8. กด Install
จากนั้นสร้างโฟลเดอร์ GIS3_58 ไว้ใน D:

9. ไปที่ Start > Apache Tomcat 7.0 Tomcat7 > Monitor Tomcat
จะปรากฏหน้าต่างดังรูป ไปที่ Java พิมพ์ -DGEOSERVER_DATA_DIR=D:GIS3_58 ใส่ในช่อง
JavaOptions จากนั้นกด ok

10. ไปที่ General > Stop > Start > Ok กดปิดหน้าต่างได้เลย
ทาการทดสอบ Tomcat โดยเปิด Web Browser ขึ้นมาพิมพ์ว่า “localhost:8080” จะปรากฏดังรูป

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

12. คลิกที่ Web Archive
จะปรากฏหน้าต่างดังรูป จากนั้นกดตกลง
]

13. เปิดโฟลเดอร์ที่เก็บไฟล์ จากนั้นทาการ Extract Files geoserver-2.8.x-latest-war และดับเบิ้ลคลิกที่โฟลเดอร์
geoserver-2.8.x-latest-war จากนั้น Copy ไฟล์ geoserver.war
นาไปใส่ไว้ใน C:Program FilesApache Software FoundationTomcat 7.0webapps

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

15. การติดตั้ง PostGIS
เปิด Web Browser ขึ้นมาจากนั้นเข้า Google พิมพ์ “postgis” เลือก link แรก
จากนั้นกด Download และไปที่ Windows Downloads

16. กด PostgreSQL EDB binaries only
กด Postgre SQL installer.

17. เลื่อนลงด้านล่าง เลือก Version 9.3.10 กด Win x86-64
กด Next

18. กด Next

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

21. เลือกเป็น PostgreSQL 9.3(x64) on port 5432 แล้วกด Next
กด Finish

22. เลือก PostGIS 2.1 Bundle for PostgreSQL 9.3(64bit) v2.1.7 แล้วกด Next

23. กด I Agree

24. เลือก Create spatial database แล้วกด Next

25. ใส่ User Name : postgres, Passwort : postgis กด Next
กด Install

26. เลือก Close
กด Finish

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

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

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

30. จะปรากฏหน้าต่างดังรูป จากนั้นกด Add File
ไปยังโฟลเดอร์ที่เก็บข้อมูลที่ต้องการ ในที่นี้คือ D:GIS3_58BUU_LAYER เลือกชั้นข้อมูลทั้งหมดจากนั้นกด
Open

31. จากนั้นทาการเปลี่ยนภาษาโดยไปที่ Option เปลี่ยนจาก UTF-8 เป็น TIS-620 จากนั้นกด OK
กด Import และปิดหน้าต่างดังกล่าวไปได้เลย

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

33. การสร้าง และการตกแต่งชั้นข้อมูล
เปิดโปรแกรม QGISจากนั้นไปที่ (Add PostGIS Layers)

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

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

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

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

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

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

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

41. กลับไปที่โปรแกรม pgAdmin III เพื่อทาการ Import ชั้นข้อมูลจุด ATM (point_1.shp) เข้าไปไว้ใน Postgres

42. การใช้งาน Geoserver
เปิด Web Browser ขึ้นมาจากนั้นพิมพ์ “localhost:8080/geoserver” กด Enter กรอก Username และ
Password ให้เรียบร้อย จากนั้นไปที่ Workspaces > Add new workspace
Name : G1, Namespace URI : G1_BUU และกด Default Workspace จากนั้นกด Submit

43. จากนั้นไปที่ Stores > Add new Store
เลือก PostGIS - PostGIS Database

44. Data source Name : G1_Data, database : GIS3_G1, user : postgres และ passwd : postgis จากนั้นกด
Save
ไปที่ Styles > Add a new style

45. เรียกดู... > เลือกชั้นข้อมูลที่ต้องการ ในที่นี้คือ boundary.sld จากนั้นกด OK > Upload
กด เรียกดู > Submit (ทาซ้าทั้งหมด ยกเว้นชั้นข้อมูลจุด ATM (point_1.sld))

46. ส่วนข้อมูลจุด ATM ลาดับแรกให้เปิด Web Browser ขึ้นมาจากนั้นพิมพ์ “www.iconfinder.com” กด Enter
และพิมพ์ใส่ช่องค้นหาว่า “atm”
เลือกรูปที่ต้องการและ Save ภาพไว้ในโฟลเดอร์ที่ต้องการ

47. กลับไปที่ 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

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

49. เริ่มต้นหน้าแรกที่ Tab Data เลื่อนลงด้านล่าง ไปที่ Find จะปรากฏหน้าต่าง ให้กรอกเลข 32647 จากนั้นกด
Enter และกด Compute from native bounds

50. ไปที่ Tab Publishing เลื่อนลงด้านล่าง Default Style เลือก Boundary_group1, Available Styles เลือก
Boundary_group1 และกด >> ให้ Boundary_group1 ไปอยู่ที่ Selected Styles จากนั้นกด Save (ทาซ้าทุก
ชั้นข้อมูล)
จากนั้นไปที่ Layer Preview > OpenLayers ของทุกชั้นข้อมูลเพื่อตรวจเช็คชั้นข้อมูลว่าแสดงผลหรือไม่
Bound
ary_gr
oup1
Bound
ary_gr
oup1
B
o
u
n
d
ar
y
_
gr
o
u
p
1
B
o
u
n
d
ar
y
_
Bo
un
da
ry
_g
ro
up
1
Bo
un
da
ry
B
o
u
n
d
a
r
y
_
g
r
o
Bound
ary_gr
oup1
Bound
ary_gr
oup1

51. การทา Google Map API
ดาวน์โหลด Code HTML.docx ในกลุ่ม GIS3 จากนั้น Copy Code ทั้งหมดใส่ไว้ใน EditPlusจากนั้นแก้ Code
บรรทัดที่ 14 จาก <script src="googlemap.js"></script> เป็น <script src="map1.js"></script>
Boundary_
group1
Boundary_
group1

52. ทาการ Save Code เก็บไว้ใน D:GIS3_58Backup1 ตั้งชื่อว่า G1, Save as type : HTML จากนั้นกด Save
> Yes
Copy Code var map ในกลุ่ม GIS3 ใส่ไว้ใน EditPlusจากนั้นแก้ Code จาก WORK เป็น G1 ดังภาพ
B
o
u
n
d
ar
y
_
gr
o
u
p
1
B
o
u
n
d
ar
y
_
gr
o
u
p
Boundary_group1
Boundary_group1
Boun
dary
_gro
up1
Boun
dary
_gro
up1
Boun
dary
_gro
up1
Boun
dary
_gro
up1
Boun
dary
_gro
up1
Boun
dary
_gro
up1
B
o
u
n
d
a
r
y
_
g
r
o
u
p
1
B
o
u
n
d
Boun
dary
_gro
up1
Boun
dary
_gro
up1

53. ทาการ Save Code เก็บไว้ใน D:GIS3_58Backup1 ตั้งชื่อว่า map1, Save as type : JavaScript จากนั้นกด
Save
จากนั้น Copy ไฟล์ G1 และ map1 จาก D:GIS3_58Backup1 ไปใส่ไว้ใน C:Program FilesApache
Software FoundationTomcat 7.0webappsGIS356170178_1
Boun
dary
_gro
up1
Boun
dary
_gro
up1
Boundary_group1
Boundary_group1
B
o
u
n
d
a
r
y
_
g
r
o
u
p
1
B
o
u
n
d
Boundary_
group1
Boundary_
group1
Boundary_gro
up1
Boundary_gro
up1
Boundary_group
1
Boundary_group
1
Boundary_group
1
Boundary_group
1
Boundary_group1
Boundary_group1

54. เปิด Web Browser ขึ้นมาพิมพ์ว่า “localhost:8080/GIS3/56170178_1/G1.html” จะปรากฏดังรูป
Boundary_
group1
Boundary_
group1

55. Geoext และ Openlayer
Download GeoExt
เลือก LegendTree

56. ปรากฏผลลัพธ์ Legend Tree
เลือก LayerTree

57. ปรากฏผลลัพธ์ Layer Tree
คลิกขวาแล้วเลือก ดูซอร์สโค้ด

58. จะปรากฏซอร์สโค้ดดังภาพ
Copy ซอร์สโค้ด

59. วางซอร์สโค้ดใน EditPlus+
Copy ชื่อ Folder LibsOpenLayers-2.13.1

60. วาง LibsOpenLayers-2.13.1 บนซอร์สโค้ดใน EditPlus+
เปิดซอร์สโค้ดของ https://geoext.github.io/geoext2/examples/loader.js แล้วทาการ Copy

61. วางซอร์สโค้ดของ https://geoext.github.io/geoext2/examples/loader.js ใน EditPlus+
Copy Folder Libsgeoext2-2.0.3src

62. วาง Folder Libsgeoext2-2.0.3src ใน EditPlus+
Save ใน Folder backup 1 ตั้งชื่อ loader

63. Copy File loader.js จาก Folder backup1
วาง File loader.js ใน Folder ที่เก็บงานรหัสนิสิตของตัวเอง

64. Copy ซอร์สโค้ดของผลลัพธ์ GeoExt Tree Compenents
เปิดซอร์สโค้ด ของ GeoExt Tree Compenents แล้ว Copy

65. วางซอร์สโค้ดของ GeoExt Tree Compenents ใน EditPlus+
Save ซอร์สโค้ดของ GeoExt Tree Compenents ตั้งชื่อ File เป็น tree ใน Folder backup 1

66. จะปรากฏ File tree.js ใน Folder รหัสนิสิตของตัวเอง
เปิดโค้ดที่อาจารย์กาหนดให้ ใน EditPlus+ แล้วเลือก Delete โค้ด ดังรูป

67. ตั้งชื่อ File เป็น Mymap.html แล้ว save ใน Folder backup1
Copy File mymap.html จาก backup1

68. วาง File mymap.html ไว้ใน Folder รหัสนิสิตของตนเอง
แสดงผลลัพธ์ของ GeoExt Tree Components

69. QGIS Cloud
เปิด QGIS ขึ้นมา
เข้า Plugin แล้ว search QGIS Cloud Plugin เพื่อติดตั้ง

70. เข้า Plugin แล้ว search openlayer เพื่อติดตั้ง
เลือก vector layer แล้วเลือก Browse

71. Add vector layer Boundary.shp , building.shp , Road.shp , Water.shp จาก Folder BUU_LAYER
เลือก Open

72. จะปรากฏผลลัพธ์ดังภาพ
เลือก Layer Properties – building | Style เปลี่ยน Style เป็น Categorized

73. แล้วจะปรากฏผลดังภาพ
เปิด Layer Properties – Boundary | Style เปลี่ยน Style เป็น Single Symbol แล้วตกแต่ง

74. แล้วจะปรากฏผลดังภาพ
เลือก Plugins Cloud Cloud Settings

75. จะปรากฏผลดังภาพ

76. เปิดเว็บ QGIS Cloud
Sign up for QGIS Clound - Free

77. ยืนยันการสมัครทาง E - mail
Sign in เข้าใช้งาน

78. วาง link https://api.qgiscloud.com ใน QGIS Cloud Account แล้ว Login
Login ใส่ User และ Password

79. ปรากฏหน้าต่างดังภาพ แล้วเลือก Create
จะปรากฏหน้าต่างดังภาพแล้วคลิกเลือก foadzq qxbbn

80. เลือก Update Data
จะปรากฏดังภาพ แล้วเลือก Save Project ตั้งชื่อเป็น online_GIS3_G1 ใน Folder backup1

81. เปิด QGIS Cloud เลือก Map Add background layer
เลือก Google Maps Google Satellite

82. เลือก Pubish Map
จะปรากฏผลลัพธ์ดังภาพ เลือกเปิดภาพได้ตาม link

83. ผลลัพธ์ที่ได้

84. เปลี่ยนพิกัดเป็น ม.บูรพา
เปิด GeoExt Tree Components
เปิด File tree.js เลือก EditPlus3

85. เปลี่ยนพิกัดเป็น พิกัดม.บูรพา ดังภาพ
ลบโค้ดที่เลือกดังภาพออก

86. ลบโค้ดที่เลือกดังภาพออก
เปลี่ยนโค้ดดังภาพ เป็นขอบเขตม.บูรพา

87. ปรากฏผลลัพธ์ดังภาพ
เปิด GeoServer Layer Preview boundary OpenLayers

88. จะปรากฏผลลัพธ์ดังภาพ Copy http://localhost:8080/geowerver/G1/wms
วางซอร์สโค้ด http://localhost:8080/geowerver/G1/wms ดังรูป

89. Copy G1:boundary
วาง G1:boundary บนซอร์สโค้ด ดังรูป

90. เปลี่ยนซอร์สโค้ดเป็น อาคารม.บูรพา ดังภาพ
Copy ซอร์สโค้ด http://localhost:8080/geowerver/G1/wms ดังภาพ

91. วางซอร์สโค้ด ดังภาพ
Copy G1:boundary

92. วาง G1:boundary แทนซอร์สโค้ดเดิม ดังภาพ
Copy ซอร์สโค้ด ดังภาพ

93. วางซอร์สโค้ด ดังภาพ
แสดงผลลัพธ์การวางซอร์สโค้ด ดังภาพ

94. เปลี่ยน ซอร์สโค้ดเป็น http://localhost:8080/geowerver/G1/wms
เปลี่ยนซอร์โค้ด ดังภาพ

95. Save file name เป็น tree.js ใน folder backup1
Copy file tree.js จาก folder backup1

96. นา file tree.js จาก folder backup1 มาวางใน folder รหัสนิสิตของตัวเอง
เปิด file Mymap.html จะปรากฏผลลัพธ์ดังภาพ