Gisบี

การตดตง 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},


);

var ghyb = new OpenLayers.Layer.Google(

"Google Hybrid",

{type: google.maps.MapTypeId.HYBRID, visibility: false},


);

var gter = new OpenLayers.Layer.Google(

"Google Terrain",

{type: google.maps.MapTypeId.TERRAIN, visibility: false},


);

//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


24. กลบมาทหนาโคดอนแรก ใหทาการลบโคดตงแตบรรทดท 28 - 38

25. ไปท File > Save

26. save ท D:\GIS3_58\backup1 ตงชอ Mymap

27. ทาการ copy ไฟล Mymap ใน D:\GIS3_58\backup1


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

http://localhost:8080/geoserver/G1/wms

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

http://localhost:8080/geoserver/G1/wms

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


24. จากนนเขาไปท localhost > http://localhost:8080/GIS3/56170233/Mymap.html จะปรากฎแผนทดง

ภาพ

http://localhost:8080/GIS3/56170233/Mymap.html

Education

Gisบี