GIS3

1. Geographic Information System 3
1. การติดตั้งโปรแกรม java, Tomcat, Geoserver
การติดตั้ง java
1.เข้า google พิมพ์jre7 แล้วคลิกเลือกลิงค์ที่ 2
2. ในช่อง Java SE Runtime Environment 7u79 เลือก Accept License Agreement จากนั้นกด Windows x86
Offline นามสกุล exe

2. 3. กดติดตั้ง java

3. การติดตั้ง tomcat 7
1. เข้า google พิมพ์tomcat 7 กดเลือกลิงค์แรก
2.เลือก 32-bit/64-bit Windows Service Installer

4. 3. ทําการติดตั้ง tomcat เลือก Next
4. คลิก I Agree

5. 5. กด Next
6. ในช่อง HTTP พิมพ์8080 > ในช่อง user name พิมพ์admin > ในช่อง Password พิมพ์tomcat

6. 7. กด Next
8. กด install

7. 9. ทดสอบ localhost โดยไปที่ google chrome พิมพ์https://localhost:8080

8. การติดตั้ง Geoserver
1. เข้า google พิมพ์geoserver แล้วเลือกลิงค์แรก
2. ตรงช่อง Stable คลิก Nightly

9. 3. เลือก web Archive กดโหลด
4. เมื่อโหลดเสร็จทําการแตกไฟล์ โดย copy ไฟล์ geoserver มาไว้desktop

10. 5. copy ไฟล์ geoserver มาไว้C:Program FilesApache Software FoundationTomcat 7.0webapps
6. เข้า google พิมพ์localhost:8080/geoserver จากนั้น ใส่ username = admin > password = geoserver

11. 2. ติดตั้ง Postgres
1. เข้า google พิมพ์postgis เลือกลิงค์ที่ 2
2. เลือก Windows Downloads

12. 3. ในหน้าต่างนี้เลือก pg94
4. กดคลิก archive

13. 5. คลิก postgis-bundle-pg94x64x-setup-2.1.8-1.exe
6. ทําการติดตั้ง postgis กด I Agree และกด install

14. 7. เข้า google พิมพ์postgre 9.4 downloads
8. กด Downloads แล้วคลิก windows

15. 9. คลิก Downloads
10. คลิกคําว่า Win x86-64 ใน Version 9.4.5

16. 11. ทําการติดตั้ง postgreSQL กด Next
12. กด Next อีกรอบ

17. 13. กด Next
14. กด Next

18. 15. เลือก PostgreSQL 9.4Z(x64) on port 5432 แล้วกด Next
16. ติกถูกหน้า PostGIS 2.2 แล้วกด Next

19. 17. เก็บ postgreSQL ไว้ใน ไดร์ c > program files > PostgeSQL
18. กด I Agree

20. 19. ติกถูก Creale spatial database แล้วกด Next
20. กด Next

21. 21. ในหน้าต่าง Database connection
User Name > ใส่ postgres
Password > ใส่ postgis
22. ในช่อง Database Name พิมพ์gis3 เเล้วกด Install

22. 3. นําเข้าข้อมูลลง Postgres/postgis
1. เข้าโปรแกรม PgAdmin III ดับเบิ้ลคลิก PostgreSQL 9.4 ใส่รหัสว่า postgis แล้วกด OK
2. คลิกขวา Database แล้วเลือก New Database

23. 3. ช่อง Name พิมพ์56170240_group2 แล้วกด OK
4. กดเลือกเครื่องมือ Excute arbitrary SQL queries

24. 5. เชื่อมต่อเครื่องมือ Postgis โดยพิมพ์CREATE EXTENSION POSTGIS; แล้วกด Excute query
6. คลิก spatial_ref_sys

25. 7. แล้วกดแถบด้านบนคลิก Plugins > PostGIS Shapefile and DBF loader 2.2

26. 8. แล้วกด Add file

27. 9. เลือกไฟล์ water,road,point,building,Boundary จากนั้นกด open
10. เลือกคําสั่ง Options

28. 11. เปลี่ยนให้เป็นภาษาไทย พิม TIS-620 แล้วกด ok
12. กด Import *ถ้าสําเร็จข้างล่างจะปรากฎคําว่า shapefile import completed

29. 13. คลิกขวาที่ Tables กด Refresh

30. 4. ใช้ Geoserver
14. เข้า google พิมพ์http://localhost:8080/geoserver จากนั้นล๊อคอินด้วย ชื่อ admin รหัส geoserver
15. กด workspaces

