gisบี
TRANSCRIPT
![Page 1: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/1.jpg)
การตดตง JAVA Tomcat Geoserver postgres
1. ทาการดาวนโหลด JAVA โดยคนหาคาวา jre7
2. คลกท Accept License Agreement แลวเลอกโหลดแบบ Windows x86 Offline
![Page 2: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/2.jpg)
3. เมอดาวนโหลดเสรจแลว ในหนาตางการตดตงคลก Install
4. คนหา tomcat7 เพอทาการตดตงคลกทลงแรก
![Page 3: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/3.jpg)
5. จากนนเลอกโหลดแบบ 32-bit/64-bit Windows Service Installer..
6. เมอดาวนโหลดเสรจแลว ใหทาการตดตงในหนาตางนใหคลก Next
![Page 4: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/4.jpg)
7. คลก I Agree
8. ใหทาการเชคบลอคตามรป จากนนกด Next
![Page 5: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/5.jpg)
9. ใหดวาใชพอรตอะไรแลว แลวทาการเซต User Name และ Password จากนนกด Next
10. ตดตงไวท ไดฟ C:\Program Files\Java\jre7
![Page 6: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/6.jpg)
11. จากนนกด Install
12. คนหา geoserver กดเลอกลงแรก
![Page 7: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/7.jpg)
13. แถบ Stable คลก Nightly
14. คลกเลอก Web Archive
![Page 8: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/8.jpg)
15. เมอดาวนโหลดเสรจแลว ใหแตกไฟลไวทหนา Desktop
16. จากนน copy มาวางไวใน C:\Program Files (x86)\Apache Software Foundation\Tomcat 7.0\webapps
![Page 9: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/9.jpg)
17. คนหา postgis download เลอกลงแรก
18.
![Page 10: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/10.jpg)
19. เลอนลงมาเจอคาวา windows download ใหคลกเขาไป
20. คลกเลอก pg94
![Page 11: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/11.jpg)
21. คลกเลอก archive
22. คลกเลอกตวสดทายเพอทาการดาวนโหลด
![Page 12: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/12.jpg)
23. ในหนาตางการตดตงใหคลก I Agree
24. คนหา postgres 9.4 download
![Page 13: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/13.jpg)
25. คลกเลอก Windows
26. คลก Download
![Page 14: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/14.jpg)
27. คลกเลอกโหลดแบบ Win x86-64 (ในกรณทเครองเปนแบบ 64 bit)
28. ในหนาตางการตดตง คลก Next
![Page 15: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/15.jpg)
29. คลก Next
30. คลก Next
![Page 16: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/16.jpg)
31. คลก Next
32. ดวาเปนรนอะไรและพอรตแบบไหน จากนนคลก Next
.
![Page 17: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/17.jpg)
33. คลกเลอก PostGIS 2.2 Bundle for PostgresSQL(64 bit) v2.2.0 จากนนกด Next
34. คลก Next
![Page 18: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/18.jpg)
35. คลกเลอกทงสองจากนนคลก Next
36. เลอกทเกบจากนน คลก Next
![Page 19: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/19.jpg)
37. ใส User Name Password และ Port จากนนคลก Next
38. จากนนตงชอ Database
![Page 20: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/20.jpg)
การใชงาน PostGIS
1. เปดโปรแกรม pgAdmin lll ดบเบลคลกท ตามภาพทปรากฏ
2. คลกขวาทชนขอมล Database เพอสราง Database ใหม กด New Database ..
![Page 21: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/21.jpg)
3. ตงชอตรงชอง Name วา 56170233
4. คลกท เครองหมาย SQL
![Page 22: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/22.jpg)
5. ในแทบ SQL Editor พมพคาวา CREATE EXTENSION POSTGIS; จากนนกดทเครองหมาย Execute
query
6. เมอกดรนเรยบรอยแลวจะขนขอความดงภาพ
![Page 23: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/23.jpg)
7. ไปท Execute the last use plugin > PostGIS Shapefile and DBF loader 2.1
8. จะมหนาตางใหมขนมา คลกทแถบ Import และ Add file
![Page 24: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/24.jpg)
9. ไปท ไดฟ D > BUU_LAYER
10. เลอกขอมล shapefile ทงสตว แลวกด open
![Page 25: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/25.jpg)
11. คลกท Options เพอทาการแกไขใหอานภาษาไทยได
12. พมพ TIS-620 แลวกด ok
![Page 26: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/26.jpg)
13. กดทขอมลให Active จากนนกด Import
14. ไปทชนขอมล 56170233 > Schemas > public แลวกดคลกเขาไป
![Page 27: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/27.jpg)
15. เปดชนขอมล Tables จะเหนวามขอมล shapefile ทนาเขามาถกจดเกบไวในน
16. คลกขวาทขอมล View Data > View Top 100 Rows เพอดรายละเอยดของขอมล
![Page 28: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/28.jpg)
จะเหนขอมลดงภาพ
![Page 29: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/29.jpg)
การใชงาน geoserver
1. เขา geoserver ไปท localhost:8080/geoserver/ จากนนใหใส Username และ Password
2. กอนนาเขาขอมลตองทาการสราง Workspaces เพอจดเกบหรอเปนพนทในการทางาน ไปคลกท
Workspaces
![Page 30: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/30.jpg)
3. คลก Add new workspaces
4. ชอง Name : internetGIS1 , Namespace URI : GI กดเชคบลอก ท Default Workspace จากนนกด
Submit
![Page 31: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/31.jpg)
5. workspaces ทสรางมาจะปรากฏดงภาพ
6. ไปท Stores
![Page 32: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/32.jpg)
7. คลกท Add new stores
8. เลอก PostGIS - PostGIS Database
![Page 33: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/33.jpg)
9. กรอกขอมลใหครบ ดงน
Data Source Name : BUU Data
Description : DataBase of Burapha University
ในแถบ Connection Parameters ตองเซตคาทกครง
host : localhost , port : 5432
database : 56170233 (ตงตาม database ในPostgres)
user : postgres , password : postgis
![Page 34: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/34.jpg)
10. จากนนกด save
11. คลกท Publish ในชนขอมล
12. กรอกขอมลดงภาพ
![Page 35: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/35.jpg)
13. แถบ Coordinate Reference Systems ตองทาการเซตคาระบบพกด โดยคลกท Find
14. search หา ระบบพกด 32647 จากนนคลกทตวเลข
![Page 36: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/36.jpg)
15. จากนนกด Compute from native bounds
16. จากนนกด save
![Page 37: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/37.jpg)
17. จะเหนขอมล ทเพมเขามาดงภาพ
18. จากนนไปท Layer Preview คลก Openlayers เพอเปดดขอมล
![Page 38: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/38.jpg)
19. คลก Openlayers เพอเปดดขอมล
20. ขอมลจะปรากฏดงภาพ
![Page 39: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/39.jpg)
21. สามารถคลกเลอกรปแบบของขอมลไดวาจะแสดงผลแบบใด (ปรบขนาด)
![Page 40: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/40.jpg)
การใช QGIS SLD เพอนาเขาใน geoserver
1. เปดโปรแกรม QGIS แลวทาการนาเขาขอมล Shapefile จาก PostGIS เพอปรบแตงสญลกษณของขอมล
ไปท Add PostGIS Layers
2. คลกท New เพอทาการเชอมตอกบ Database
![Page 41: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/41.jpg)
3. หนาตางนใหทาการเซตคาตางๆ ใหครบถวน ในชอง Database ใหใสใหตรงกบ Database ใน Postgres
จากนนกด Test Connect > OK
![Page 42: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/42.jpg)
4. จากนนกด Connect
5. ใหทาการเลอกนาเขาขอมล ทง 4 ชนขอมล แลวกด Add
![Page 43: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/43.jpg)
6. จะมใหเลอกระบบพกด ใหทาการเลอกโดยคนหาคาวา 32647 จากนนเลอกใหครบทกชนขอมล กด OK
7. ดบเบลคลกทชนขอมลเพอทาการปรบเปลยนส
![Page 44: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/44.jpg)
8. ทาการเลอกสจากนนจาโคดสทเลอกไว แลวกด OK
9. กด Apply จากนนไปท Style > Save Style > SLD File
![Page 45: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/45.jpg)
10. เลอกทเกบ save วา boundary_group1 เลอกนามสกลไฟลแบบ SLD File (*.sld)
11. ไปท localhost:8080/geoserver/ จากนนไปท Layers
![Page 46: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/46.jpg)
12. คลกท Add a new resource
13. เลอกจาก workspace ทสรางไวแลวคอ internetGIS1
![Page 47: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/47.jpg)
14. จากนนคลกท Publish
15. ไปทแถบ Publishing
![Page 48: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/48.jpg)
16. Default Styles คลกเลอก boundary_group แถบ Available Styles ใหเลอก boundary_group ไวทาง
หนาตางขวามอ
17. ไปท Styles > Add a new style
![Page 49: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/49.jpg)
18. คลกเลอกไฟล
19. เลอกไปยงไฟล sld ทเคย save คอ boundary_group1.sld
![Page 50: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/50.jpg)
20. กด Upload จากนน กด Preview legend > Submit
** ขนตอนนใหทาทกครงหลงจากท Add sld เขาไปในทกชนขอมล
![Page 51: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/51.jpg)
การสรางชนขอมลใน QGIS และเพมไอคอนลงใน geoserver
1. เปดโปรแกรม QGIS Desktop 2.8.1 ไปทคาสง Add PostGIS Layers
2. คลก Connect จากนนจะมชนขอมลขนมาใหเลอก กดเลอก2ชนขอมลคอ boundary building คลก Add
![Page 52: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/52.jpg)
3. ทาการใสระบบพกดใหกบทงสองชนขอมล เลอกเปน EPSG:32647
4. ขอมลจะปรากฏดงภาพ
![Page 53: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/53.jpg)
5. คลกท New Shapefile Layer
6. เลอกเปนแบบ Point ใหอานภาษาไทยไดเลอกแบบ TIS-620 พกดคอ EPSG:32647 ตงชอวา name
จากนนคลกท Add to attribute list
![Page 54: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/54.jpg)
7. จะเพมชอของ attribute เขามา จากนนกด OK
8. เลอกทเกบ ตงชอวา point_1
![Page 55: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/55.jpg)
9. คลกท Toggle Editing
10. คลกท Add Feature
![Page 56: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/56.jpg)
11. ทาการดจไตซ คลกทใดทหนงจะมหนาตางขนมาใหกรอกชอ ทาการดจไตซใหครบ
12. พอเสรจแลวกดท Toggle Editing อกครง
![Page 57: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/57.jpg)
13. ดบเบลคลกทชนขอมล point_1
14. ไปท Style > Save Style > SLD File
![Page 58: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/58.jpg)
15. เลอกทเกบตงชอ point_1 นามสกล .sld กด save
16. กด ok อกครง
![Page 59: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/59.jpg)
17. เปดโปรแกรม pgAdmin คลกท Plugin > PostGIS Shapefile and DBF loader 2.1
18. ไปท D:\BUU_LAYER คลกเลอก point_1.shp กด Open
![Page 60: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/60.jpg)
19. คลกท Options พมพ TIS-620 จากนนกด OK
20. คลกท Import
![Page 61: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/61.jpg)
21. ไปท Geoserver > Styles
22. คลก Add a new style
23. คลกเลอกไฟล
![Page 62: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/62.jpg)
24. เลอกไฟล point_1.sld > open
25. จากนนคลก Upload แลวกด Preview Legend
![Page 63: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/63.jpg)
26. ทาการเปลยนรปแบบการแสดงผลขอมลจากจดได โดยการดาวนโหลดภาพไอคอนมา ใหไปทเวบไซต
https://www.iconfinder.com/ จากนนคนหา ATM
27. ทาการเลอกรปแบบทเราตองการ เลอกเปน png
![Page 64: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/64.jpg)
28. เมอไดไอคอนทเราตองการแลว ใหกลบไปท geoserver > style อกครง แลวทาการแกไขโคดในบรรทด
ท 11-22 เปน
<se:Graphic>
<se:ExternalGraphic>
<se:OnlineResource xlink:type="simple" xlink:href="file:/D:/56170233 /atm.png"/>
(<se:Format>image/png</se:Format>
</se:ExternalGraphic>
<se:Size>15</se:Size>
</se:Graphic>
จากนนกด Validate > Preview Legend > Submit
![Page 65: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/65.jpg)
ชนขอมลจะขนใน style ดงรป
29. ไปท Layers > Add a new resource
เลอก workspace
![Page 66: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/66.jpg)
30. คลก Publish ทชนขอมล point_2
31. ทาการเลอกระบบพกดใหเปน 32647
![Page 67: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/67.jpg)
32. คลกทแถบ Publishing > Default Style (เลอก point_1) > Avaliable Styles เลอก point_1 ใหแสดงผล
ทางชองทางขวา ดงภาพ
33. จากนนไปท Layer Preview คลกเลอก openlayer เพอแสดงผลในชนขอมล point_2
![Page 68: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/68.jpg)
34. จะแสดงผลดงภาพ
![Page 69: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/69.jpg)
การทา html และเรยกใชงาน Google Map API
1. ไปท C:\Program Files (x86)
2. C:\Program Files (x86)\Apache Software Foundation
![Page 70: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/70.jpg)
3. C:\Program Files (x86)\Apache Software Foundation\Tomcat 7.0
4. C:\Program Files (x86)\Apache Software Foundation\Tomcat 7.0\webapps
![Page 71: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/71.jpg)
5. สรางโฟลเดอรมาหนงโฟลเดอร
6. ตงชอวา GIS3
![Page 72: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/72.jpg)
7. จากนนคลกเขาไปทโฟลเดอร GIS3 แลวสรางโฟลเดอรขนมาใหมอกหนงโฟลเดอร
8. ตงชอ 56170233
![Page 73: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/73.jpg)
9. จากนนคลกเขาไปทโฟลเดอร 56170233 แลวสรางโฟลเดอรขนมาใหมอกหนงโฟลเดอรตงชอ WEB-INF
10. เปดโปรแกรม Editplus จากนนเขยนโคดดงภาพ แลวกด save
![Page 74: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/74.jpg)
11. เกบไวท C:\Program Files (x86)\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170233
ตงชอ 56170233 นามสกลไฟล .html
12. จากนนไปท Google Chrome พมพ URL คอ localhost:8080/GIS3/56170233/56170233.html
![Page 75: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/75.jpg)
13. จะแสดงผลดงภาพ
การเรยกใช Google Map Api
1. ไปท Google Chrome คนหาคาวา openlayers google maps api v3 คลกเลอกลงแรก
![Page 76: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/76.jpg)
2. จะมลกษณะแบบนใหคลกท google-v3.js source
3. ทาการ copy โคดทงหนา
![Page 77: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/77.jpg)
4. เปดโปรแกรม Editplus เพมหนากระดาษใหม
5. กดวาง โคดททาการ copy มาวางไว จากนนทาการเปลยนพกดละตจด ลองจจด แลวลบโคดในบรรทดท
33-39 ออก
![Page 78: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/78.jpg)
6. กด save
7. save ท C:\Program Files (x86)\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170233 ตง
ชอวา googlemap เลอกนามสกล .js
![Page 79: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/79.jpg)
การแปลงพกด ใชโฟลเดอร proj4js ใชกบ google map
1. ทาการดาวนโหลด ไฟลทชอวา proj4s.rar
2. ทาการแตกไฟลโดยคลกทไฟล คลกขวา > Extract files..
![Page 80: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/80.jpg)
3. แตกไฟลไวท C:\Program Files (x86)\Apache Software Foundation\Tomcat 7.0\lib
4. ไปท C:\Program Files (x86)\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170233 เปด
ไฟล html และ googlemap เปดในโปรแกรม editplus
![Page 81: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/81.jpg)
5. copy โคดในภาพวางในไฟล html ทเปดใน editplus
6. วางไวใน editplus แลวแกไขโคดใหเปนดงภาพ
![Page 82: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/82.jpg)
7. ไปทหนา googlemap เพอทาการแกไขโคดเปนการกาหนดพกดแผนท ประกาศตวแปรของระบบพกด
แผนท
var map;
function init() {
//Extent Bound
var minx =-20037508.34;
var miny =-20037508.34;
var maxx = 20037508.34;
var maxy = 20037508.34;
var prj32647 = new Openlayers.Projection("EPSG:32647");
var prjGoogle = new Openlayer.Projection("EPSG:900913");
var prj4326 = new Openlayer.Projection("EPSG:4326");
var bounds = new Openlayers.Bounds(minx,miny,maxx,maxy);
bounds.transform(prj32647,prjGoogle);
var option = {maxExtent:bounds, maxResolution:'auto', units:'m',
projection: prjGoogle,displayProjection:prj4326};
map = new OpenLayers.Map('map', option );
map.addControl(new OpenLayers.Control.LayerSwitcher());
var gphy = new OpenLayers.Layer.Google(
"Google Physical",
{type: google.maps.MapTypeId.TERRAIN}
);
![Page 83: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/83.jpg)
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{numZoomLevels: 20}
);
var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
);
var gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
);
map.addLayers([gphy, gmap, ghyb, gsat]);
// Google.v3 uses EPSG:900913 as projection, so we have to
// transform our coordinates
map.setCenter(new OpenLayers.LonLat(100.925927, 13.277537).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 15);
}
![Page 84: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/84.jpg)
8. เมอทาการแกไขโคดทงสองไฟลเสรจแลวกด save
![Page 85: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/85.jpg)
การใช openlayer เพมชนขอมล BUU ลงไปในเวบ localhost
1. ไปท C:\Program Files (x86)\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170233
เปดไฟล html ใน Editplus ขนมา ทาการแกไขโคดใหเปนดงภาพ
2. เปดไฟล googlemap มา พมพโคดดงน (สวนทไฮไลทคอทาการแกไขลงใหตรงกบชนขอมลใน
geoserver ของเรา)
โดยไปท Geoserver > Layer Preview > เปดชนขอมล boundary copy ดงน
ocalhost:8080/geoserver/internetGIS1/wms วางในบรรทดท 37 จากนนแกไขชอ layer ใหตรงกบชนขอมล
เรา ทาจนทกชนขอมลจะไดโคดดงน
var map;
function init() {
var minx = -20037508.34;
var miny =-20037508.34;
var maxx = 20037508.34;
var maxy = 20037508.34;
var prj32647 = new OpenLayers.Projection("EPSG:32647");
var prjGoogle = new OpenLayers.Projection("EPSG:900913");
![Page 86: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/86.jpg)
var prj4326 = new OpenLayers.Projection("EPSG:4326");
var bounds = new OpenLayers.Bounds(minx,miny,maxx,maxy);
bounds.transform(prj32647, prjGoogle);
var option = {maxExtent:bounds, maxResolution:'auto', units:'m',
projection: prjGoogle,displayProjection:prj4326};
map = new OpenLayers.Map('map', option );
//BaseLayers
var gstr = new OpenLayers.Layer.Google(
"Google Streets", // the default
{type: google.maps.MapTypeId.ROADMAP, visibility: true},
{singleTile: false, buffer: 0, isBaseLayer: true}
);
var gsat= new OpenLayers.Layer.Google(
"Google Satellite",
{type: google.maps.MapTypeId.SATELLITE, visibility: false},
{singleTile: false, buffer: 0, isBaseLayer: true}
);
var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID, visibility: false},
{singleTile: false, buffer: 0, isBaseLayer: true}
);
var gter = new OpenLayers.Layer.Google(
"Google Terrain",
{type: google.maps.MapTypeId.TERRAIN, visibility: false},
{singleTile: false, buffer: 0, isBaseLayer: true}
);
//Layer
var bound = new OpenLayers.Layer.WMS("ขอบเขตม.บรพา",
"localhost:8080/geoserver/internetGIS1/wms",
{
layers: "InternetGIS1:boundary",
![Page 87: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/87.jpg)
transparent: true
},{opacity: 0.2},
{visibility:false}
);
var build = new OpenLayers.Layer.WMS("อาคารม.บรพา",
"http://localhost:8080/geoserver/internetGIS1/wms",
{
layers: "internetGIS1:building",
transparent: true
},{opacity: 1},
{visibility:false}
);
var ATM = new OpenLayers.Layer.WMS("ต ATM",
"http://localhost:8080/geoserver/InternetGIS1/wms",
{
layers: "InternetGIS1:point_2",
transparent: true
},{opacity: 1},
{visibility:false}
);
map.addLayers([gstr,gsat,ghyb, gter,bound,build,ATM,]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
// Google.v3 uses EPSG:900913 as projection, so we have to
// transform our coordinates
map.setCenter(new OpenLayers.LonLat(100.925684,13.277333).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 15);
}
![Page 88: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/88.jpg)
จะไดโคดดงภาพ
3.ทาการ save
![Page 89: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/89.jpg)
การตดตง geoext openlayer3
1. คนหา geoext2 แลวคลกทลงแรก
2. คลกท GeoExt 2.1.0
![Page 90: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/90.jpg)
3. เลอกโหลดแบบ Source code (zip)
4. เมอดาวนโหลดเสรจแลวใหทาการแตกไฟลไปไวท D:\GIS_58\backup1
![Page 91: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/91.jpg)
5. คนหา openlayers3 คลกเลอกลงแรก
6. คลกท 2x page.
![Page 92: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/92.jpg)
7. คลกเลอกโหลดแบบไฟล zip
8. เมอดาวนโหลดเสรจแลวใหทาการแตกไฟลไปไวท D:\GIS_58\backup1
![Page 93: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/93.jpg)
9. ไปท C:\Program Files (x86)\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170233 ทาการ
สรางโฟลเดอรขนมาใหม
10. ตงชอวา Libs
![Page 94: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/94.jpg)
11. จากนนกลบไปทโฟลเดอรททาการแตกไฟลมากอนหนาน ใหทาการ copy ทงสองโฟลเดอร
12. มาวางไวท C:\Program Files (x86)\Apache Software Foundation\Tomcat
7.0\webapps\GIS3\56170233\Libs
![Page 95: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/95.jpg)
13. จะไดดงภาพ
![Page 96: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/96.jpg)
การใชงาน Geoext และ Openlayers3
1. เขาเวบไปท http://geoext.github.io/geoext2/examples/tree/tree.html จากนนคลกขวาพนทวางๆ แลวกดด
รหสตนฉบบ
2. จะขนโคดมาอกหนาเวบหนงใหทาการ copy
![Page 97: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/97.jpg)
3. นาโคดท copy มาวางไวในโปรแกรม Editplus
4. จากนนไปท C:\Program Files (x86)\Apache Software
Foundation\Tomcat7.0\webapps\GIS3\56170233\Libs\Openlayer-2.13.1
![Page 98: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/98.jpg)
5. ใหทาการแกไขบรรทดท 20 เปลยนจาก .../.../website-resources/OpenLayers-2.13.1 เปน
Libs/OpenLayers-2.13.1
6. จากนนกลบไปท หนาเวบอกครง ดโคดในบรรทดท 19 คลก ".../loader.js"
![Page 99: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/99.jpg)
7. ใหทาการ copy โคดมาทงหมด
8. นามาวางใน Editplus
![Page 100: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/100.jpg)
9. จากนนไปทC:\Program Files\Apache Software Foundation\Tomcat
7.0\webapps\GIS3\56170233\Libs\geoext2-2.0.3\src\GeoExt ทาการ copy Libs\geoext2-2.0.3\src\GeoExt
10. วางในบรรทดท 5
![Page 101: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/101.jpg)
11. คลก file > save
12.save ไวท D:\GIS3_58\backup1 ตงชอ loader เลอกนามสกลไฟล .js
![Page 102: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/102.jpg)
13. จากนนไปท ท D:\GIS3_58\backup1 คลก copy ไฟล loader.js
14. วางไวใน C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170233
![Page 103: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/103.jpg)
15. จากนนในบรรทดท 22 ลบ ../ หนา losder.js ออก
16. จากนนกลบไปทหนา GeoExt.tree แลวคลก tree.js
![Page 104: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/104.jpg)
17. Copy โคดทงหมด
18. ใหทาการเปดหนากระดาษขนมาใหม
![Page 105: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/105.jpg)
19. วางโคดท copy มาลงไป
20. จากนนไปท File > Save
![Page 106: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/106.jpg)
21. save ไวท D:\GIS3_58\backup1ตงชอ tree.js
22. ทาการ copy ไฟล tree.js ในไดฟ D:\GIS3_58\backup1
![Page 107: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/107.jpg)
23. วางไวใน C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170233
24. กลบมาทหนาโคดอนแรก ใหทาการลบโคดตงแตบรรทดท 28 - 38
![Page 108: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/108.jpg)
25. ไปท File > Save
26. save ท D:\GIS3_58\backup1 ตงชอ Mymap
![Page 109: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/109.jpg)
27. ทาการ copy ไฟล Mymap ใน D:\GIS3_58\backup1
28. วางไวใน C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170233
![Page 110: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/110.jpg)
29. จากนนเขาไปท localhost http://localhost:8080/GIS3/56170233/Mymap.html
30. จะปรากฎดงภาพ
![Page 111: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/111.jpg)
การใชงาน QGIS Cloud
1. เรมแรกเปดโปรแกรมขนมาแลวทาการตดตงปลกอน โดยไปท Plugins > Manage and Install Plugins
2. คนหาคาวา Qgis cloud แลวคลกตดตง หรอถามอยแลวใหกด Upgrade
![Page 112: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/112.jpg)
3. คนหาคาวา openlayer แลวคลกตดตง หรอถามอยแลวใหกด Upgrade จากนนเมอตดตงเสรจแลวใหปด
โปรแกรมแลวเปดใหม
4. คลกท Add Vector Layer
![Page 113: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/113.jpg)
5. เลอกชนขอมลทตองการมาแสดงผล คอ Road Water Boundary Building แลวกด Open
6. จากนนกด Open
![Page 114: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/114.jpg)
7. ชนขอมลจะแสดงดงรป
8. จดเรยงชนขอมลดงภาพ
![Page 115: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/115.jpg)
9. คลกท Cloud Setting
10. จะมหนาตางการทางานขนมาจากนนใหกด signup
![Page 116: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/116.jpg)
11. จะขนลงไปยงหนาตางการลงทะเบยน ใหทาการลงทะเบยน
12. จากนนเขาเมลลของเราแลวทาการยนยนการสมคร
![Page 117: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/117.jpg)
13. เมอทาการสมครเสรจเรยบรอยจะขนหนาตางดงรป
14. จากนนทาการ Login
![Page 118: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/118.jpg)
15. ในแถบ Account ใหคลกท Create
16. ในแถบ Upload Data คลกท Upload data
![Page 119: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/119.jpg)
17. คลกท Add background layer
18. คลกเลอก Google Maps > Google Satellite
![Page 120: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/120.jpg)
19. จะแสดงผลดงภาพ จากนนกด Publish Map
20. จะขนลงใหเราเลอกกดเขาไปเพอแสดงผลในรปแบบของเวบบราวเซอร จะแสดงผลแผนทดงรป
http://qgiscloud.com/56170233/online_GIS3_G1
![Page 121: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/121.jpg)
21. หนาตางเวบบราวเซอรทเราเลอกแสดง
![Page 122: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/122.jpg)
การแกไขโคด tree.js
1. ไปท C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170233 คลกเลอก
ไฟล tree
2. เปดในโปรแกรม Editplus
![Page 123: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/123.jpg)
3. ทาการเปลยนคาพกดในบรรทดท 34 ใหเปน (100.925684,13.277333)
4. เปลยนการ zoom ใหเปน 15
![Page 124: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/124.jpg)
5. ทาการลบโคดตงแตบรรทดท 37 - 45
6. ทาการลบโคดตงแตบรรทดท 48 - 68
![Page 125: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/125.jpg)
7. ทาการแกไขในบรรทดท 49 ใหเปนชอทจะแสดง
8. ไปท geoserver ทาการ login
![Page 126: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/126.jpg)
9. ไปท Layer Preview > คลก OpenLayers ทชนขอมล boundary
10. จากนนทาการ copy ลงทเปดมา ดงน http://localhost:8080/geoserver/G1/wms แลวมาวางในบรรทดท
50
![Page 127: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/127.jpg)
11. copy G1:boundary1 ใสในบรรทด51
12. ทาการเปลยนชอทแสดงในบรรทดท 59 ใหเปน อาคาร ม.บรพา
![Page 128: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/128.jpg)
13. จากนนกอปป http://localhost:8080/geoserver/G1/wms วางในบรรทด60 กอปป G1:building วางใน
บรรทดท 62 (ชอตามชนขอมล building ใน geoserver)
14. กอปปบรรทดท59-70 วางในบรรทดท71 เพอทาการเพมชนขอมล และทาการเปลยนชอชนขอมลใหเปน
ถนน และใสลง พรอมกบเปลยนชอ Layers เปน G1:road
![Page 129: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/129.jpg)
15. กอปปบรรทดท 71 - 82
16. วางในบรรทดท 82 ใสลงพรอมกบเปลยนชอชนขอมล ใหเปน G1:water
![Page 130: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/130.jpg)
17. ลบ Tasmania ในบรรทดท97
18. ทาการ copy โคดดานลาง วางตอจากบรรทดท 97
newOpenLayers.Layer.WMS("BUU (Group Layer)",
"http://localhost:8080/geoserver/G1/wms", {
layers: [
"G1:boundary1",
"G1:building",
"G1:road",
"G1:water"
],
transparent: true,
format: "image/gif"
}, {
![Page 131: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/131.jpg)
19. จะไดดงภาพ
20. คลก File > Save as
![Page 132: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/132.jpg)
21. save ท D:\GIS_58\backup1 ตงชอวา tree.js
22. จากนนไปท D:\GIS_58\backup1 copy ไฟล tree.js
![Page 133: Gisบี](https://reader037.vdocuments.mx/reader037/viewer/2022103010/58aa86701a28ab2e448b57bf/html5/thumbnails/133.jpg)
23. วางไวใน C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170233
24. จากนนเขาไปท localhost > http://localhost:8080/GIS3/56170233/Mymap.html จะปรากฎแผนทดง
ภาพ