GIS3

1. งานเดี่ยว Capture GIS 3
จัดทาโดย
นางสาวปาวีณา นวลจันทร์
รหัสนิสิต 56170225
กลุ่มที่ 3

2. ติดตั้ง JAVA,Tomcat,Geoserver
ติดตั้งโปรแกรม Java 7
ให้ตรวจว่าสอบคอมพิวเตอร์ที่ใช้งานว่าเป็น 32 หรือ 64 bit
 คลิกขวา My computer เลือก Properties
 ในตัวอย่างคอมพิวเตอร์เป็น 32 bit

3. เริ่มดาวน์โหลด Java 7
 พิมพ์ใน Google ว่า Java 7 32 bit เลือกลิ้งค์อันแรก
 ให้เลือก Download ที่แถบสีเขียว หรือ ลิ้งค์ดาวน์โหลด
http://filehippo.com/download_jre_32/download/4fc91d1fc586263d88e6fe25e4f9c6fc/

4. หลังจากนั้นเข้าสู่การติดตั้ง
 กด Install
 รอโหลดการติดตั้ง

5.  เมื่อติดตั้งเสร็จกด Close
การติดตั้ง Apache Tomcat
 พิมพ์ใน Google ว่า tomcat 7 เลือกลิ้งค์อันแรก หรือ ลิ้งค์ดาวน์โหลด https://tomcat.apache.org/download-
70.cgi

6.  Download ตามสเปคเครื่อง
หลังจากนั้นเข้าสู่การติดตั้ง
 กด Next

7.  กด I Agree
 เลือก Host Manager เพิ่ม
 กด Next

8.  ให้กรอกว่า Username : admin Password : tomcat
 กด Next
 เลือกที่เก็บไฟล์เสร็จแล้วกด Next

9.  กด Install
 กด Finish เสร็จการติดตั้ง

10. การตรวจสอบ Tomcat 7
 ให้ไปที่ Browser โดยพิมพ์ http://localhost:8080 > Enter
 จะปรากฏภาพนี้หมายถึง Tomcat 7 ได้ทางานแล้ว

11. การตั้งค่าทางานของ Tomcat 7
ให้ไปสร้าง Folder ในไดร์ฟที่ต้องการเก็บงาน ตั้งชื่อเป็น GIS_58 >> รหัสนิสิต
 ให้คลิกสัญลักษณ์ อยู่ข้างล่างขวามือ

12.  ไปที่ JAVA พิมพ์ -DGEOSERVER_DATA_DIR=D:GIS3_58 ใส่ในช่อง Java Options จากนั้นกด Apply General >>
Stop >> Start >> OK
 General >> Stop >> Start >> OK

13. การติดตั้ง Geoserver
 พิมพ์ในGoogle ว่า Geoserver คลิกลิ้งค์อันแรก หรือ ลิ้งค์ดาวน์โหลด http://geoserver.org/
 คลิก Stable 2.8.0 Nigthty

14.  คลิกเลือก Web Archive แล้วดาวน์โหลด
 เมื่อดาวน์โหลดเสร็จแล้ว จากนั้นทาการแตกไฟล์ หรือ Copy >> Geoserver.war

15.  นา ไปใส่ไว้ใน C:Program FilesApache Software FoundationTomcat 7.0webapps
การตรวจสอบ Geoserver
 ให้ไปที่ Browser โดยพิมพ์ http://localhost:8080/geoserver/web/ > Enter

16.  จะปรากฏหน้าต่างขึ้นมาแบบนี้ ให้กรอกว่า Username : admin Password : geoserver >> Log In
 จะปรากฏภาพดังนี้

17. การติดตั้ง PostGIS
 พิมพ์ใน Google ว่า PostGIS คลิกลิ้งค์อันแรก หรือ ลิ้งค์ดาวน์โหลด http://postgis.net/
 คลิก Download

18.  ต่อไปให้คลิกที่ Windows Downloads
 ต่อไปให้คลิกที่ PostgreSQL EDB binaries-only

