งาน

1. การติดตั้ง JAVA

2. ขั้นตอนที่ 1 กด Install
ขั้นตอนที่ 2 รอการติดตั้ง

3. ขั้นตอนที่ 3 เมื่อติดตั้งเสร็จกด Close
Downloads : http://www.oracle.com/technetwork/java/javase/downloads/jre7-downloads-1880261.html

4. การติดตั้ง
Apache Tomcat

5. ขั้นตอนที่ 1 Download ตามสเปคเครื่อง
ขั้นตอนที่ 2 กด Next >

6. ขั้นตอนที่ 3 กด I Agree
ขั้นตอนที่ 4 กด Next >

7. ขั้นตอนที่ 5 ใส่ User = admin, Pass = tomcat แล้ว กด Next >
ขั้นตอนที่ 6
1. เลือกที่เก็บไฟล์ 2. Next >

8. ขั้นตอนที่ 7 กด Next >
ขั้นตอนที่ 8 สิ้นสุดการติดตั้ง

9. ขั้นตอนที่ 9 ทดสอบตัว Tomcat โดยไปที่ Browser แล้วพิมพ์localhost:8080
ขั้นตอนที่ 10
1.เพิ่ม -DGOSERVER_DATA_DIR=D:GIS3 2.ใส่ 128 3.ใส่ 256
Downloads : http://tomcat.apache.org/download-70.cgi

10. การติดตั้ง
Geoserver

11. ขั้นตอนที่ 1 Nightly ใต้แถบสีเขียว

12. ขั้นตอนที่ 2 กด Web Archive
ขั้นตอนที่ 3 เมื่อได้ Geoserver มาแล้ว ให้ทาการแตกไฟล์แล้วนาไฟล์ Geoserver.war ไปไว้ที่ C:Program
FilesApache Software FoundationTomcat 7.0webapps

13. ขั้นตอนที่ 4 ทดสอบ Geoserver โดยไปที่ Browser แล้วพิมพ์localhost:8080/geoserver
1.ใส่ User = admin 2. Pass = geoserver
ขั้นตอนที่ 5 จะได้ตามภาพนี้

14. การติดตั้งPostGIS

15. ขั้นตอนที่ 1 กด Next >

16. ขั้นตอนที่ 2
1. เลือกโฟล์เดอร์ติดตั้ง 2. กด Next>
ขั้นตอนที่ 3 กด Next>

17. ขั้นตอนที่ 4
1. รหัส : postgis 2.กด Next>
ขั้นตอนที่ 5 กด Next>

18. ขั้นตอนที่ 6
1. ให่ติดเครื่องหมายถูก 2. กด Finish
ขั้นตอนที่ 7
1. เลือก PosrgreSQL 9.4 2. กด Next >

19. ขั้นตอนที่ 8
1. เลือก version ล่าสุด 2. กด Next >
ขั้นตอนที่ 9 กด Next >

20. ขั้นตอนที่ 10
1. เลือกแค่ PosrGIS 2. กด Next >
ขั้นตอนที่ 11 กด Next >

21. ขั้นตอนที่ 12
1. User = postgres 2. Pass = postgis 3. Port : 5432 4. กด Next
ขั้นตอนที่ 13 รอการติดตั้ง

22. ขั้นตอนที่ 14 กด Finish

23. ขั้นตอนการทางาน

24. ขั้นตอนที่ 1 คลิกที่ PostgreSQL 9.4
ขั้นตอนที่ 2
1. รหัส : postgis 2. กด OK

25. ขั้นตอนที่ 3 ทาการสร้าง Database ขึ้นมาใหม่ ไปที่ Database คลิกขวา New Database
1. ตั้งชื้อว่า GIS3 2. กด OK

26. ขั้นตอนที่ 4 กด
1. พิมพ์ CREATE EXTENSION POSTGIS; 2. กดเล่น 3. ตรวจสอบความถูกต้อง

27. ขั้นตอนที่ 5 กด แล้วกด Add File

28. ขั้นตอนที่ 6
1. เข้าไปสถานที่เก็บข้อมูล 2. เลือกไฟล์ทั้ง 4 ชั้นข้อมูล 3. กด Open
ขั้นตอนที่ 7 ไปที่ Option...

29. ขั้นตอนที่ 8
1. เปลี่ยนจาก UTF-8 เป็น TIS-620 2. กด OK
ขั้นตอนที่ 9 กด Import

30. ขั้นตอนที่ 10 จะได้4ชั้นข้อมูลมาเพิ่ม **ข้อมูลจุดATMทาเช่นเดียวกัน**
ขั้นตอนที่ 11 เปิดโปรแกรม QGIS ไปที่ Add postgGIS layers กด New

31. ขั้นตอนที่ 12
1. Name : G1 2. Host : localhost 3. Port : 5432 4. Database : GIS3_G1 , SSL
mode : allow 5. User : postgres 6. Pass : postgis 7. ติ๊กหน้า Save
8. คลิกที่ Test Connect (ทดสอบการเชื่อมต่อ) ทั้งสองอัน แล้วกด OK

