OpenLayers Nedir? Web GIS Harita Kütüphanesi Rehberi

OpenLayers Nedir?

OpenLayers, web tarayıcılarında interaktif harita uygulamaları oluşturmak için kullanılan açık kaynaklı bir JavaScript kütüphanesidir. 2005 yılında MetaCarta tarafından başlatılan proje, bugün OpenJS Foundation bünyesinde sürdürülmektedir. Leaflet'e kıyasla daha kapsamlı özelliklere ve daha dik bir öğrenme eğrisine sahiptir.

OpenLayers'ın Güçlü Yönleri

Kapsamlı OGC Desteği: WMS, WMTS, WFS, WCS, WPS protokollerini yerel olarak destekler.
Güçlü Projeksiyon Desteği: Proj4js entegrasyonu ile 4000'den fazla koordinat sistemi.
Vektör Katman Performansı: WebGL tabanlı render ile büyük vektör veri setlerini akıcı görüntüler.
Kapsamlı Çizim Araçları: Nokta, çizgi, poligon çizimi ve düzenleme.
TypeScript Desteği: Tam TypeScript tanım dosyaları.
Modüler Mimari: ES6 modülleri sayesinde sadece ihtiyaç duyulan parçalar dahil edilebilir.

Temel Kavramlar

Map ve View

OpenLayers'ın temel nesneleri ol/Map ve ol/View'dur. View, haritanın merkezi, zoom seviyesi ve projeksiyon bilgisini tutar:

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { fromLonLat } from 'ol/proj';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({ source: new OSM() })
  ],
  view: new View({
    center: fromLonLat([32.86, 39.93]),
    zoom: 6
  })
});

Katman Tipleri

TileLayer: Döşeme tabanlı raster katmanlar (OSM, XYZ, WMTS, TMS).
ImageLayer: Tek görüntü olarak gelen katmanlar (WMS).
VectorLayer: GeoJSON, KML, GML vektör verileri.
VectorTileLayer: Vektör döşemeler (Mapbox Vector Tiles).
Heatmap: Isı haritası görselleştirmesi.

WMS Katmanı Ekleme

import ImageLayer from 'ol/layer/Image';
import ImageWMS from 'ol/source/ImageWMS';

const wmsLayer = new ImageLayer({
  source: new ImageWMS({
    url: 'https://agsdi.csb.gov.tr/geoserver/wms',
    params: { 'LAYERS': 'cbs:iller' },
    ratio: 1,
  })
});
map.addLayer(wmsLayer);

Vektör Stil Tanımlama

import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Circle from 'ol/style/Circle';

const pointStyle = new Style({
  image: new Circle({
    radius: 6,
    fill: new Fill({ color: '#336699' }),
    stroke: new Stroke({ color: '#fff', width: 2 })
  })
});

OpenLayers vs Leaflet: Hangi Durumda Hangisi?

Özellik	OpenLayers	Leaflet
Dosya boyutu	~400KB	~42KB
OGC Servisleri	Kapsamlı yerli destek	Eklenti gerektirir
Projeksiyon	Güçlü, Proj4js entegre	Sınırlı
Öğrenme eğrisi	Dik	Kolay
Kurumsal GIS	Tercihli seçim	Hızlı prototip

React ile OpenLayers

ol-react veya doğrudan useEffect hook'u ile OpenLayers, React uygulamalarına kolaylıkla entegre edilebilir. Next.js gibi SSR frameworklerde dynamic import ile istemci taraflı yükleme yapılması önerilir.

Türkiye'deki Kullanımlar

Çevre ve Şehircilik Bakanlığı'nın ÇBS portali, Tapu ve Kadastro Genel Müdürlüğü'nün TKGM WebTAKU sistemi ve pek çok belediyenin e-imar portalında OpenLayers aktif olarak kullanılmaktadır.

OpenLayers: Güçlü Web GIS Kütüphanesi