19.  จะปรากฏหน้าต่างนี้มา ให้คลิก PostgreSQL installers.
 Download ตามสเปคเครื่อง

20.  ทาการติดตั้ง PostgreSQL คลิก Next >> Next >> Next
 กรอก password : postgis , Retype password : postgis และคลิก Next

21.  กรอก Port : 5432 และคลิก Next >> Next >> Next >> Finish
 จะปรากฏหน้าต่าง Stack Builder 3.1.1 นี้ขึ้นมาเลือก postgreSQL9.4 on port 5432 >> Next

22.  คลิกที่ Spatial Extensions >> เลือก PostGIS 2.2 >> Next
 กด I Agree

23.  ให้เลือก Create Spatial database >> Next >> Next
 ในช่องกรอก password : postgis >> Next >> Install >> yes >> yes >> yes >> close >> Finish เสร็จการติดตั้ง
โปรแกรม

24. การนาเข้าข้อมูลลง Postgres/postgis
การใช้โปรแกรม PostgreSQL9.4

25.  ดับเบิ้ลคลิกที่ ใส่รหัส : postgis >> กด OK >> กด OK อีกครั้ง
การสร้าง New Database
 คลิกที่ Database >> คลิกขวา Database >> New Database >> ตั้งชื่อว่า 56170225_G3 >> OK

26.  จะปรากฏDatabase ที่เราสร้าง >> ดับเบิ้ลคลิกที่ 56170225_G3 ให้ทางาน
 ให้คลิก + หน้ารหัสนิสิตที่เราสร้างขึ้น

27.  ไปที่ >> พิมพ์ CREATE EXTENSION POSTGIS; >>คลิก >> ปิดหน้าต่าง >> NO
การนาเข้าข้อมูล Shapefile
 เริ่มจากเปิดโปรแกรม pgAdmin >>ดับเบิ้ลคลิก Database >> ดับเบิ้ลคลิกรหัส นิสิต
 ไปที่ Plug-in >>PostGIS Shapefile and DBF louder 2.1

28.  คลิก Import >> Add File
 ไปที่ DIR : D >> GIS3_58 >> BUU_LAYER >> เลือกทั้งหมด >> Open

29.  ให้ไปที่ Options…

30.  ให้พิมพ์ในช่อง เปลี่ยนจาก UTF-8 เป็น TIS-620 >> OK >> Import >> Close

31.  คลิก Import >> Close
 เมื่อทาการ Import เสร็จแล้วต่อไปเช็คดูว่า มีข้อมูลนา เข้าแล้วหรือยัง กด ก่อน > >ไปกด + หน้า
Schemas >> public >> Tables >> จะปรากฏข้อมูลที่เรา Add เข้าไป

32. การใช้ Geoserver
 ให้ไปที่ Browser โดยพิมพ์ http://localhost:8080/geoserver/web/ >> Enter
 ให้ใส่ Username : admin >> Password : geoserver >> Log In
 จากนั้นให้ไปที่ส่วนของ Data เลือก Workspaces
 จากนั้นไปคลิกที่ Add new workspaces เพื่อที่จะสร้าง Workspaces ขึ้นมาใหม่

33.  จะปรากฏหน้าต่างขึ้นมาเพื่อให้เราตั้งชื่อ Name : InternetGIS >> Namespace URI : G3 จากนั้นกด Default
Workspace >> กด Submi
 จะปรากฏขึ้นมาดังภาพ

34.  ต่อมาให้เราสร้าง Stores ไปคลิกที่ Stores >> ไปคลิกที่ Add new Store
 ไปดูที่ Vector Data Sources >> เลือก PostGIS

