Contenu connexe Similaire à Capture gis3 56170180 g1 Similaire à Capture gis3 56170180 g1 (20) Capture gis3 56170180 g15. เมื่อถึงหนานี้ ใหใส User name เปน admin สวน Password เปน tomcat
จากนั้นกด Next ตอไปเรื่อยๆ จนลงโปรแกรมเสร็จ
เมื่อลงเสร็จจะไดดังภาพ กด finish เปนอันจบ
6. จากนั้นสรางโฟลเดอร GIS3_58 ไวที่ไดร D:
ไปที่ Start > Apache Tomcat 7.0 Tomcat7 > Monitor Tomcat เพื่อตั้งคา
จะปรากฏหนาตางขั้นมาดังภาพ จากนั้นไปที่แถบ Java
ในชอง java options ใหพิมพ -DGEOSERVER_DATA_DIR=D:GIS3_58
7. ทําการทดสอบ Tomcat โดยเปด Web Browser พิมพ “localhost:8080” ในชอง URL
3. การติดตั้ง Geoserver
เปด Web Browser พิมพ geoserver ใน google จากนั้น กดเขาไปอันแรก
10. ใหเรา Copy ตัว geoserve.war ไปวางใน
C:Program FilesApache Software FoundationTomcat 7.0webapps
ทําการทดสอบ Geoserver เปด Web Browser ขึ้นมาพิมพ “localhost:8080/geoserver”
จากนั้นใส Username : admin และ Password : geoserver กด Login
18. จะมีหนาตาง Stack Builder เดงขึ้นมา ใหเลือก PostgreSQL 9.3 (x64) on port 5432
จากนั้นกด next
ไปที่ Spatial Extensions เลือก PostGIS 2.1 Bundle for PostgreSQL 9.4 (64 bit) v2.2.0
จากนั้นกด Next จนขึ้นหนาตางโหลด
26. ใหไปที่เครื่องมือ พิมพคําวา CREATE EXTENSION POSTGIS; ลงไป แลวนั้นกด
เครื่องหมาย รอจนมีขอความ successfully ขึ้นแสดงวาถูกตองแลว จากนั้นปดหนาตางไป
ตอบ NO
2.การนําเขาขอมูลสู database
กดเครื่องมือ จากนั้นเลือก PostGIS Shapefile and DBF louder 2.1
30. ในชอง Name ตั้งชื่อวา InternetGIS1 ชอง Namespace URI ตั้งชื่อวา GI แลวกดติ๊ก Default
จากนั้นกด Submit ดังภาพ
จากนั้นไปที่ Stores
31. กด Add new store
ไปที่ Vector Data Sources เลือก PostGIS ดังภาพ
32. ใสขอมูลชอง Data source Name : BUU_Data ชอง Desription : DataBase of Burapha
University ชอง host :localhost ชอง port : 5432 ชอง Database : 56170180_g1 ชอง
Schema :public ชอง User :postgres ชอง Password : postgis จากนั้นกด save
จะปรากฏขอมูลขึ้นมา ดังภาพ จากนั้นใหกด publish เริ่มที่ขอมูล boundary กอน
33. ชอง Abstract : ขอบเขตมหาวิทยาลัยบูรพา วิทยาเขตบางแสน New Keyword : ขอบเขต เสร็จ
แลวเลือก Thai จากนั้นกด Add Keyword
เลื่อนมาที่หัวขอ Coordinate Reference Systems กด Find ในชองคนหาพิมพ 32647
จากนั้นกดเลือก
34. จากนั้นไปที่ Bounding Boxes กด Compute from native bounds จากนั้นกด save
ใหเราทําใหครบทุกชั้นขอมูลที่มีอยู ทําครบแลวจะไดดังภาพ
37. จากนั้นใหใส Name:group1 ชอง Host : localhost ชอง Database : 56170038_group1
ชอง SSL mode : allow ชอง Username : postgres ชอง Password : postgis
เสร็จแลวใหลองกด Test Connect ถาถูกตองจะไดดังภาพ แลวOK
กด connect กด public เลือก boundary กด Add
39. กด color เลือกสีที่ชอบ จากนั้นไปที่ style > save style > SlD Fileเก็บไวใน GIS3_58 ตั้งชื่อ
วา boundary_group1 กด Save กด OK
จากนั้นเปด Geoserver ขึ้นมาไปที่ Styles กด Add a new style
40. เลื่อนลงมา กด เลือกไฟล แลวไปเลือกไฟล boundary_group1 ที่สรางไว จากนั้นกด upload
จะไดดังภาพ จากนั้นกด preview legend แลวกด Submit
42. เลื่อนลงมาดานลาง Default style เลือก boundary_group1 จากนั้น ชอง available เลือก
boundary_group1 แลวกด ยายฝงไปอยูชอง selected จากนั้นกด save
จากนั้นลองไปดูวาขอมูลแลวมีสีหรือไม ใหกลับไปที่ Layer preview แลวไปที่ InternetGIS1:
boundary กด OpenLayers ดูจะไดดังภาพ
45. จากนั้นไปที่ style > save style > SlD Fileเก็บไวใน GIS3_58 ตั้งชื่อวา building_group1 กด
Save กด OK
จากนั้นใหเปด Geoserver ขึ้นมาไปที่ Styles กด Add a new style เลื่อนลงมา กด เลือกไฟล
แลวไปเลือกไฟล building_group1 ที่สรางไว จากนั้นกด upload
46. จะไดดังภาพ จากนั้นกด preview legend แลวกด Submit
จากนั้นไปที่ layers เลือก building กด Publishing เลื่อนลงมาดานลาง Default style เลือก
building_group1
47. จากนั้นชอง available เลือก building_group1 แลวกด ยายฝงไปอยูชอง selected จากนั้นกด
save
จากนั้นลองไปดูวาขอมูลแลวมีสีหรือไม ใหกลับไปที่ Layer preview แลวไปที่ InternetGIS1:
building กด OpenLayers ดูจะไดดังภาพ
50. ชอง Type : Point ชอง File encoding : TIS-620 ชอง EPSG : 32647,WGS 84 /UTM zone
47N ชอง Name : Name จากนั้นกด Add to attributes list >> OK
จากนั้นให save ไปที่ GIS3_58 ตั้งชื่อวา point_1 กด save
51. ไปที่เครื่องมือ Toggle Editing และ Add Feature ดังภาพ จากไหนใหทําการกําหนดจุดตามที่
ตองการ
เมื่อกดจุดลงไปจะปรากฏหนาตางใหใสขอมูลตามตองการ ดังภาพ
53. จากนั้นใหเรากลับไปนําเขาขอมูลจุดเขาสู database ทําการเปดโปรแกรมขึ้นมา แลวไปที่
56170180_g1 กดเครื่องมือ จากนั้นเลือก PostGIS Shapefile and DBF louder 2.1
Add File ไปที่ GIS3_58 เลือก point_1.shp จากนั้นกด option เปลี่ยนเปน TIS-620 กด
Import
ไปเปด Web Browser ใหเขาไปที่ https://www.iconfinder.com จากนั้นพิมพในชองวา atmใหเรา
เลือกรูปที่ตองการ ขนาดไมเกิน 15 px นามสกุล .png นําเก็บไวที่ GIS3_58 ตั้งชื่อวา atm
54. จากนั้นกลับไปที่ Geoserver เพื่อนํา point เขาสู geoserver ไปที่ Styles กด Add a new
style เลื่อนลงมา กด เลือกไฟล แลวไปเลือกไฟล point_1.sld ที่สรางไว จากนั้นกด 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>
จากนั้นกด Validate ดู และกด Preview Legend จากนั้นกด Submit
หากโคดถูกจะปรากฏรูปไอคอนที่เราไปโหลดมา ดังภาพดานลาง
55. จากนั้นไปที่ layers > add a new resource จากนั้นชอง add layer from ใหเลือกเปน
InternetGIS1:BUU_Data แลวไปที่ point_1 กด publish
56. เลื่อนมาที่หัวขอ Coordinate Reference Systems กด Find ในชองคนหาพิมพ 32647
จากนั้นกดเลือก จากนั้นไปที่ Bounding Boxes กด Compute from native bounds
จากนั้นกลับไปดานไป กดเลือก Publishing เลื่อนลงมาดานลาง Default style เลือก point_1
จากนั้นชอง available เลือก point_1 แลวกด ยายฝงไปอยูชอง selected จากนั้นกด save
58. การทํา Google Map API
ใหไปทําการสราง Folder ไวใน C:Program FilesApache Software FoundationTomcat
7.0webapps ใหตั้งชื่อวา GIS3 และใน GIS3 ใหสราง Folder 56170180_1 เอาไว และไป
สราง Folder ใน D:GIS3_58 ตั้งชื่อวา backup1
60. จากนั้นแกโคด ในบรรทัดที่ 14 จาก <script src="googlemap.js"></script> ใหเราเปลี่ยนเปน
<script src="map1.js"></script> จากนั้นใหทําการ save เก็บไวใน Folder backup1 ที่สราง
เอาไว ตั้งชื่อวา G1 นามสกุล .HTML
จากนั้นไปสรางเอกสารใหมใน EditPlus แลวไป copy โคด var map จากกลุม GIS3 นํามาวางใน
EditPlus
61. เปด geoserver ไปที่ layer preview กดดู URL ของขอมูลและทําการ copy ไว
ใหเราทําการแกโคด บรรทัดที่ 38, 40, 46, 48, 54, 56, 62, 64 เปลี่ยน URL กับ ชื่อ Layer ให
ตรงกับของเรา จากนั้นให copy บรรทัด 61-68 ไปวางบรรทัดที่ 69 แลวเปลี่ยนใหเปน ATM ดังนี้
var ATM = new OpenLayers.Layer.WMS("ATM",
"http://localhost:8080/geoserver/InternetGIS1/wms",
{
layers: "InternetGIS:point_1",
transparent: true
},{opacity: 1},
{visibility:false}
);
63. แลวให save เก็บไวที่ backup1 ตั้งชื่อวา map1 นามสกุล .js (Javascript)
จากนั้นใหเรา Copy G1.HTML กับ map1.js ที่อยูใน backup1 ไปวางไวใน C:Program
FilesApache Software FoundationTomcat 7.0webappsGIS356170180_1
64. ลองเปด Web browser ขึ้นมา พิมพ URL วา localhost:8080/GIS3/56170180_1/G1.html
ลงไป ก็จะขึ้นดังภาพ
68. จากนั้นกด โหลด 2.13.1(stable) เลือก .zip ทําการแตกไฟลออกมาเก็บไว
จากนั้นใหเราไปสราง Folder ไวใน C:Program FilesApache Software
FoundationTomcat 7.0webappsGIS356170180_1 ตั้งชื่อวา libs แลวนํา geoext และ
openlayer ที่เราแตกไฟลมาไวเก็บไว ดังภาพ
69. กลับไปที่ เวป geoext2 ไปที่หัวขอ Exaples กดเลือก layer tree
ใหเราคลิกขวาที่โลง จากนั้นกด ดูรหัสตนฉบับ
70. ใหทําการ copy โคดทั้งหมด ไปวางใน โปรแกรม EditPuls
แกโคด บรรทัดที่ 19 ตั้งแต <script src="../../website-resources/OpenLayers-2.13.1/
OpenLayers.js"></script> เปลี่ยนเปน <script src="Libs/OpenLayers-
2.13.1/OpenLayers.js"></script>
72. จากนั้นใหเรา save เก็บไวที่ backup1 ตั้งชื่อวา loader นามสกุล .js
ใหเราไป copy loder.js ที่เราสราง ไปไวใน C:Program FilesApache Software
FoundationTomcat 7.0webappsGIS356170180_1 วางลงไป
75. ใหนํา tree ไปวางที่ C:Program FilesApache Software FoundationTomcat
7.0webappsGIS356170180_1
กลับไปที่เอกสาร noname1 ใหเราลบ ตั้งแตบรรทัด 28-37 จากนั้นให save เก็บไวที่ backup1
ตั้งชื่อวา Mymap นามสกุล .HTML
76. จากนั้นนํา Mymap ไปวางที่ C:Program FilesApache Software FoundationTomcat
7.0webappsGIS356170180_1
ลองเปด Web Browser ขึ้นมาพิมพ “localhost:8080/GIS3/56170180_1/Mymap.html”
จะไดดังภาพ
77. จากนั้นใหเรากลับไปที่ C:Program FilesApache Software FoundationTomcat 7.
0webappsGIS356170180_1 เปด tree.js ใน Editplus
ตอไปใหเราไปที่ บรรทัดที่ 34 เปลี่ยนจาก center: [14, 37.5] เปน center: [100.925684 ,
13.277333] และบรรทัดที่ 35 เปลี่ยนจาก 7 เปน 15 ดังภาพ
79. บรรทัดที่ 49 ใหเราเปลี่ยนจาก"Gas Stations" เปน “ขอบเขต ม.บูรพา”
จากนั้นกลับไปที่ Geoserver ไปที่ layer preview กดดู URL ของขอมูล boundary และทําการ
copy ไว ตั้งแต http://localhost:8080/geoserver/InternetGIS1/wms
80. จากนั้นนําไปวางที่บรรทัดที่ 50 และกลับไปที่ Geoserver ไปที่ layer preview กดดู URL ของ
ขอมูล boundary ให copy คําวา InternetGIS1:boundary มา นําไปวางที่บรรทัดที่ 51 จะได
ดังภาพ
ไปบรรทัดที่ 59 ทําการเปลี่ยนชื่อเปน อาคาร ม.บูรพา
81. จากนั้นบรรทัดที่ 60 ใหวาง URL http://localhost:8080/geoserver/InternetGIS1/wms ที่
เคย Copy ไวแลววางลงไป และบรรทัดที่ 62 เปลี่ยนจาก layers: 'OSM-Bushaltestellen' เปน
layers: ‘InternetGIS1:building' ดังภาพ
ให Copy ตั้งแตบรรทัดที่ 59-70 นําไปวางที่บรรทัดที่ 71
82. จากนั้นบรรทัดที่ 71 ใหเปลี่ยนชื่อเปน ถนน ม.บูรพา บรรทัดที่ 74 ก็เปลี่ยนจาก layers:
'InternetGIS1:building' เปน layers: 'InternetGIS1:road' ดังภาพ
จากนั้นให Copy บรรทัดที่ 71-82 นําไปวางที่บรรทัดที่ 83
83. จากนั้นใหเราทําการเปลี่ยนชื่อจาก ถนน ม.บูรพา เปนแหลงน้ํา ม.บูรพา ในบรรทัดที่ 83
สวนบรรทัดที่ 86 ก็เปลี่ยนจาก layers: 'InternetGIS1:road' เปน layers: 'InternetGIS1:water'
ดังภาพ
ตอไปใหเราไปที่บรรทัดที่ 97 เปลี่ยนจาก new OpenLayers.Layer.WMS("Tasmania (Group
Layer)" เปน new OpenLayers.Layer.WMS("BUU (Group Layer)"
84. ไปที่บรรทัดที่ 98 ใหนํา URL http://localhost:8080/geoserver/InternetGIS1/wms ที่
เคย Copy ไวแลววางลงไป
จากนั้นบรรทัดที่ 100-103 ใหเราเปลี่ยนชื่อ เปน "InternetGIS1:boundary", "
InternetGIS1:building"," InternetGIS1:road", " InternetGIS1:water" ดังภาพ
85. จากนั้นใหเรากด save เก็บไวใน backup1 ตั้งชื่อวา tree เหมือนเดิม
แลวนําไปวางที่ C:Program FilesApache Software FoundationTomcat
7.0webappsGIS356170180_1
88. ใหเราทําการ พิมพคําวา Qgis cloud ลงไป จากนั้น กด Install เพื่อติดตั้งสวนเสริม
ตอไป พิมพคําวา openlayers plugin ลงไปจากนั้น กด Install เพื่อติดตั้งสวนเสริม จากนั้นกด
ปดโปรแกรมและเปดใหมอีกครั้ง เพื่อเริ่มตนการทํางานสวนเสริมที่เราติดตั้งไป
89. จากนั้นไปที่เครื่องมือ add vector layer
กด browse แลวใหเราไป ที่ Folder D:GIS3_58BUU_LAYER จากนั้นเลือกขอมูล
Boundary.shp, building.shp, Road.shp และWater.shp กด open จากนั้น กด open อีก
ครั้ง
91. ทําการกรอกขอมูล user ที่ตองการ E-mail ที่ใชงาน และ password
หลังจากใสขอมูลแลวใหเรากด sign up เพื่อสมัคร จากนั้นใหเราไปที่ hotmail ของเราแลวทําการ
ยืนยันขอมูลการสมัครของเรา
93. จากนั้นใหเราไปที่ แถบ Upload Data จากนั้นกด Upload Data
หลังจากนั้นจะมีหนาตางเดงขึ้นมาให save ใหเรา save ไปที่ D:GIS3_58backup1 ตั้งชื่อวา
online_GIS3_G1