คุณเคยไหมที่ประสบปัญหา อย่างได้แบบนั้น แบบนี้แต่ OpenLayers ไม่มีให้ ไม่เป็นคุณแก้มันได้เพราะมันเป็น FOSS นั้นเอง ทำเหมือนมาขายของสะงั้น

วันนี้ก็มาเล่าถึงการเพิ่ม function หรือ Control ใหม่ ๆ ให้กับ OpenLayers ว่าต้องทำอย่างไรดีนะ

ก็ไม่ยากถ้าสังเกตดี ๆ OpenLayers ได้จัดการโครงสร้างต่าง ๆ ไว้อย่างค่อนข้างดี (อาจเพราะระบบการพัฒนา ของ สามหัวแรงหลักของคนพัฒนานั้น แบ่งแยก แต่มาประกอบกันในที่สุด)

เริ่มแรกจะเห็นว่าใน directory OpenLayers จะมี directory ย่อย ๆ ตาม Structure แล้วมีไฟล์ เหมือนชื่อ Directoryเช่น Control.js , Handle.js ส่วนใหญ่แล้วเราไม่จำเป็นต้องแก้ไขไฟล์นี้

ถ้าเราต้องการเพิ่ม function ใหม่ใน Control ก็ให้สร้าง ไฟล์ js ใน Control directory เช่น Control/NewBox.js

เมื่อทำการสร้างแล้วก็ไปเพิ่มให้ OpenLayers โหลดด้วยในไฟล์ OpenLayers.js มันก็จะถูกโหลดขึ้นมาเมื่อเริ่ม

แต่สิ่งสำคัญอย่างนึง หากเราต้องการสร้าง Control ไม่ใช่แค่ Function ผมหมายถึงเป็นปุ่มแสดงบน Map เหมือน icon ของ zoom,pan, DrawPoint เราจำเป็นต้องไปแก้ไข ไฟล์ theme ให้สร้าง CSS ที่เราจะใช้ว่าขนาดเท่าไร ใช้ icon อะไร

แต่มีบางอย่างที่แปลก ผมทำการแก้ไขไฟล์ theme/default/style.css แก้แล้วแก้อีกมันก็ไม่เปลี่ยน ถึงแม้เราจะระบุ ค่า theme ใน options ของ map contruct แล้วก็ตาม (ลองลบไฟล์มันไปมันยังโหลดมาได้เลย งง มาก)
ก็เลยลองสร้างไฟล์ใหม่เป็น theme/default/newstyle.css แล้วระบุค่าใน theme option ของ map คราวนี้ใช้การได้ ก็แปลกดี

ก็ตามนี้นะครับ ก็ต้องบอกก่อนว่านี้เป็นครั้งแรกผมลองทำอาจจะมี bug หรือข้อผลาดอย่างไร ถ้าพบจะมาบันทึกไว้อีกที

ได้เริ่มต้นกันไปแล้วในตอนที่ 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();
});