35.  จะปรากฏหน้าต่าง New Vector Data Source ให้กรอกข้อมูลดังนี้ Workspace : InternetGIS >> Data Source
Name : BUU >>Desription: Burapha University >> Database: 56170225_G3 >> user : postgres >> password
: postgis จากนั้นกด Save
 จากนั้นจะปรากฏ Layers ชั้นข้อมูลมา 4 ชั้นข้อมูล
 ต่อมาให้คลิก Public ที่อยู่หลังชั้นข้อมูลแต่ละข้อมูล เริ่มต้น คลิก Public หลังชั้นข้อมูลของ boundary

36.  จากนั้นไปที่ Abstract แล้วพิมพ์รายละเอียดของชั้นข้อมูล : ขอบเขตมหาวิทยาลัยบรูพา
 ต่อมาไปที่ New Keyword : ขอบเขต >> เลือกเป็นภาษาไทย >> กด Add Keyword

37.  ต่อมาไปที่ Declared SRS >> ไปกด Find
 จะปรากฏหน้าต่างให้ใส่ระบบพิกัดอ้างอิง ให้เราเลือก 32647 WGS 84 / UTM zone 47N

38.  จากนั้นไปดูที่ Bounding Boxes >> กด compute from native bounds >> Sava
 จากนั้นให้ไปคลิกที่ Laters >> ไปคลิกที่ Add new resource

39.  ไปที่ Add layer from >> เลือก Internet:Buu Data
***จากนั้นให้เรากดที่ Publish ที่อยู่หลังข้อมูลที่เราต้องการนาเข้า ทาแบบเดิมทาซ้าจนครบทุกชั้นข้อมูล***
 ต่อมาให้เราไปที่ Layer Preview > InternetGIS1:boundary คลิกที่ OpenLayers ของชั้น
ข้อมูลเพื่อเช็คว่าแผนที่ขึ้นหรือป่าว
***ในที่นี้คลิก OpenLayers ด้านหลังของชั้นข้อมูล ***

40.  จะมีหน้าต่างขึ้นมาแสดงดังภาพ
 InternetGIS:boundary
 InternetGIS:building

41.  InternetGIS:road
 InternetGIS:water

42. การใช้ Qgis ใส่สี SLD และการนาเข้า Geoserver
การใส่สีให้กับชั้นข้อมูลโปรแกรม Qgis
 เปิดโปรแกรมQGIS >> คลิก Add PostGIS Layers
 ปรากฏหน้าต่าง Add PostGIS Table(s) คลิกที่ New หรือ ใหม่ เพื่อเพิ่มโฟลเดอร์

43.  ปรากฏหน้าต่าง Create a New PostGIS connection จากนั้นกรอกข้อมูลดังนี้ Name: G_3 >> Host : localhost
>> Database : 56170225_G3 >> SSL mode : allow (ต้องการ) >> Username : postgres >> Password : postgis
>> Test Connect

44.  คลิกกากบาทหน้า Save Username –Password >> กด OK >> กด OK อีกครั้ง

45.  กลับมาที่หน้าต่าง Add PostGIS Table (s) >> connect(เชื่อมต่อ) >> + public
 จากนั้นให้เลือกชั้นข้อมูลที่ต้องการ >> กด Add หรือ กด เพิ่ม

46.  ปรากฏหน้าต่าง Coordinate Reference Selector >> พิมพ์ในช่อง Filter : 32647 จะปรากฏให้เลือก แล้วไปกด
เลือก WGS 84 / UTM zone 47N >> OK
***ทาซ้า 4 รอบ ***

47.  จะได้ข้อมูลปรากฏดังภาพ
 จากนั้นให้เราไปดับเบิ้ลคลิกตรงชั้นข้อมูลที่เราต้องการที่ปรับเปลี่ยนสีหรือสัญลักษณ์ที่เราต้องการ
 เริ่มจากปรับเปลี่ยนสี boundary

48.  จะปรากฏหน้าต่างขึ้นมาดังภาพ ให้เราไปที่ Style (รูปแบบ) >> Color เลือกสีตามต้องการ >> กด OK
>> Apply
 เมื่อได้สีตามต้องการแล้วให้ Save ไฟล์เป็นสกุล .sld คลิก รูปแบบ >> Save style >> SLD File

