Open Layer

http://www.ninsawat.com/?p=39

Open Layer บทที่ 1

หลังจากดูคนอื่นใช้กันมานาน ก็หาโอกาสจะทำ app สักตัวที่ใช้ OpenLayers มานาน มาถึงวันนี้ก็เริ่มกันสะที ดูรวม ๆ 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 ยังขาดแคลน ทำให้ยังไม่สามารถใช้ประโยชน์ได้เต็มที่

OpenLayers ตอนที่ 2

Posted by admin on November 22, 2007 in openlayers
ได้ เริ่มต้นกันไปแล้วในตอนที่ 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();
});

4 Comments on OpenLayers ตอนที่ 2

By mr.sucherdchai on July 9, 2009 at 11:31 am
ถ้าต้องการกำหนด maxExtent: new OpenLayers.Bounds สำหรับเมืองไทยกำหนดอย่างไรคับ
หรือค่าควรเป็นเท่าไร

By mr.sucherdchai on July 9, 2009 at 11:32 am
// maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxExtent: new OpenLayers.Bounds(0,0,1792,1024),
//MinX = 47
//MinY = 28
//MaxX = 53
//MaxY = 31
numZoomLevels: 18,
maxResolution: 156543.0399,
units: ‘m’,
projection: new OpenLayers.Projection(”EPSG:900913″),
displayProjection: new OpenLayers.Projection(”EPSG:4326″)
});

By mr.sucherdchai on July 9, 2009 at 11:33 am
และตรง การรับค่า lat/long ควรเป็นเท่าไร ?
lon = lon * 1024 / 180;
lat = Math.log (Math.tan ((90 + lat) * Math.PI / 360)) / (Math.PI / 180);
lat = lat * 20037508.34 / 180;
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

By admin on August 10, 2009 at 9:40 am
ขอโทษด้วยนะครับ ผมไม่เห็น comment พอดีมีพวก spam มาเป็นร้อย ๆ เลย
จากที่อ่านคร่าวน่าจะใช้ projection เพื่อใช้กับข้อมูล Google Map หรือเปล่าครับ
ถ้าอย่างนั้นน่าจะลองดูตัวอย่าง Openlayers ใน sundials-spherical-mercator.html ที่ใช้ function transform จาก จาก display projection to map projection ดูนะครับ