31. 16. เลือกคําสั่ง Add new workspace
17. ในช่อง Name = InternetGIS2
Namespace URI = GIS3
จากนั้นติกเครื่องหมายถูกที่ Dafault workspace > submit

32. 18. คลิกเลือก InternetGIS2
19. ติกเครื่องหมายถูกตรงช่อง WMS จากนั้นกด save

33. 20. คลิกเลือก stores
21. เลือก And new store

34. 22. .ในช่อง Vector Data Sources เลือก PostGIS
23. ในช่อง Data Source Name พิมพ์ BUU
ในช่อง Description พิมพ์DataBase of Burapha university
ในช่อง Database พิมพ์56170240_group2
ในช่อง user พิมพ์postgres ช่อง password พิมพ์postgis

35. 24. เข้าโปรแกรม QGIS คลิกคําสั่ง Add postGIS layer (รูปช้าง) และคลิกคําสั่งว่าใหม่

36. 25. ในช่องชื่อพิมพ์group2
ในช่องเครื่องแม่ข่าย พิมพ์localhost
ในช่องพอร์ท พิมพ์5432
ในช่องฐานข้อมูล พิมพ์56170240_group2
ในช่องโหมด SSL เลือกยอมรับ
ชื่อผู้ใช้= postgres รหัสผ่าน postgis จากนั้น กด OK

37. 26. ไปคําสั่ง Settings เลือก Options
27. เลือกคําสั่งท้องถิ่น > ติกหน้าคํา เขียนทับระบบท้องถิ่น > แล้วเลือก U.S. English > OK

38. 28. กดคลิกที่รูปช้าง เลือก group2 > กดแก้ไข
29. ติกเครื่องหมาย x หน้าคําว่าบันทึก ชื่อผู้ใช้
ติกเครื่องหมาย x หน้าคําว่าบันทึกรหัสผ่าน จากนั้นกด OK

39. 30. คลิกคําว่า เชื่อมต่อ > กดเครื่อง+หน้าpublic >แล้วเลือก building>กดคําว่าเพิ่ม
31. ไปที่ Geoserver >เลือก Layer > Add a new resource

40. 32. ในช่อง Add layer เลือก InternetGIS2:Buu > คลิก Publish ตรง boundary
33. ในช่อง Current Keywords เลือก boundary
ในช่อง New Keyword พิม ขอบเขต > เลือก Thai > แล้วกด Add Keyword

41. 34. ในช่อง Coordinate Reference Systems เลือก Find > เลือก 32647
35. กด Compute from native bounds ( ตัวล่าง ) จากนั้นกด Save

42. 36. คลิกคําสั่ง Layer Preview > ไป boundary เลือก openLayers
37. ผลลัพธ์ของ ขอบเขตม.บูรพา

43. 38. เลือก Layer > Add a new resource
39. ในช่อง New Keyword พิม อาคารม.บูรพา > เลือก Thai > แล้วกด Add Keyword
ไปในช่อง Coordinate Reference Systems เลือก Find > เลือก 32647

44. 40. กด Compute from native bounds จากนั้นกด Save
41. คลิกคําสั่ง Layer Preview > ไป building เลือก openLayers
แล้วจะปรากฎผลลัพธ์ของอาคารม.บูรพาผลลัพธ์ของอาคารม.บูรพา

45. 42. เลือก Layer > Add a new resource
43. ในช่อง Add layer เลือก InternetGIS2:Buu > คลิก Publish ตรง Point_2

46. 44. ในช่อง New Keyword พิมพ์ตู้ATM > เลือก Thai > แล้วกด Add Keyword
ไปในช่อง Coordinate Reference Systems เลือก Find > เลือก 32647
45. กด Compute from native bounds จากนั้นกด Save

47. 46. คลิกคําสั่ง Layer Preview > ไป point_2 เลือก openLayers
แล้วจะปรากฎผลลัพธ์ของตู้ATM
47. เลือก Layer > Add a new resource

48. 48. ในช่อง Add layer เลือก InternetGIS2:Buu > คลิก Publish ตรง road
49. ในช่อง New Keyword พิม เส้นถนน > เลือก Thai > แล้วกด Add Keyword
ไปในช่อง Coordinate Reference Systems เลือก Find > เลือก 32647

49. 50. กด Compute from native bounds จากนั้นกด Save
51. คลิกคําสั่ง Layer Preview > ไป road เลือก openLayers
แล้วจะปรากฎผลลัพธ์ของเส้นถนน