49.  เลือกที่เก็บไฟล์ *ในที่นี้เก็บไว้ที่ D:GIS3_58* >> ตั้งชื่อว่า boundary_G3 >> Save >> กด OK
 ภาพที่ได้จากการปรับแต่งสีข้อมูล

50.  จากนั้นให้เราไปเปิด Geoserver ขึ้นมาแล้วที่ Style >> Add New Style
 เลือกไฟล์ใน GIS3_58 >> Boundary_G3.sld >> Open >> Upload… >> โค้ดจะแสดงตามภาพ

51.  ปรากฏโค้ดทั้งหมดในหน้าต่าง ต่อมาให้ไปกด Preview legend >> Submit
 ต่อมาให้เราไปคลิก Layers >> boundary

52.  ไปคลิกที่ publishing
 จากนั้นให้เราเลื่อนลงมาที่ Default Style > ให้เลือกเป็น boundary_G3 และให้เลื่อนลงมาที่ Additional Styles >>
เลือก Boundary_G3 แล้วคลิกเครื่องหมาย ให้ข้อมูลไปอยู่ฝั่ง Selected Styles ดังภาพ >> กด Save

53.  จากนั้นไปที่ Layer preview ไปคลิกที่ OpenLayers ที่อยู่ด้านหลัง InternetGIS:boundary เพื่อเช็คว่า boundary ของ
เรามีสีขึ้นหรือป่าว จะปรากฏดังภาพ
 ใส่สีให้กับชั้นข้อมูล Building
 เปิด QGIS ขึ้นมาที่ทาค้างไว้

54.  จากนั้นให้เราไปดับเบิ้ลคลิกตรงชั้นข้อมูลของ building >> จะปรากฏหน้าต่างขึ้นมาดังภาพให้เราไปที่ Style
(รูปแบบ) >> Single Symbol (สัญลักษณ์เดียว) >> เลือก Categorized (จัดหมวดหมู่)
 จากนั้นให้ไปคลิกที่ Colum >> แล้วเลือก Name >> กด Classify >> คลิก Apply

55.  จากนั้นให้ Save ไฟล์เป็นสกุล .sld คลิกรูปแบบ >> Save style >> SLD File
 เลือกที่เก็บไฟล์ *ในที่นี้เก็บไว้ที่ D:GIS3_58* >> ตั้งชื่อว่า building _G3 >> Save >> กด OK

56.  ภาพที่ได้จากการปรับแต่งสีข้อมูล
 จากนั้นให้เราไปเปิด Geoserver ขึ้นมาแล้วที่ Style > Add New Style

57.  เลือกไฟล์ใน GIS3_58 >> building _G3.sld >> Open >> Upload… >> ปรากฏโค้ดทั้งหมดในหน้าต่าง ต่อมา
ให้ไปกด Preview legend >> Submit
 ต่อมาให้เราไปคลิก Layers >> building

58.  ไปคลิกที่ publishing
 จากนั้นให้เราเลื่อนลงมาที่ Default Style >> ให้เลือกเป็น building _G3 และให้เลื่อนลงมาที่ Additional Styles
>> เลือก building _G3 แล้วคลิกเครื่องหมาย ให้ข้อมูลไปอยู่ฝั่ง Selected Styles ดังภาพ >> กด Save

59.  จากนั้นไปที่ Layer preview ไปคลิกที่ OpenLayers ที่อยู่ด้านหลัง InternetGIS: building เพื่อเช็คว่า building ของ
เรามีสีขึ้นหรือป่าว จะปรากฏดังภาพ

60. สร้างชั้นข้อมูลจุดใน QGIS เพิ่มไอคอนลง Geoserver
 ก่อนอื่นให้เราเปิดโปรแกรม QGIS และให้เราไปคลิกที่ Add PostGIS Layer >> G_3 กด Connect(เชื่อมต่อ) >>