32. ขั้นตอนที่ 13
1. เลือกชั้นข้อมูล 2. กด Add
ขั้นตอนที่ 14
1. เลือก พิกัด EPSG:32647 ทุกอัน 2. กด OK

33. ขั้นตอนที่ 15 เสร็จแล้วจะได้ภาพแผนที่มหาวิทยาลัยบูรพาขึ้นมา
ขั้นตอนที่ 16 ดับเบิ้ลคลิกที่ชั้นข้อมูล building
1. เลือก Style 2.เลือก Name 3. กด Categorized

34. ขั้นตอนที่ 17 Column เลือกเป็น Name > Classify > Style > Save Style > SLD File
**ทาทุกชั้นข้อมูลให้เป็น .sld **
ขั้นตอนที่ 18 ไปที่ Geoserver > Workspaces > Add new workspaces
1. ไปที่ Workspaces 2. กด Add new workspace

35. ขั้นตอนที่ 19
1. Name : GIS3 2. Namespace URI : BUU 3. กด Submit
ขั้นตอนที่ 20 ไปที่ Stores > Add new store

36. ขั้นตอนที่ 21 เลือก PostGIS – PostGIS Database

37. ขั้นตอนที่ 22
1. Workspace : GIS3 2. Data Source Name : G1_Data
3. host : localhost 4. port : 5432 5. database : GIS3 6. user : postgres pass : postgis 1แล้วกด Save
ขั้นตอนที่ 23ไปที่ boundary > Publish

38. ขั้นตอนที่ 24
1. ใส่พิกัด 32647 2.คลิกที่ Compute from native bounds 3. กด save
ขั้นตอนที่ 25 ไปที่ Styles > Add new style

39. ขั้นตอนที่ 26
1. เลือก building.sld แล้ว Upload... 2. Validata > Preview > submit
ขั้นตอนที่ 27
1. เลือก building.sld แล้ว Upload... 2. แก้ไขCodeตามภาพ 3. Validata > Preview > submit
**เราสามารถโหลดสัญลักษณ์ได้จาก iconfinder ขนาดภาพ 16px สกุลPNG**

40. ขั้นตอนที่ 28 Add layer from : GIS3:atm_g1 > atm_g1> Publish
1. ใส่พิกัด 32647 2.คลิกที่ Compute from native bounds 3. กด save
ขั้นตอนที่ 29 ไปที่ Layer > atm_g1 > Edit Layer
1. เลิอก atm_g1 2. ย้าย atm_g1 จากซ้ายไปขวา แล้วกด Save
**.ให้ทา boundary,buildingตามขั้นตอนที่26กับ28,ส่วน atm_g1 มีการเปลี่ยนCodeทาตามขั้นตอนที่27-28**
ตัวอย่าง

41. ขั้นตอนที่ 30 ไปเปิด EditPlus 3 ขึ้นมา ใส่โค้ด HTML

42. ขั้นตอนที่ 31 สร้าง Folder ใหม่ชื่อ backup แล้วตั้งชื่อไฟล์ G1 เลือก Type HTML > Save

43. ขั้นตอนที่ 32 เปิดหน้ากระดาษใหม่ แล้วใส่โค้ด

44. ขั้นตอนที่ 33 แก้ไข Code ตามภาพ

45. ขั้นตอนที่ 34 กด Save ตั้งชื่อว่า googlemap , type = .js > Save
ขั้นตอนที่ 35 จากนั้นทาการคัดลอกไฟล์ G1 , googlemap จาก Folder backup ไปที่ C:Program
FilesApache Software FoundationTomcat 7.0webapps แล้วสร้าง Folder GIS3 ขึ้นมา แล้วสร้าง Folder
รหัสนิสิต ไว้ข้างใน แล้ว Paste ไฟล์ไว้ข้างใน

46. ขั้นตอนที่ 36 จากนั้นเปิด Browser ใส่ URL localhost:8080/GIS3/56170222/G1.html
ขั้นตอนที่ 37 โหลด OpenLayers 3

47. ขั้นตอนที่ 38 คลิกที่ 2.x page.
ขั้นตอนที่ 39 เลือกไฟล์.Zip

48. ขั้นตอนที่ 40 โหลด Geoext 2
ขั้นตอนที่ 41 คลิกที่ GeoExt 2.1.0

49. ขั้นตอนที่ 42 เลือก Source code (zip)
ขั้นตอนที่ 43 แตกไฟล์ไว้ที่ C:Program FilesApache Software FoundationTomcat
7.0webappsGIS356170222Libs

50. ขั้นตอนที่ 44 จากนั้นให้กลับมาที่หน้า GeoExt 2คลิกที่ LayerTree
ขั้นตอนที่ 45 จากนั้นให้คลิกขวาที่พื้นที่สีขาว เลือก ดูรหัสต้นฉบับ

