4. Tomcat
7. เปิด Web Browser ขึ้นมาจากนั้นเข้า Google พิมพ์ “tomcat 7” เลือก link บนสุด
8. เลื่อนลงมาด้านล่าง เลือก 32-bit/64-bit Windows Service Installer (pgp, md5, she1)
37. 70. ไปที่ส่วน About & Status > คลิกที่ Server Status > จะปรากฏข้อมูลขึ้นบอกถึงข้อมูลรายละเอียด
ต่างๆ
71.คลิกที่ GeoServer Logs > จะปรากฏข้อมูลขึ้นซึ่งบอกถึงข้อความต่างๆที่เกิดขึ้นหรือทาอะไรไปบ้างใน
Geoserver
54. 104.เลือกพิกัด WGS 84 / UTM zone 47N > OK (ทาซ้า 2 ครั้งเพราะเราเลือก 2 ข้อมูล)
105. จะปรากฏข้อมูลที่เราเลือก
55. 106.ไปที่ Style > เปลี่ยนจาก Single Symbol เป็น Categorized > colum เลือก name > Classify >
Apply
107.ไปที่ Style > Save Style > SLD File ตั้งชื่อว่า building > Save > OK
56. 108.ไปที่ Geoserver > ไปที่ Styles > คลิก Add new Style
109.คลิกเลือกไฟล์ > เลือก building.sld > Open
63. 122.ไปคลิกคาสั่ง New Shapefile Layer
123.จะปรากฏหน้าต่าง New Vector Layer > เลือก Point > File encoding เลือกเป็น TIS-620 >
Selected CRS เลือกเป็น EPGS:36247,WGS 84 / UTM zone 47N > ช่อง Name ตั้งชื่อว่า Name >
กด Add attrbute to list > OK
64. 124. .เลือกที่ save > Disk D > ไปที่ floder ชื่อ GIS3_58 > ไปที่ floder ชื่อ BUU_LAYER > ตั้ง
ชื่อว่า point_1 > save
125.ไปที่เครื่องมือ Toggle Edting
71. 138.ไปที่เครื่องมือ Execute the last used plugin (รูปจิ๊กซอว์) > PostGIS Shapefile and DBF
loader 2.1
139.จะปรากฏหน้าต่าง PostGIS Shapefile Import/Export Manager > Import > Add File
72. 140. .ไปที่ Local Disk D > โฟลเดอร์ GIS3_58 > BUU_LAYER > เลือกไฟล์ชื่อ point_1 > open
141.กด Options เพื่อจะเปลี่ยนลักษณะตัวอักษรเพราะในข้อมูลของเรามีภาษาไทยอยู่เปลี่ยนจากUTF-8
เป็น TIS-620 > OK
74. 143. กลับไปที่ Geoserver > Styles > Add a new style > เลือกไฟล์ > point1.sld > OK > Upload
และทาการแก้ Code ตั้งแต่บรรทัดที่ 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
ทาการ Save Code เก็บไว้ใน D:GIS3_58Backup1 ตั้งชื่อว่า map1, Save as type : JavaScript
จากนั้น กด Save จากนั้น Copy ไฟล์ G1 และ map1 จาก D:GIS3_58Backup1 ไปใส่ไว้ใน C:Program
FilesApache Software FoundationTomcat 7.0webappsGIS356170177_1 ก็จะได้แผนที่แสดงจุด
atm
75. การทา Google Map API
144.Copy โค๊ดไปใส่ใน EditPlus
<HTML>
<HEAD>
<TITLE> Google Map API </TITLE>
<!-- Google Map API-->
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- External lib: OpenLayers -->
<link rel="stylesheet" type="text/css"
href="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/theme/default/style.css"/>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.js"></script>
<!-- Proj4js-->
<script src="proj4js/lib/proj4js-combined.js"></script>
<script type="text/javascript" src="proj4js/lib/defs/EPSG32647.js"></script>
<!-- Link Javascript file-->
<script src="googlemap.js"></script>
</HEAD>
<BODY onload="init()">
76. <div id="map"></div>
</BODY>
จากนั้นแก้ Code บรรทัดที่ 14 จาก <script src="googlemap.js"></script> เป็น <script
145. ทาการ Save Code เก็บไว้ใน D:GIS3_58Backup1 ตั้งชื่อว่า G1, Save as type : HTML จากนั้น
กด Save > Yes
77. 146.Copy Code var map ในกลุ่ม GIS3 ใส่ไว้ใน EditPlus
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 );
78. //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("ขอบเขตม.บูรพา",
"http://localhost:8080/geoserver/WORK/wms",
{
layers: "WORK:boundary",
transparent: true
},{opacity: 0.2},
{visibility:false}
);
var build = new OpenLayers.Layer.WMS("อาคารม.บูรพา",
79. "http://localhost:8080/geoserver/WORK/wms",
{
layers: "WORK:building",
transparent: true
},{opacity: 1},
{visibility:false}
);
var road = new OpenLayers.Layer.WMS("ถนน",
"http://localhost:8080/geoserver/WORK/wms",
{
layers: "WORK:road",
transparent: true
},{opacity: 1},
{visibility:false}
);
var water = new OpenLayers.Layer.WMS("แหล่งน้า",
"http://localhost:8080/geoserver/WORK/wms",
{
layers: "WORK:water",
transparent: true
},{opacity: 1},
{visibility:false}
);
map.addLayers([gstr,gsat,ghyb, gter,bound,build,road,water]);
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"),
80. map.getProjectionObject()
), 15);
}
จากนั้นแก้ Code บรรทัดที่ 38, 40, 46, 48, 54, 56, 62, 70 และ 72 จาก WORK เป็น G1
148.ทาการ Save Code เก็บไว้ใน D:GIS3_58Backup1 ตั้งชื่อว่า map1, Save as type : JavaScript
จากนั้นกด Save
90. 167. ทาการ Save Code เก็บไว้ใน D:GIS3_58Backup1 ตั้งชื่อว่า loader, Save as type : JavaScript
จากนั้นกด Save
168. กลับดูที่ Tad tree.js Copy Code ทั้งหมดมาใส่ไว้ใน EditPlus และ Save Code เก็บไว้ใน
D:GIS3_58Backup1 ตั้งชื่อว่า tree, Save as type : JavaScript จากนั้นกด Save