+ public เพื่อเลือกชั้นข้อมูล boundary, building >> Add (เพิ่ม)

61.  ปรากฏหน้าต่าง Coordinate Reference Selector >> พิมพ์ในช่อง Filter : 32647 จะปรากฏให้เลือก แล้วไปกด
เลือก WGS 84 / UTM zone 47N >> OK ***ทาซ้าสองครั้ง***

62.  จะปรากฏดังภาพ
 การทาจุด ATM โดยไปที่ New Shapefile Layer
 เลือกชนิด : จุด, File encoding : EPSG:32647, WGS 84 / UTM zone 47N และชื่อ :Name >> จากนั้นกดเพิ่ม
ตารางรายละเอียด >> กด OK

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

64.  เมื่อกาหนดจุด ATM ได้ตามต้องการแล้ว ให้กด Toggle Editing > Save
 เมื่อเราต้องการสัญลักษณ์ข้อมูลที่เป็นภาพตู้ ATM ให้ไปที่ www.iconfinder.com จะปรากฏดังภาพ และ Search คาว่า atm

65.  เลือกสัญลักษณ์ตามต้องการแล้ว ดาวน์โหลดเป็น .PNG >> เก็บไว้ในโฟร์เดอร์ที่ทางาน
 จากนั้นกลับไปที่ pgAdmin III >> ไปดับเบิ้ลคลิกที่ PostgreSQL 9.5 (localhost:5432) >> ใส่ Password : postgis
>> จากนั้นไปคลิกที่ Database ของเรา > ไปคลิกที่ Execute the last used plugin. >> เลือก PostGIS Shapefile and
DBFleader 2.2

66.  ทาการ Import file ที่ชื่อว่า point_1 คลิกที่ Add File >> เลือกไฟล์ point_1 >> กด Open >> คลิก Options >> ให้
พิมพ์ในช่อง: TIS-620 >> กด OK >> คลิกที่ Import

67.  ต่อมาให้ไปที่ Geoserver จากนั้นไปที่ Styles >> Add New Styles
 จากนั้นให้ไปคลิกที่ เรียกดู >> เลือกไฟล์ point_1.sld >> กด Open

68.  คลิกที่ Upload จะปรากฏโค้ดขึ้นมา
 จะมีโค้ดปรากฏขึ้นมาให้ทาการแก้ไขโค้ดในบรรทัดที่ 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>

69.  จากนั้นให้กด Validate >> กด Preview Legend >> กด Submit

70.  ไปที่ Layers >> Add a new resource
 ในช่อง Add layer from เลือก InternetGIS:BUU Data >> จากนั้นกด Publish ของชั้นข้อมูล Point_1

71.  ต่อมาให้ไปที่ Declared SRS >> กด Find
 จะปรากฏหน้าต่างให้ใส่ระบบพิกัดอ้างอิง ให้เราเลือก 32647 WGS 84 / UTM zone 47N

72.  จากนั้นไปดูที่ Bounding Boxes >> กด compute from native bounds >> Sava
 ต่อมาไปคลิก Layers >> กด point_1

73.  ไปคลิกที่ Publishing
 จากนั้นให้เราเลื่อนลงมาที่ Default Style >> ให้เลือกเป็น point_1 และให้เลื่อนลงมาที่ Additional Styles >>
เลือก point_1 แล้วคลิกเครื่องหมาย ให้ข้อมูลไปอยู่ฝั่ง Selected Styles ดังภาพ >> กด Save

74.  ไปที่ Layer Preview >> OpenLayer >> จะแสดงข้อมูลจุด

75. Edit plus สร้าง HTML (hello world) เรียกใช้ Google map API
 สร้าง Folder ว่า GIS3 ที่ C:Program FilesApache Software FoundationTomcat 7.0webapps
 คลิกเข้าไปใน Folder GIS3 แล้ว สร้าง Folder อีกว่า 56170225_3

