ยังมีการเพิ่ม control ใหม่ ๆ และก็การเพิ่มการ support Layers ใหม่ ๆ เช่น OSM และ ArcXML

รายละเอียดการเปลี่ยนและ bugfix ก็ตาม link

ในการส่วนการรองรับ WMS 1.3.0 อย่างสมบูรณ์ก็ต้องรอต่อไป อาจจะไปถึง Version 3.0 หรือหลังจากงาน FOSS4G2009

• ระบบ North-South , East-West
• แล้วก็ จาก SRS มาเป็น CRS

ระบบใหม่นั้นจะให้ การอ้างอิง Axis เป็นไปตามค่าที่ระบุใน GetCapabilities  ดังนั้นจะใช้อย่างไรก็ต้องทำการศึกษาให้ดี รายละเอียดเพิ่มเติมก็ลองดูจาก http://mapserver.org/ogc/wms_server.html#wms-1-3-0-support

ตัวอย่าง website ภาพถ่ายทางอากาศของญี่ปุ่นที่ support WMS 1.3.0 เท่านั้น

http://orthophoto.mlit.go.jp:8888/wms/service/wmsRasterTileMap?VERSION=1.3.0&REQUEST=GetCapabilities&Service=WMS

แล้วเราจะใช้ WMS 1.3.0 กับ OpenLayers ได้ไหม คำตอบก็คือได้ แต่ไม่สมบูรณ์ เพราะได้รับการยืนยันจาก Chris Schmidt ว่าไม่รับรองการรองรับกับ WMS 1.3.0

แต่ต้องทำการตั้งค่า option ของ layers สะนิดหน่อยให้ใช้  Version 1.3.0 และ CRS

layer = new OpenLayers.Layer.WMS(“MLIT photo”, “http://orthophoto.mlit.go.jp:8888/wms/service/wmsRasterTileMap”,

{layers:”ORTHO”,

CRS:”EPSG:4612″,

VERSION:”1.3.0″

} );

แต่ก็ไม่คิดว่าน่าจะใช่วิธีที่ถูกต้อง เพราะใน URL ที่ส่งไปก็ยังมี SRS อยู่ด้วยต้องทำการหาวิธีที่ถูกต้องต่อไป

เท่าที่ใช้ดูเวลา zoom เข้าไปบางทีก็มีปัญหา แล้วก็ cache บางทีก็ต่อกลับหัวกลับข้าง คาดว่าคงเป็นปัญหาด้าน lon/lat และ lat/lon

ก็อาจจะต้องทำการแก้ไขสร้าง Layer Class ขึ้นมาใหม่ให้สำหรับ wms 1.3.0 โดยการจำลองจาก Layer WMS เดิมแล้วก็ทำการสลับค่า coordinate สะ

วันนี้ก็มาเล่าถึงการเพิ่ม 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. ทำงานกับ 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();
});

ดูรวม ๆ OpenLayers เป็น API tool ที่ใช้งานง่าย สำหรับงานง่าย ๆ เช่นเปิดมาหน้าแรก add layer ตามตัวอย่างที่มีเยอะแยะใน web

ขั้นต้นก็ add Openlayers.js
<script src=”OpenLayers.js”></script>

เริ่มต้นหากจะ add layer ก็ทำตามตัวอย่างไป คงไม่อธิบายว่าทำอย่างไรแต่เกร็ดน่าสนใจคงเป็นการ add Base/Overlay

ดูเหมือนว่าจะ detect เอาเอง โดยหากต้องการระบุให้ WMS เป็น overlay ก็ต้องเพิ่มในส่วน

transparent: “true”, format: “image/png”

var wms = new OpenLayers.Layer.WMS("NASA Global Mosaic",   <---name
                                 "http://wms.jpl.nasa.gov/wms.cgi", <---url
                                 {layers: "modis,global_mosaic"}, <---params
  {'projection':none});  <---options

ตัวอย่างจริง

layersensor = new OpenLayers.Layer.WMS(   'sensor',"http://mizu.info.gscc.osaka-cu.ac.jp/waterwqiop/owsraster.php", 
             {layers: 'sensor','gszMapName':'/home/msapp/water/wcs.map','wpsoutputs':'/var/www/html/wpsoutputs/',
             'resultpath':sosreference,'coln':coln.substring(4),'modelname':'sensor',transparent: "true", format: "image/png"});


ประกอบด้วย 4 ส่วนหลัก name,url,params และ options โดยที่สองตัวหลังจะต้องอยู่ในเครื่อง {} เพราะมีได้มากกว่าหนึ่ง

เกร็ดเล็กน้อยอีกอันก็คือ

คำสั่งเป็นการเพิ่ม หลาย Layers ในครั้งเดียว

map.addLayers([layer, lakewms]);

และ เพิ่มแค่ 1 layer

map.addLayer(layer);

จากที่พยายามทำ app ขึ้นมา ก็ใช้งานได้ดี มีความสามารถหลากหลาย มากมายแต่ คงต้องบอกว่า ตัวอย่าง (มีแต่แบบง่าย ๆ แสดงไว้) หรือ document ยังขาดแคลน ทำให้ยังไม่สามารถใช้ประโยชน์ได้เต็มที่

Powered by ScribeFire.