50. 52. เลือก Layer > Add a new resource
53. ในช่อง Add layer เลือก InternetGIS2:Buu > คลิก Publish ตรง water

51. 54. ในช่อง New Keyword พิมพ์แหล่งนํ้า > เลือก Thai > แล้วกด Add Keyword
ไปในช่อง Coordinate Reference Systems เลือก Find > เลือก 32647
55. กด Compute from native bounds จากนั้นกด Save

52. 56. คลิกคําสั่ง Layer Preview > ไป water เลือก openLayers
แล้วจะปรากฎผลลัพธ์ของแหล่งนํ้า

53. 5. ใช้ QGIS ใส่สี SLD และนําเข้า Geoserver
57. กดรูปช้าง > เลือก group2 > Connect > Add
58. ดับเบิ้ลคลิก point_2 ที่ add มา > ไป color เปลี่ยนสี > ไปที่ style > save style > SLD file > ok

54. 59.ตั้งชื่อ point > save
60. ดับเบิ้ลคลิก building ที่ add มา > ไป color เปลี่ยนสี > ไปที่ style > save style > SLD file > ok

55. 61. ตั้งชื่อ building > save
62. ดับเบิ้ลคลิก boundary ที่ add มา > ไป color เปลี่ยนสี > ไปที่ style > save style > SLD file > ok

56. 63. ตั้งชื่อ boundary > save
64. ดับเบิ้ลคลิก water ที่ add มา > ไป color เปลี่ยนสี > ไปที่ style > save style > SLD file > ok

57. 65. ตั้งชื่อ water > save
66.ดับเบิ้ลคลิก road ที่ add มา > ไป color เปลี่ยนสี > ไปที่ style > save style > SLD file > ok

58. 67. ตั้งชื่อ road > save
การนําภาพขึ้นเว็บ
68. เข้า GeoServer > ไปที่ styles> Add new style

59. 69. ในช่อง Name พิมพ์point
ในช่อง Workspaces พิมพ์Internetgis2
ในช่อง Generate a default style พิมพ์Point
ในช่อง Copy from existing style พิมพ์point
ในช่อง choose file เลือกไฟล์ที่เราเซฟจากการทําสีโปรแกรม Qgis (point) > upload
จากนั้นกด preview legend > Validate กด submit

60. 70. ในช่อง Name พิมพ์building
ในช่อง Workspeces พิมพ์Internetgis2
ในช่อง Generate a default style พิมพ์Ploygon
ในช่อง Copy from existing style พิมพ์ploygon
ในช่อง choose file เลือกไฟล์ที่เราเซฟจากการทําสีโปรแกรม Qgis (building) > upload
จากนั้นกด preview legend > Validate กด submit

61. 71. ในช่อง Name พิมพ์boundary
ในช่อง Workspeces พิมพ์Internetgis2
ในช่อง Generate a default style พิมพ์Ploygon
ในช่อง Copy from existing style พิมพ์ploygon
ในช่อง choose file เลือกไฟล์ที่เราเซฟจากการทําสีโปรแกรม Qgis (boundary) > upload
จากนั้นกด preview legend > Validate กด submit

62. 72. ในช่อง Name พิมพ์road
ในช่อง Workspeces พิมพ์Internetgis2
ในช่อง Generate a default style พิมพ์Line
ในช่อง Copy from existing style พิมพ์line
ในช่อง choose file เลือกไฟล์ที่เราเซฟจากการทําสีโปรแกรม Qgis (road) > upload
จากนั้นกด preview legend > Validate กด submit

63. 71. ในช่อง Name พิมพ์water
ในช่อง Workspeces พิมพ์Internetgis2
ในช่อง Generate a default style พิมพ์Ploygon
ในช่อง Copy from existing style พิมพ์ploygon
ในช่อง choose file เลือกไฟล์ที่เราเซฟจากการทําสีโปรแกรม Qgis (water) > upload
จากนั้นกด preview legend > Validate กด submit

64. 6. สร้างชั้นข้อมูลจุดใน QGIS เพิ่มไอคอนลง Geoserver
72. Layer > คลิก boundary > แถบด้านบนเลือก publishing
73. ในช่องAvailable Styles เลือก Internetgis2:boundary แล้วกดลูกศร
> Internetgis2:boundary ก็จะปรากฎในช่อง Selected Styles จากนั้นกด save