76.  สร้าง Folder อีกหนึ่ง Folder ข้างใน Folder 56170225_3 ชื่อว่า WEB-IMF
 เปิดโปรแกรม Edit Plus3ขึ้นมา แล้วกด New >> Normal Text หรือกด Ctrl+N จะปรากฏมาดังภาพ

77.  จากนั้นก้พิมโค้ดลงไป
 แล้วทาการ save ไปที่ file save ไว้ที่ Desktop ตั้งชื่อ G3 เลือก.html

78.  เมื่อ save แล้วเอางานไปวางไว้ที่ โฟลเดอร์รหัสนิสิต

79.  เปิดในเว็บ http://localhost:8080/GIS3/56170225_3/ >> จะได้ผลลัพธ์ดังภาพ
 จากนั้น เข้าไป google >> พิมพ์ว่า openlayers googlemap api v3 >> เลือกลิ้งค์แรก

80.  จะปรากฏดังภาพ >> เลือก google-v3.js source
 ได้หน้าต่างแบบนี้ >> กด ctrl+a >> กด ctrl+c

81.  แล้วเข้ามาที่ Edit plus แล้วกดวาง
 ทาการลบลิ้งค์ที่ไม่ต้องการ บรรทัดที่ 33-38

82.  เปลี่ยนพิกัด เป็น 100.927557,13.2789842 ในบรรทัด 28
 แล้วทาการ save ไปที่ file save ไว้ที่ Desktop ตั้งชื่อ googlemap >> เลือก .js

83.  เมื่อ save แล้วเอางานไปวางไว้ที่ โฟลเดอร์รหัสนิสิต
 แล้วเปิดงาน index พิมพ์ตามดังภาพ

84. แปลงพิกัด proj4js. ให้ชั้นข้อมูลเปิดกับ googlemap
 ไป Download Proj4js.rar ในกลุ่มGIS3 แล้วแตกไฟล์ไปวางใน C:Program FilesApache Software
FoundationTomcat 7.0webapps จะได้แบบนี้

85.  เปิด G3 ขึ้นมาแล้วก็อบโค้ดในกลุ่ม GIS3 ดังภาพ
 พิมพ์ตามภาพลงไปใต้ title

86.  ไปที่เข้าแถบ googlemap.js ใน Editplus ข้างล่าง function พิมพ์เพื่อกาหนดตัวแปรและประกาศค่าตัวแปร
//Extent Bound
var minx = -20037508;
var miny = -20037508;
var maxx = 20037508;
var maxy = 20037508;
var prj32647= new OpenLayers.Projection("EPSG:32647");
var prjGoogle = new OpenLayers.Projection("EPSG:900913");
ดังภาพ

87.  แล้วกด save เข้าไปที่ C:Program FilesApache Software FoundationTomcat 7.0webapp
 เปิด Browser ใส่ URL เป็น http://localhost:8080/GIS3/56170225/G3.html

88. Load Geoext และ OpenLayers
 ดาวน์โหลด OpenLayers 3ใน google >> เลือกลิ้งค์แรก
 คลิก 2.x page.

89.  เลือกโหลดไฟล์ .zip
 โหลดเสร็จ >> แตกไฟล์มาไว้ที่ C:Program FilesApache Software FoundationTomcat
7.0webappsGIS356170225_3Libs

90.  ดาวน์โหลด Geoext 2 ใน google >> ลิงค์แรก
 เลื่อนไปที่ Download >> GeoExt 2.0.3

91.  เลือกโหลดที่เป็น .zip
 โหลดเสร็จ >> แตกไฟล์มาไว้ C:Program FilesApache Software FoundationTomcat
7.0webappsGIS356170225_3Libs

92.  ไปที่เว็บ https://geoext.github.io/geoext2/ >> Examples >> LayerTree
 คลิกขวาตรงพื้นที่สีขาว >> ดูรหัสต้นฉบับ หรือ Ctrl+U

93.  จะปรากฏหน้านี้ขึ้นมา >> Copy Source code นี้
 วาง Source code ไว้ที่ EditPlus อันใหม่

