OPENLAYERS'A GİRİŞ
OpenLayers Nedir?
OpenLayers hiçbir sunucu tarafı bağımlılığı bulunmayan, en modern web tarayıcılarında harita verilerini görüntülemek için fonksiyonel harita uygulamaları geliştirmemizi sağlayan sade açık kaynak bir JavaScript kütüphanesidir. OpenLayers, Google Maps ve MSN Virtual Earth API'lerine benzer özellikte ancak bazı önemli değişikliklerle beraber zengin Web tabanlı coğrafi uygulamalar geliştirilmesini sağlar.
OpenLayers 'ın bu kadar geniş bir yelpazesinin bulunma sebebi işlevselliği yönünden çok zengin ve güncellenebilir, sürekli olarak gelişen açık kaynak kodlu bir kütüphaneye sahip olmasıdır. Bu nedenle cbs yazılımı geliştirenlere esnek bir yapı sunar.
OpenLayers API' si ile haritalar oluşturulurken yeni başlayanlar için iki önemli kavram üzerinde durmak gereklidir. Birincisi "Harita" ve ikincisi ise "Katman" kavramlarıdır.
Openlayers harita üzerinden projeksiyon, obje ve extent bilgilerini depolar. Harita üzerinde veriler katman aracılığıyla görüntülenir. Bir katman aynı zamanda veri kaynağıdır. Openlayers gelen veri taleplerini nasıl görüntülemesi konusunda çözüm geliştirir ve bu verileri katmanlar arayıcılığıyla görüntüler.
OpenLayers' a Giriş
Bu bölüme kadar Opanlayers hakkında genel bilgiler verdik. Şimdi bu yapıyı bir örnekle destekleyelim. Openlayers harita katmanlarını görüntülemek için html elemanlarına ihtiyaç duymaktadır. Bunun anlamı Openlayers her harita katmanını bir html elemanının içine yerleştirir. Aynı zamanda sayfamıza Openlayers kütüphanesini içeren bir script tag'ı eklememiz gereklidir. Biz örneğimizde OpenLayers sitesinde mevcut kütüphaneyi http://openlayers.org/api/OpenLayers.js kullanacağız.
<html>
<head>
<title>OpenLayers Örnek</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
</body>
</html>
Burada görüleceği gibi harita nesnesi eklenmedi. Sayfamıza harita nesnesi eklemek için script koduna harita nesnesinin hangi blok üzerinde bulunacağını yani html elemanının kimliğini belirtmemiz gereklidir.
var map = new OpenLayers.Map('map');
Şimdi ki adımda oluşturduğumuz harita nesnesine bir katman ekleyelim. Bu örnekte wms katmanı ekleyeceğiz. Burada ilk parametremiz ekleyeceğimiz wms katmanının adı, ikincisi wms sunucusunun url bilgisi, üçüncü ise wms isteklerini katmana ekleyecek nesne bilgisidir.
var wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{'layers':'basic'} );
map.addLayer(wms);
Biz haritamızı extent' ini pencere içine mümkün olduğunca kapsayacak şekilde yakınlaştırmak için zoomToMaxExtent() fonksiyonunu kullanacağız.
Aşağıda oluşturacağımız sayfanın bütün html ve javascript bilgileri mevcuttur.
<html>
<head>
<title>OpenLayers Örnek</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript"> var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} ); map.addLayer(wms); map.zoomToMaxExtent(); </script>
</body>
</html>
Openlayers WMS Harita Katmanı
Buraya kadar olan kısımda haritamıza wms katmanı eklemeyi gördük. Openlayers birçok veri kaynağını desteklemektedir. Bu nedenle oluşturduğumuz haritaya farklı katmanlar ekleyebiliriz. Burada haritamıza vektör katmanı eklemeyi deneyelim. Daha önce bir wms nesnesi oluşturup addLayer fonksiyonunu kullanarak haritamıza katman eklemiştik. Şimdi aynı işi vektör nesnesi oluşturarak yapacağız. Ben bu örnekte haritaya marker eklemeyi göstereceğim.
var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(28.96, 41.03),
{some:'data'},
{externalGraphic: 'marker.png', graphicHeight: 21, graphicWidth: 16});
vectorLayer.addFeatures(feature);
map.addLayer(vectorLayer);
Görüldüğü gibi Geometry.Point sınıfına ait özelliklere enlem-boylam cinsinden x,y koordinat bilgileri aktarılmıştır. Bu da harita üzerinde marker'ımızın konumlanacağı yeri işaret eder. Harita üzerinde değişiklikleri görüntülemek için yukarıdaki javascript kodunu daha önce oluşturduğumuz sayfamıza eklememiz gerekecek.
<html>
<head>
<title>OpenLayers Örnek</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript"> var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} ); map.addLayer(wms); var vectorLayer = new OpenLayers.Layer.Vector("Overlay"); var feature = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(28.96, 41.03), {some:'data'}, {externalGraphic: 'marker.png', graphicHeight: 60, graphicWidth: 52}); vectorLayer.addFeatures(feature); map.addLayer(vectorLayer); map.zoomToMaxExtent(); </script>
</body>
</html>
OpenLayers Vektör Katmanı (Haritada Marker İşaretleme)
OpenLayers web uygulamalarında geometrik veriler için kullanışlı fonksiyonlara ve özelliklere sahiptir. Veri kaynağı konusunda size farklı alternatifler sunarak harita uygulamalarınızı görsel ve işlev bakımından zengin hale getirerek yazılım geliştirenler için çok tercih edilen bir platformdur.