65. 74. Layer > คลิก building
75. แถบด้านบนเลือก publishing ในช่องAvailable Styles เลือก Internetgis2:building แล้วกดลูกศร
> Internetgis2:building ก็จะปรากฎในช่อง Selected Styles จากนั้นกด save

66. 76. Layer > คลิก point_2
77. แถบด้านบนเลือก publishing ในช่องAvailable Styles เลือก Internetgis2:point แล้วกดลูกศร
> Internetgis2:point ก็จะปรากฎในช่อง Selected Styles จากนั้นกด save

67. 78. Layer > คลิก road
79. แถบด้านบนเลือก publishing ในช่องAvailable Styles เลือก Internetgis2:road แล้วกดลูกศร
> Internetgis2:road ก็จะปรากฎในช่อง Selected Styles จากนั้นกด save

68. 80. Layer > คลิก water
81. แถบด้านบนเลือก publishing ในช่องAvailable Styles เลือก Internetgis2:water แล้วกดลูกศร
> Internetgis2:water ก็จะปรากฎในช่อง Selected Styles จากนั้นกด save

69. 1. ก้อปโค้ดมาวางใน EditPlus
2. ไปที่ File > save as > ตั้งชื่อว่า googlemap เปลี่ยนนามสกุลไฟล์เป็น javascript (save ที่ Desktop ก่อน)

70. 3. ก้อปไฟล์ google map ที่ Desktop
4. นําไปวางที่ C:Program FilesApache Software FoundationTomcat 7.0webappsGIS356170240

71. 5. เข้า google พิมพ์http://localhost:8080/geoserver > ไปที่ layer preview > แล้วกด OpenLayers ของ
boundary
6. ก้อปลิงค์ในกรอบสีเหลี่ยมสีแดง

72. 7. นํามาวางที่ บรรทัดที่ 38 ในกรอบสีเหลี่ยมสีแดง
8. ในบรรทัดที่ 40 ในช่อง layer พิมพ์InternetGIS2:boundary

73. 9. เข้า google พิมพ์http://localhost:8080/geoserver > ไปที่ layer preview > แล้วกด OpenLayers ของ
building > ก้อปโค้ดในช่องสีเหลี่ยม
10. นําที่ก้อปมาวาง จากนั้นในช่อง layer พิมพ์InternetGIS2:building

