ได้เริ่มต้นกันไปแล้วในตอนที่ 1 ตามที่ได้กล่าวมาไว้ว่า เริ่มต้นกับ OpenLayers นั้นง่ายมากแต่จะเริ่ม Advance ก็ต้องใช้วิทยายุทธกันหน่อยเพราะ Document นั้นไม่ละเอียดแต่จะบอกเป็น Class กันไป
1. ทำงานกับ UTM Projection
โดยปกติจะมีค่าเป็น LonLat แต่เราสามารถทำการตั้งค่าให้ MapContruction ของเราเป็น UTM ก็ได้
// create a map with default options in an element with the id “map1″
var map = new OpenLayers.Map(“map1″);
// create a map with non-default options in an element with id “map2″
var options = {
maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
maxResolution: 156543,
units: ‘meters’,
projection: “EPSG:41001″
};
var map = new OpenLayers.Map(“map2″, options);
หรือเราจะระบุเป็น Layer ไปก็ได้
var basemap = new OpenLayers.Layer.WMS( “Boston”,
“http://boston.freemap.in/cgi-bin/mapserv?”,
{
map: ‘/www/freemap.in/boston/map/gmaps.map’,
layers: ‘border,water,roads,rapid_transit,buildings’,
format: ‘png’,
transparent: ‘off’
},
{
maxExtent: new OpenLayers.Bounds(33861, 717605, 330846, 1019656),
maxResolution: 296985/1024,
projection:”EPSG:2805″,
units: “meters”
} );
2.setCenter or zoomToExtent
การจะใช้ Zoomtopoint ก็ไม่ยาก แค่ใช้คำสั่ง
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
แต่มี ระยะ zoom นั้นมีข้อจำกัด ที่ถ้าจำไม่ผิด น่าจะ 14 หรือ 15
หากต้องการให้ละเอียดมากขึ้นอาจจะต้องใช้ คำสั่ง
map.zoomToExtent( new OpenLayers.Bounds(Yvalue-0.005,Xvalue-0.005, Yvalue+0.005, Xvalue+0.005));
3.สร้าง Markers
ต้องดำเนินการขั้นตอนคร่าว ๆ ดังนี้
var url = ‘http://boston.openguides.org/markers/AQUA.png’;
var sz = new OpenLayers.Size(15, 22);
var calculateOffset = function(size) {
return new OpenLayers.Pixel(-(size.w/2), -size.h);
};
var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);
markers = new OpenLayers.Layer.Markers(“markers”);
pointnode = new OpenLayers.LonLat(0,0);
marker = new OpenLayers.Marker(pointnode, icon);
markers.addMarker(marker);
และหากต้องการ removemarker
markers.removeMarker(marker);
4.ดู Bounding Box ปัจจุบัน
ต้องทำการ setBaseLayer สะหน่อย
ตัวอย่างง่าย ๆ
map.setBaseLayer(dem);
var box = map.getExtent();
jQ(‘span[name="ulx"]‘).html(box.left);
jQ(‘span[name="uly"]‘).html(box.top);
jQ(‘span[name="lrx"]‘).html(box.right);
jQ(‘span[name="lry"]‘).html(box.bottom);
แต่หากต้องการให้เปลี่ยนตลอด เมื่อ map มีการเปลี่ยนแปลงก็ต้องทำการ add Event ตามข้างล่างเป็นตัวอย่าง Event “moveend” กับ map
map.events.register(“moveend”, map, function() {
showbox();
});