94.  แก้ไขบรรทัดที่ 18 ตั้งแต่ ../../website-resources/OpenLayers-2.13.1 เป็น Libs/OpenLayers-2.13.1
 ไปที่หน้าเว็บเดิม ที่เป็น code คลิกตรงบรรทัดที่ 19 “loader.js"
 จะปรากฏหน้านี้ขึ้นมา >> Copy Source code ดังภาพ

95.  วาง Source code ไว้ที่ EditPlus อันใหม่
 แก้ไขบรรทัดที่ 5 ตรง “../../src/GeoExt” เป็น “Libs/geoext2-2.0.3/src/GeoExt”

96.  Save ไว้ที่ :GIS3_58backup ตั้งชื่อว่า loader.js
 Copy loader.ja ไปไว้ที่ C:Program FilesApache Software FoundationTomcat
7.0webappsGIS356170225_3

97.  เข้าไปหน้า Noname 1 (อันแรก) >> ลบ “../” ตรงบรรทัดที่ 20
 กลับมาที่หน้าเว็บนี้เพื่อทาการ Copy Source code >> กด tree.js

98.  จะปรากฏหน้านี้ขึ้นมา >> Copy Source code
 วาง Source code ไว้ที่ EditPlus อันใหม่

99.  Save ไว้ที่ D:GIS3_58backup ตั้งชื่อว่า tree.js
 Copy tree.js ไปไว้ C:Program FilesApache Software FoundationTomcat
7.0webappsGIS356170225_3

100.  ลบบรรทัดที่ 26-36 ในหน้า Noname 1 (อันแรก)
 Save ไว้ที่ D:GIS3_58backup ตั้งชื่อว่า Mymap.html

101.  Copy Mymap.html ไปไว้ที่ C:Program FilesApache Software FoundationTomcat
7.0webappsGIS356170225_3
 เปิดเว็บบราวเซอร์ พิมพ์ว่า http://localhost:8080/GIS3/56170225_3/Mymap.html
 จะปรากฏหน้าต่างแบบนี้ขึ้นมา

102. QGIS Cloud
 เปิดโปรแกรม QGIS ขึ้นมาแล้วไปที่ Plugins >> คลิก Manage and install Plugins…
 ทาการติดตั้ง Plugin 2 ตัว ตัวที่ 1 คือ QGIS Cloud Plugin >> คลิก Install plugin (ติดตั้งส่วนเพิ่มเติม)

103.  ตัวที่ 2 คือ OpenLayers Plugin > คลิก Install plugin (ติดตั้งส่วนเพิ่มเติม)
 แล้วไปที่ Add vector layer > Browse เลือกข้อมูล boundary.shp , building.shp,road.shp และ
water.shp > Open > Open

104.  จะมีข้อมูลปรากฎขึ้นมาดังภาพ >> ให้เราไปใส่สีชั้นข้อมูลตามที่ต้องการ
 จากนั้นไปคลิกที่ Cloud
 ให้เราทาการ Login พอเราทาการ Login เสร็จแล้วเราจะได้ Database ขึ้นมาใหม่หนึ่งอัน

105.  จากนั้นให้เราไปที่ Upload Data > Refresh > Upload data > Upload data

106.  จะมีหน้าต่าง Save Project ให้เลือกที่เก็บข้อมูลเป็น backup ตั้งชื่อว่า Online_GIS3_58 >> กด Save
จากนั้นไปที่ Add background layer >> Google Maps >> Google Satellite
 จากนั้นไปที่ Add background layer >> Google Maps >> Google Satellite

107.  ได้ผลลัพธ์ดังภาพ
 จากนั้นกด Publish Map >> กด Save

108.  แล้วจะได้ URL แบบต่าง ๆ ขึ้นมาให้คลิกที่ลิ้งค์แรก

109.  สามารถเข้าแผนที่ได้ตามลิ้งค์นี้ http://qgiscloud.com/paweena1937/Online_GIS3_58