51. ขั้นตอนที่ 46 คัดลอกCodeทั้งหมดไปใส่ใน Editplus แก้ไขบรรทัดที่ 18 เปลี่ยน ../../website-
resources/OpenLayers-2.13.1 เป็น Libs/OpenLayers-2.13.1และลบ ../ หน้า loader.js ออก และลบ Code
บรรทัดที่ 27 –37 เสร็จแล้ว Save ไว้ที่ backup ตั้งชื่อว่า Mymap , type HTML > Save
ขั้นตอนที่ 47 ไปที่ Browser ไปดูCodeบรรทัดที่ 21 คลิกที่ "../loader.js" แล้วคัดลอกCodeไปใส่ใน EditPlus
แก้ไขเปลี่ยน "../../src/GeoExt" เป็น "Libsgeoext2-2.1.0srcGeoExt"

52. ขั้นตอนที่ 48 ตั้งชื่อ loader , type .js กด Save

53. ขั้นตอนที่ 49 จากนั้นให้กลับมาที่หน้า GeoExt.tree คลิกที่ tree.js คัดลอก code ไปใส่ใน EditPlus Save ไว้
ใน backup ตั้งชื่อว่า tree , type .js

54. ขั้นตอนที่ 50 จากนั้น Copy ไฟล์ Mymap, tree.js, loader.js ไปไว้ที่ C:Program FilesApache Software
FoundationTomcat 7.0webappsGIS356170222
ขั้นตอนที่ 51 แล้วไปที่ Browser พิมพ์URL http://localhost:8080/GIS3/56170222/Mymap.html แล้วจะได้
หน้าต่างแบบนี้ขึ้นมาดังภาพ

55. ขั้นตอนที่ 52 เปิดโปรแกรม QGIS ขึ้นมาแล้วไปที่ Plugins > Manage and install Plugins…
ขั้นตอนที่ 52 หาการติดตั้ง Plugin 2 ตัว QGIS Cloud Plugin และ OpenLayers Plugin ตานลาดับ

56. ขั้นตอนที่ 53 เสร็จแล้วให้รีสตาร์ทโปรแกรม QGIS ใหม่ แล้วไปที่ Add vector layer > Browse เลือกข้อมูล
boundary.shp, building.shp, road.shp และ water.shp > Open > Open
ขั้นตอนที่ 54 ไปที่ Cloud ใครที่ยังไม่ได้สมัครไปที่ Signup สมัครให้เรียนร้อยแล้ว Login เข้ามา แล้วเราจะ
ได้Database ขึ้นมา

57. ขั้นตอนที่ 55 จากนั้นไปที่ Upload Data > Refresh layers > Upload data รอสักพัก
ขั้นตอนที่ 56 Save Project ให้เลือกที่เก็บข้อมูลเป็น backup ตั้งชื่อว่า Online_ GIS3_G1 > Save

58. ขั้นตอนที่ 57 ไปที่ Add background layer > Google Maps > Google Satellite
ขั้นตอนที่ 58 จากนั้นไปกดที่ Publish Map > Save จะได้ดังภาพ

59. ขั้นตอนที่ 59 จะได้ URL ต่าง ๆ ขึ้นมาแล้วคลิกที่ลิ้งค์แรกก็จะได้ดังภาพ

60. ขั้นตอนที่ 60 ใส่ข้อมูล ม.บูรพา ลง Mymap แก้ไขพิกัดเป็น [100.925684, 13.277333] zoom เป็น 15
ขั้นตอนที่ 61 ลบ Code ตั้งแต่บรรทัดที่ 37-45
ขั้นตอนที่ 62 ลบ Code ตั้งแต่บรรทัดที่ 48-68

61. ขั้นตอนที่ 65 เปลี่ยนจาก Gas Stations > ขอบเขต ม.บูรพา จากนั้นไปที่ Browser เปิด Geoserver Web ขึ้นมา
ไปที่ Layer Preview > OpenLayers ของ boundary แล้วทาการคัดลอก URL
http://localhost:8080/geoserver/GIS3/wmsไปแทนที่ URL "https://ows.terrestris.de/osm-haltestellen?"
จากนั้นกลับไปที่หน้า Geoserver > Layer Preview คัดลอก GIS3:boundary จากช่อง Name ไปใส่หลัง
Layers **ทาทั้ง 4 ชั้นข้อมูล(boundary, building, road, water)**

62. ขั้นตอนที่ 66 ให้เปลี่ยนจาก Tasmania > BUU คัดลอก URL จากขั้นตอนที่ 65 มาใส่แทนบรรทัดที่ 98
จากนั้นบรรทัดที่ 100 – 103 ให้เปลี่ยนเป็น GIS3:boundary, GIS3:building, GIS3:road, GIS3:water เสร็จ
แล้วกด Save
ขั้นตอนที่ 67 ไปที่ Browser พิมพ์URL http://localhost:8080/GIS3/56170222/Mymap.html ก็จะได้ตามภาพ
QGIS cloud : http://qgiscloud.com/thaithegpon/Online_GIS3_G1