74. 11. ลบคําว่า water ออก แล้วพิมพ์var ATM = new OpenLayers.Layer.WMS("ตู้ATM",
"http://localhost:8080/geoserver/InternetGIS2/wms",
{
layers: "InternetGIS2:point_2",
12. ลบข้อมูลในบรรทัดที่ 61-67

75. 13. เข้า EditPlus > กด ctrl N > ก้อปโค้ด html ในกลุ่ม GIS3 มาวาง
14. save ไฟล์ตั้งชื่อ 56170240_1 นามสกุลไฟล์เป็น html จากนั้นกด save

76. 15. เข้า google พิมพ์http://localhost:8080/GIS3/56170240/56170240_1.html

77. Load Geoext และ Openlayer
1. เข้า google พิมพ์geoext เลือกลิงค์ที่ 3
2. คลิกเลือก LayerTree

78. 3. คลิกขวาพื้นที่สีขาวแล้วเลือก ดูต้นฉบับ
4. copy ลิงค์ทั้งหมด

79. 5. เข้าไปไดร์ C:Program FilesApache Software FoundationTomcat
7.0webappsGIS356170240libbackup1OpenLayers-2.13.1 > copy lib/backup1/OpenLayers-2.13.1 ไป
วางใน Edit Plus บรรทัดที่ 20
6. กด save as > เลือกแฟ้ม C:Program FilesApache Software FoundationTomcat 7.
0webappsGIS356170240 > ตั้งชื่อ Mymap เปลี่ยนนามสกุลไฟล์เป็น HTML > save
***ถ้า save ในไดร์ c ไม่ได้ให้ save ไว้ที่ DESKTOP ก่อน***

80. 7. เข้าเว็บ geoext คลิกเลือก ../loader.js
8. copy โค้ด loader ทั้งหมด

81. 9. วางที่ copy
10. เข้าไปไดร์ C:Program FilesApache Software FoundationTomcat
7.0webappsGIS356170240libbackup1OpenLayers-2.13.1 > copy lib/backup1/OpenLayers-2.13.1 ไป
วางใน Edit Plus บรรทัดที่ 5

82. 11. กด save as > เลือกแฟ้ม C:Program FilesApache Software FoundationTomcat 7.
0webappsGIS356170240 > ตั้งชื่อ Loader เปลี่ยนนามสกุลไฟล์เป็น JavaScript > save
***ถ้า save ในไดร์ c ไม่ได้ให้ save ไว้ที่ DESKTOP ก่อน***
12. เข้าเว็บ geoext คลิกเลือก tree.js

83. 13. copy โค้ด tree ทั้งหมด
14. กด Paste โค้ดของ tree

84. 15. บรรทัดที่ 34 เปลี่ยนเป็น center: [100.925684,13.277333],
เปลี่ยนซูมเป็น zoom: 15,
ลบบรรทัดที่ 37-45
16. บรรทัดที่ 48 เปลี่ยนเป็น "ขอบเขต ม.บูรพา” ลบบรรทัด 48-68

85. 17. บรรทัดที่ 49 พิมพ์new OpenLayers.Layer.WMS(“ ขอบเขต ม.บูรพา ”
18. ไปที่ GeoServer > Layer Preview > กด OpenLayers ของ boundary

86. 19. copy http://localhost:8080/geoserver/InternetGIS2/wms
20. บรรทัดที่ 50 Paste http://localhost:8080/geoserver/InternetGIS2/wms
บรรทัดที่ 51 เปลี่ยนเป็น layers: " InternetGIS2:boundary "

87. 21. Layer Preview > กด OpenLayers ของ building
22. copy http://localhost:8080/geoserver/InternetGIS2/wms

88. 23. บรรทัดที่ 49 พิมพ์new OpenLayers.Layer.WMS(“ อาคาร ม.บูรพา ”

89. 24. copy
new OpenLayers.Layer.WMS("ถนน",
"http://localhost:8080/geoserver/G1/wms",
{
layers: 'G1:road',
format: 'image/png',
transparent: true
},
{
singleTile: true,
visibility: false
}

90. 25. copy
new OpenLayers.Layer.WMS("แหล่งนํ้า",
"http://localhost:8080/geoserver/G1/wms",
{
layers: 'G1:water',
format: 'image/png',
transparent: true
},
{
singleTile: true,
visibility: false
}
),

91. 26. บรรทัดที่ 97 เปลี่ยนเป็น new OpenLayers.Layer.WMS("BUU (Group Layer)"
บรรทัดที่ 98 copy จากบรรทัดที่ 84
27. บรรทัดที่ 100-103 พิมพ์ "InternetGIS2:boundary",
"InternetGIS2:building",
"InternetGIS2:road",
"InternetGIS2:water"

92. 28. save as > เลือกเก็บใน desktop > ตั้งชื่อ TREE > save จากนั้น copy ไฟล์ที่ desktopไปวางไว้ที่
C:Program FilesApache Software FoundationTomcat 7.0webappsGIS356170240

93. QGIS Cloud
1. ไปที่คําสั่ง Plugins > Manage and Install Plugins
2. Search หา QGIS Cloud Plugin > Install plugin

94. 3. . Search หา OpenLayer Plugin > Install plugin
4. ไปรูปคําสั่ง Add vector layer > กด Browse

95. 5. เลือกไฟล์ boundary, building , road , water > open
6. ดับเบิ้ลคลิก Road > ไปเปลี่ยนสีที่ color > ok

96. 7. ดับเบิ้ลคลิก building > ในช่อง สี่เหลี่ยมด้านบนสุดเลือก categorized > Column เลือก Name > Color
ramp เลือก Random colors > จากนั้นกด classify > OK
8. ดับเบิ้ลคลิก water > ไปเปลี่ยนสีที่ color > ok

97. 9. ดับเบิ้ลคลิก boundary > ไปเปลี่ยนสีที่ color > ok
10. คลิกในกรอบสี่เหลี่ยมสีแดงด้านบน > กด Loing ใส่ User และ Password

98. 11. กดคําสั่ง Create
12. ไปเลือกแถบคําสั่ง Upload Data ด้านบน จากนั้นคลิกคําสั่ง Upload Data ด้านล่าง

99. 13. Save Project ชื่อ online_gis3_g1 ที่ C:Program FilesApache Software FoundationTomcat
7.0webappsGIS356170240libbackup1
*** ถ้า save ไม่ได้ให้ไป save ที่ desktop
14. ไป Add background layer > Google Maps > Google Satelite

100. 15. คลิก Publish Map > จากนั้นคลิกลิงค์อันแรก http://qgiscloud.com/suwichaya/online
15. ผลลัพธ์การออนไลน์