View
134
Download
5
Category
Preview:
Citation preview
การตดตง JAVA Tomcat Geoserver postgres
1. ทาการดาวนโหลด JAVA โดยคนหาคาวา jre7
2. คลกท Accept License Agreement แลวเลอกโหลดแบบ Windows x86 Offline
3. เมอดาวนโหลดเสรจแลว ในหนาตางการตดตงคลก Install
4. คนหา tomcat7 เพอทาการตดตงคลกทลงแรก
5. จากนนเลอกโหลดแบบ 32-bit/64-bit Windows Service Installer..
6. เมอดาวนโหลดเสรจแลว ใหทาการตดตงในหนาตางนใหคลก Next
7. คลก I Agree
8. ใหทาการเชคบลอคตามรป จากนนกด Next
9. ใหดวาใชพอรตอะไรแลว แลวทาการเซต User Name และ Password จากนนกด Next
10. ตดตงไวท ไดฟ C:\Program Files\Java\jre7
11. จากนนกด Install
12. คนหา geoserver กดเลอกลงแรก
13. แถบ Stable คลก Nightly
14. คลกเลอก Web Archive
15. เมอดาวนโหลดเสรจแลว ใหแตกไฟลไวทหนา Desktop
16. จากนน copy มาวางไวใน C:\Program Files (x86)\Apache Software Foundation\Tomcat 7.0\webapps
17. คนหา postgis download เลอกลงแรก
18.
19. เลอนลงมาเจอคาวา windows download ใหคลกเขาไป
20. คลกเลอก pg94
21. คลกเลอก archive
22. คลกเลอกตวสดทายเพอทาการดาวนโหลด
23. ในหนาตางการตดตงใหคลก I Agree
24. คนหา postgres 9.4 download
25. คลกเลอก Windows
26. คลก Download
27. คลกเลอกโหลดแบบ Win x86-64 (ในกรณทเครองเปนแบบ 64 bit)
28. ในหนาตางการตดตง คลก Next
29. คลก Next
30. คลก Next
31. คลก Next
32. ดวาเปนรนอะไรและพอรตแบบไหน จากนนคลก Next
.
33. คลกเลอก PostGIS 2.2 Bundle for PostgresSQL(64 bit) v2.2.0 จากนนกด Next
34. คลก Next
35. คลกเลอกทงสองจากนนคลก Next
36. เลอกทเกบจากนน คลก Next
37. ใส User Name Password และ Port จากนนคลก Next
38. จากนนตงชอ Database
การใชงาน PostGIS
1. เปดโปรแกรม pgAdmin lll ดบเบลคลกท ตามภาพทปรากฏ
2. คลกขวาทชนขอมล Database เพอสราง Database ใหม กด New Database ..
3. ตงชอตรงชอง Name วา 56170233
4. คลกท เครองหมาย SQL
5. ในแทบ SQL Editor พมพคาวา CREATE EXTENSION POSTGIS; จากนนกดทเครองหมาย Execute
query
6. เมอกดรนเรยบรอยแลวจะขนขอความดงภาพ
7. ไปท Execute the last use plugin > PostGIS Shapefile and DBF loader 2.1
8. จะมหนาตางใหมขนมา คลกทแถบ Import และ Add file
9. ไปท ไดฟ D > BUU_LAYER
10. เลอกขอมล shapefile ทงสตว แลวกด open
11. คลกท Options เพอทาการแกไขใหอานภาษาไทยได
12. พมพ TIS-620 แลวกด ok
13. กดทขอมลให Active จากนนกด Import
14. ไปทชนขอมล 56170233 > Schemas > public แลวกดคลกเขาไป
15. เปดชนขอมล Tables จะเหนวามขอมล shapefile ทนาเขามาถกจดเกบไวในน
16. คลกขวาทขอมล View Data > View Top 100 Rows เพอดรายละเอยดของขอมล
จะเหนขอมลดงภาพ
การใชงาน geoserver
1. เขา geoserver ไปท localhost:8080/geoserver/ จากนนใหใส Username และ Password
2. กอนนาเขาขอมลตองทาการสราง Workspaces เพอจดเกบหรอเปนพนทในการทางาน ไปคลกท
Workspaces
3. คลก Add new workspaces
4. ชอง Name : internetGIS1 , Namespace URI : GI กดเชคบลอก ท Default Workspace จากนนกด
Submit
5. workspaces ทสรางมาจะปรากฏดงภาพ
6. ไปท Stores
7. คลกท Add new stores
8. เลอก PostGIS - PostGIS Database
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
10. จากนนกด save
11. คลกท Publish ในชนขอมล
12. กรอกขอมลดงภาพ
13. แถบ Coordinate Reference Systems ตองทาการเซตคาระบบพกด โดยคลกท Find
14. search หา ระบบพกด 32647 จากนนคลกทตวเลข
15. จากนนกด Compute from native bounds
16. จากนนกด save
17. จะเหนขอมล ทเพมเขามาดงภาพ
18. จากนนไปท Layer Preview คลก Openlayers เพอเปดดขอมล
19. คลก Openlayers เพอเปดดขอมล
20. ขอมลจะปรากฏดงภาพ
21. สามารถคลกเลอกรปแบบของขอมลไดวาจะแสดงผลแบบใด (ปรบขนาด)
การใช QGIS SLD เพอนาเขาใน geoserver
1. เปดโปรแกรม QGIS แลวทาการนาเขาขอมล Shapefile จาก PostGIS เพอปรบแตงสญลกษณของขอมล
ไปท Add PostGIS Layers
2. คลกท New เพอทาการเชอมตอกบ Database
3. หนาตางนใหทาการเซตคาตางๆ ใหครบถวน ในชอง Database ใหใสใหตรงกบ Database ใน Postgres
จากนนกด Test Connect > OK
4. จากนนกด Connect
5. ใหทาการเลอกนาเขาขอมล ทง 4 ชนขอมล แลวกด Add
6. จะมใหเลอกระบบพกด ใหทาการเลอกโดยคนหาคาวา 32647 จากนนเลอกใหครบทกชนขอมล กด OK
7. ดบเบลคลกทชนขอมลเพอทาการปรบเปลยนส
8. ทาการเลอกสจากนนจาโคดสทเลอกไว แลวกด OK
9. กด Apply จากนนไปท Style > Save Style > SLD File
10. เลอกทเกบ save วา boundary_group1 เลอกนามสกลไฟลแบบ SLD File (*.sld)
11. ไปท localhost:8080/geoserver/ จากนนไปท Layers
12. คลกท Add a new resource
13. เลอกจาก workspace ทสรางไวแลวคอ internetGIS1
14. จากนนคลกท Publish
15. ไปทแถบ Publishing
16. Default Styles คลกเลอก boundary_group แถบ Available Styles ใหเลอก boundary_group ไวทาง
หนาตางขวามอ
17. ไปท Styles > Add a new style
18. คลกเลอกไฟล
19. เลอกไปยงไฟล sld ทเคย save คอ boundary_group1.sld
20. กด Upload จากนน กด Preview legend > Submit
** ขนตอนนใหทาทกครงหลงจากท Add sld เขาไปในทกชนขอมล
การสรางชนขอมลใน QGIS และเพมไอคอนลงใน geoserver
1. เปดโปรแกรม QGIS Desktop 2.8.1 ไปทคาสง Add PostGIS Layers
2. คลก Connect จากนนจะมชนขอมลขนมาใหเลอก กดเลอก2ชนขอมลคอ boundary building คลก Add
3. ทาการใสระบบพกดใหกบทงสองชนขอมล เลอกเปน EPSG:32647
4. ขอมลจะปรากฏดงภาพ
5. คลกท New Shapefile Layer
6. เลอกเปนแบบ Point ใหอานภาษาไทยไดเลอกแบบ TIS-620 พกดคอ EPSG:32647 ตงชอวา name
จากนนคลกท Add to attribute list
7. จะเพมชอของ attribute เขามา จากนนกด OK
8. เลอกทเกบ ตงชอวา point_1
9. คลกท Toggle Editing
10. คลกท Add Feature
11. ทาการดจไตซ คลกทใดทหนงจะมหนาตางขนมาใหกรอกชอ ทาการดจไตซใหครบ
12. พอเสรจแลวกดท Toggle Editing อกครง
13. ดบเบลคลกทชนขอมล point_1
14. ไปท Style > Save Style > SLD File
15. เลอกทเกบตงชอ point_1 นามสกล .sld กด save
16. กด ok อกครง
17. เปดโปรแกรม pgAdmin คลกท Plugin > PostGIS Shapefile and DBF loader 2.1
18. ไปท D:\BUU_LAYER คลกเลอก point_1.shp กด Open
19. คลกท Options พมพ TIS-620 จากนนกด OK
20. คลกท Import
21. ไปท Geoserver > Styles
22. คลก Add a new style
23. คลกเลอกไฟล
24. เลอกไฟล point_1.sld > open
25. จากนนคลก Upload แลวกด Preview Legend
26. ทาการเปลยนรปแบบการแสดงผลขอมลจากจดได โดยการดาวนโหลดภาพไอคอนมา ใหไปทเวบไซต
https://www.iconfinder.com/ จากนนคนหา ATM
27. ทาการเลอกรปแบบทเราตองการ เลอกเปน png
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
ชนขอมลจะขนใน style ดงรป
29. ไปท Layers > Add a new resource
เลอก workspace
30. คลก Publish ทชนขอมล point_2
31. ทาการเลอกระบบพกดใหเปน 32647
32. คลกทแถบ Publishing > Default Style (เลอก point_1) > Avaliable Styles เลอก point_1 ใหแสดงผล
ทางชองทางขวา ดงภาพ
33. จากนนไปท Layer Preview คลกเลอก openlayer เพอแสดงผลในชนขอมล point_2
34. จะแสดงผลดงภาพ
การทา html และเรยกใชงาน Google Map API
1. ไปท C:\Program Files (x86)
2. C:\Program Files (x86)\Apache Software Foundation
3. C:\Program Files (x86)\Apache Software Foundation\Tomcat 7.0
4. C:\Program Files (x86)\Apache Software Foundation\Tomcat 7.0\webapps
5. สรางโฟลเดอรมาหนงโฟลเดอร
6. ตงชอวา GIS3
7. จากนนคลกเขาไปทโฟลเดอร GIS3 แลวสรางโฟลเดอรขนมาใหมอกหนงโฟลเดอร
8. ตงชอ 56170233
9. จากนนคลกเขาไปทโฟลเดอร 56170233 แลวสรางโฟลเดอรขนมาใหมอกหนงโฟลเดอรตงชอ WEB-INF
10. เปดโปรแกรม Editplus จากนนเขยนโคดดงภาพ แลวกด save
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
13. จะแสดงผลดงภาพ
การเรยกใช Google Map Api
1. ไปท Google Chrome คนหาคาวา openlayers google maps api v3 คลกเลอกลงแรก
2. จะมลกษณะแบบนใหคลกท google-v3.js source
3. ทาการ copy โคดทงหนา
4. เปดโปรแกรม Editplus เพมหนากระดาษใหม
5. กดวาง โคดททาการ copy มาวางไว จากนนทาการเปลยนพกดละตจด ลองจจด แลวลบโคดในบรรทดท
33-39 ออก
6. กด save
7. save ท C:\Program Files (x86)\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170233 ตง
ชอวา googlemap เลอกนามสกล .js
การแปลงพกด ใชโฟลเดอร proj4js ใชกบ google map
1. ทาการดาวนโหลด ไฟลทชอวา proj4s.rar
2. ทาการแตกไฟลโดยคลกทไฟล คลกขวา > Extract files..
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
5. copy โคดในภาพวางในไฟล html ทเปดใน editplus
6. วางไวใน editplus แลวแกไขโคดใหเปนดงภาพ
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}
);
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);
}
8. เมอทาการแกไขโคดทงสองไฟลเสรจแลวกด save
การใช 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");
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",
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);
}
จะไดโคดดงภาพ
3.ทาการ save
การตดตง geoext openlayer3
1. คนหา geoext2 แลวคลกทลงแรก
2. คลกท GeoExt 2.1.0
3. เลอกโหลดแบบ Source code (zip)
4. เมอดาวนโหลดเสรจแลวใหทาการแตกไฟลไปไวท D:\GIS_58\backup1
5. คนหา openlayers3 คลกเลอกลงแรก
6. คลกท 2x page.
7. คลกเลอกโหลดแบบไฟล zip
8. เมอดาวนโหลดเสรจแลวใหทาการแตกไฟลไปไวท D:\GIS_58\backup1
9. ไปท C:\Program Files (x86)\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170233 ทาการ
สรางโฟลเดอรขนมาใหม
10. ตงชอวา Libs
11. จากนนกลบไปทโฟลเดอรททาการแตกไฟลมากอนหนาน ใหทาการ copy ทงสองโฟลเดอร
12. มาวางไวท C:\Program Files (x86)\Apache Software Foundation\Tomcat
7.0\webapps\GIS3\56170233\Libs
13. จะไดดงภาพ
การใชงาน Geoext และ Openlayers3
1. เขาเวบไปท http://geoext.github.io/geoext2/examples/tree/tree.html จากนนคลกขวาพนทวางๆ แลวกดด
รหสตนฉบบ
2. จะขนโคดมาอกหนาเวบหนงใหทาการ copy
3. นาโคดท copy มาวางไวในโปรแกรม Editplus
4. จากนนไปท C:\Program Files (x86)\Apache Software
Foundation\Tomcat7.0\webapps\GIS3\56170233\Libs\Openlayer-2.13.1
5. ใหทาการแกไขบรรทดท 20 เปลยนจาก .../.../website-resources/OpenLayers-2.13.1 เปน
Libs/OpenLayers-2.13.1
6. จากนนกลบไปท หนาเวบอกครง ดโคดในบรรทดท 19 คลก ".../loader.js"
7. ใหทาการ copy โคดมาทงหมด
8. นามาวางใน Editplus
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
11. คลก file > save
12.save ไวท D:\GIS3_58\backup1 ตงชอ loader เลอกนามสกลไฟล .js
13. จากนนไปท ท D:\GIS3_58\backup1 คลก copy ไฟล loader.js
14. วางไวใน C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170233
15. จากนนในบรรทดท 22 ลบ ../ หนา losder.js ออก
16. จากนนกลบไปทหนา GeoExt.tree แลวคลก tree.js
17. Copy โคดทงหมด
18. ใหทาการเปดหนากระดาษขนมาใหม
19. วางโคดท copy มาลงไป
20. จากนนไปท File > Save
21. save ไวท D:\GIS3_58\backup1ตงชอ tree.js
22. ทาการ copy ไฟล tree.js ในไดฟ D:\GIS3_58\backup1
23. วางไวใน C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170233
24. กลบมาทหนาโคดอนแรก ใหทาการลบโคดตงแตบรรทดท 28 - 38
25. ไปท File > Save
26. save ท D:\GIS3_58\backup1 ตงชอ Mymap
27. ทาการ copy ไฟล Mymap ใน D:\GIS3_58\backup1
28. วางไวใน C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170233
29. จากนนเขาไปท localhost http://localhost:8080/GIS3/56170233/Mymap.html
30. จะปรากฎดงภาพ
การใชงาน QGIS Cloud
1. เรมแรกเปดโปรแกรมขนมาแลวทาการตดตงปลกอน โดยไปท Plugins > Manage and Install Plugins
2. คนหาคาวา Qgis cloud แลวคลกตดตง หรอถามอยแลวใหกด Upgrade
3. คนหาคาวา openlayer แลวคลกตดตง หรอถามอยแลวใหกด Upgrade จากนนเมอตดตงเสรจแลวใหปด
โปรแกรมแลวเปดใหม
4. คลกท Add Vector Layer
5. เลอกชนขอมลทตองการมาแสดงผล คอ Road Water Boundary Building แลวกด Open
6. จากนนกด Open
7. ชนขอมลจะแสดงดงรป
8. จดเรยงชนขอมลดงภาพ
9. คลกท Cloud Setting
10. จะมหนาตางการทางานขนมาจากนนใหกด signup
11. จะขนลงไปยงหนาตางการลงทะเบยน ใหทาการลงทะเบยน
12. จากนนเขาเมลลของเราแลวทาการยนยนการสมคร
13. เมอทาการสมครเสรจเรยบรอยจะขนหนาตางดงรป
14. จากนนทาการ Login
15. ในแถบ Account ใหคลกท Create
16. ในแถบ Upload Data คลกท Upload data
17. คลกท Add background layer
18. คลกเลอก Google Maps > Google Satellite
19. จะแสดงผลดงภาพ จากนนกด Publish Map
20. จะขนลงใหเราเลอกกดเขาไปเพอแสดงผลในรปแบบของเวบบราวเซอร จะแสดงผลแผนทดงรป
http://qgiscloud.com/56170233/online_GIS3_G1
21. หนาตางเวบบราวเซอรทเราเลอกแสดง
การแกไขโคด tree.js
1. ไปท C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170233 คลกเลอก
ไฟล tree
2. เปดในโปรแกรม Editplus
3. ทาการเปลยนคาพกดในบรรทดท 34 ใหเปน (100.925684,13.277333)
4. เปลยนการ zoom ใหเปน 15
5. ทาการลบโคดตงแตบรรทดท 37 - 45
6. ทาการลบโคดตงแตบรรทดท 48 - 68
7. ทาการแกไขในบรรทดท 49 ใหเปนชอทจะแสดง
8. ไปท geoserver ทาการ login
9. ไปท Layer Preview > คลก OpenLayers ทชนขอมล boundary
10. จากนนทาการ copy ลงทเปดมา ดงน http://localhost:8080/geoserver/G1/wms แลวมาวางในบรรทดท
50
11. copy G1:boundary1 ใสในบรรทด51
12. ทาการเปลยนชอทแสดงในบรรทดท 59 ใหเปน อาคาร ม.บรพา
13. จากนนกอปป http://localhost:8080/geoserver/G1/wms วางในบรรทด60 กอปป G1:building วางใน
บรรทดท 62 (ชอตามชนขอมล building ใน geoserver)
14. กอปปบรรทดท59-70 วางในบรรทดท71 เพอทาการเพมชนขอมล และทาการเปลยนชอชนขอมลใหเปน
ถนน และใสลง พรอมกบเปลยนชอ Layers เปน G1:road
15. กอปปบรรทดท 71 - 82
16. วางในบรรทดท 82 ใสลงพรอมกบเปลยนชอชนขอมล ใหเปน G1:water
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"
}, {
19. จะไดดงภาพ
20. คลก File > Save as
21. save ท D:\GIS_58\backup1 ตงชอวา tree.js
22. จากนนไปท D:\GIS_58\backup1 copy ไฟล tree.js
23. วางไวใน C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\GIS3\56170233
24. จากนนเขาไปท localhost > http://localhost:8080/GIS3/56170233/Mymap.html จะปรากฎแผนทดง
ภาพ
Recommended