Harita Viewport'u Nedir? Merkez, Yakınlaştırma ve Görünen Tile

Bir harita kütüphanesiyle konuşan herhangi bir kod yazdıysan, viewport'a dokunan kod yazmışsındır. Viewport, haritanın çalışma zamanı state'idir: nerede merkezi olduğu, ne kadar yakınlaştığı, hangi yönü gösterdiği ve opsiyonel olarak ne kadar eğildiği. Her kaydırma, yakınlaştırma, döndürme ve tıklama buna bağlıdır.

Bu rehber viewport'un gerçekte ne olduğunu, onu tanımlayan dört temel değeri, tile ve bounding boxlarla nasıl etkileşime girdiğini ve viewport state'ini kaydetme, geri yükleme ve paylaşma için üretim örüntülerini açıklıyor.

Dört Temel Değer

Modern bir web haritası viewport'u en fazla dört değerle tanımlanır:

• Merkez ({ lat, lng }): ekranın ortasındaki coğrafi koordinat.
• Yakınlaştırma (genellikle float bir sayı): haritanın ne kadar yakınlaştığı. Daha yüksek sayılar daha küçük alanları daha fazla detayla gösterir.
• Yön (derece cinsinden bir sayı, varsayılan 0): haritanın "kuzey yukarı" konumundan dönüşü. 90, doğunun yukarıda olduğu anlamına gelir.
• Pitch (0 ile ~85 derece arasında bir sayı): 3D eğim. 0 düz tepeden görünüm, 60 güçlü bir perspektif görünümdür.

Her modern harita kütüphanesi (MapLibre GL, Mapbox GL, OpenLayers, Leaflet, MapAtlas Dinamik Haritalar) bunları okunabilir ve yazılabilir state olarak sunar. Leaflet gibi yalnızca 2D destekleyen bir kütüphane yön veya pitch sunmayabilir.

Yakınlaştırma Seviyeleri Ayrıntılı

Dörtten en sık sorulan yakınlaştırma seviyesidir. Dünyayı bir tile piramidine dönüştüren tam sayı (veya kesirli) bir değerdir:

• Yakınlaştırma 0: tek 256x256 tilede tüm dünya
• Yakınlaştırma 1: dünya 4 tileye bölünmüş
• Yakınlaştırma 2: 16 tile
• ...
• Yakınlaştırma 14: ~268 milyon tile, mahalle ölçeği
• Yakınlaştırma 18: bina ölçeği
• Yakınlaştırma 22+: genellikle taze tile verisi yerine vektör stil ölçeklendirmesiyle render edilir

Ekvatorda kullanışlı bir kural: her yakınlaştırma artışı ekrandaki görünür genişliği yarıya indirir. Yakınlaştırma 14'te tek bir ekran genellikle birkaç şehir bloğunu gösterir. Yakınlaştırma 10'da bir metropol alan. Yakınlaştırma 6'da bir ülke. Efektif çözünürlük ekran boyutuna ve projeksiyona (Web Mercator, kutuplara gidildikçe kuzey-güneyi bozar) bağlıdır.

Çoğu üretim kodu yakınlaştırmayı float olarak saklar (örn. 14.5) çünkü akıcı yakınlaştırma animasyonları tam sayı yakınlaştırmalar arasında interpolasyon yapar. Tile getirmeleri, kütüphane kuralına bağlı olarak aşağı veya yukarı yuvarlanan tam sayı seviyesinde gerçekleşir.

Viewport ile Bounding Box

Viewport, kamera state'idir. Bounding box, mevcut durumda görünen coğrafi dikdörtgendir. Sunucuya "bu görüntü içinde ne göstereyim?" diye sorman gereken her seferinde viewport'tan bbox hesaplarsın.

Kodda:

const bbox = map.getBounds(); // returns { _sw: {lat, lng}, _ne: {lat, lng} }
const params = new URLSearchParams({
  bbox: `${bbox._sw.lng},${bbox._sw.lat},${bbox._ne.lng},${bbox._ne.lat}`,
});
const features = await fetch(`/api/places?${params}`).then(r => r.json());

Bu örüntü (viewport'tan bbox hesapla, sunucuya gönder, döndürülen özellikleri render et), her viewport tabanlı arama deneyiminin nabzıdır: emlak, listeler, mağaza bulucu, filo takibi, sürücü paylaşımı.

Viewport Tile Yüklemesini Nasıl Yönlendirir?

Viewport değiştiğinde harita kütüphanesi, mevcut yakınlaştırma seviyesinde yeni görünür alanı kapsayan tileleri belirler, eksik tileleri sunucudan (veya bellek içi önbellekten) getirir ve bunları render eder. Zaten önbellekteki tileler yeniden kullanılır; viewport dışındaki tileler kullanıcı geri kaydırırsa diye bir süre tutulur.

Akıcı kaydırma ve yakınlaştırma deneyimi sorunsuz hissettirir çünkü kütüphane bu işi asenkron yapar: elindekini çizer, ihtiyaç duyduklarını getirir ve yeni tileler geldikçe canvas'ı günceller. Vektör tile pipeline'ları geometriyi GPU üzerinde piksellere render etmek için ekstra iş yapar; bu nedenle modern web haritaları her yakınlaştırma ve döndürmede keskin kalır.

Viewport State'ini Kaydetme ve Paylaşma

Viewport'u URL'de saklamak, paylaşılabilir harita bağlantıları için standart örüntüdür. Çoğu ürün #map=14.5/52.5200/13.4050 gibi bir URL hash'i kullanır (yakınlaştırma, enlem, boylam). Sayfa yüklendiğinde hash'i ayrıştır ve viewport'u uygula. Viewport değiştiğinde birkaç yüz milisaniye debounce yap ve browser geri düğmesinin kullanışlı kalması için hash'i güncelle.

Sekmeler veya oturumlar arasında tarayıcı-dahili state için aynı şekle sahip bir localStorage anahtarı çalışır. Sunucu tarafında render edilen sayfalar için viewport genellikle SEO dostu URL'ler için sorgu parametresi olarak görünür (?zoom=14&lat=52.52&lng=13.405).

Arama ve Otomatik Tamamlama için Viewport Bias

Geocoding API'leri viewport'u (veya bbox'ını) bias parametresi olarak kabul eder. MapAtlas, sert filtre için boundary.rect.* ve yumuşak bias için focus.point.* sunar. Bias olmadan "Springfield" için otomatik tamamlama, küresel popülerliği en yüksek Springfield'ı döndürür. Viewport bias ile Massachusetts haritası içinde yazan kullanıcı önce Massachusetts sonuçlarını alır.

Bu bias'ı her tuş vuruşunda uygula. Maliyeti tek bir parametredir ve önerilerin alaka düzeyini önemli ölçüde artırır.

Başlangıç Viewport'u: Nereden Başlayacaksın?

Her harita uygulamasının yanıtlaması gereken ilk soru, nereden başlayacağıdır. Yaygın örüntüler:

• Kullanıcının locale'ine göre varsayılan: Almanya'daki kullanıcı Berlin üzerindeki bir viewport'ta, Fransa'daki kullanıcı Paris üzerinde açılır.
• Kullanıcının son viewport'una varsayılan: oturumlar arasında viewport'u sakla.
• Veriye varsayılan: haritanın arama sonuçlarını göstermesi durumunda ilk render'da bu sonuçların bbox'ını uydurun.
• Kullanıcının IP jeolokasyonuna varsayılan: düşük hassasiyet, izin gerektirmez, iyi bir geri dönüş seçeneği.
• Tarayıcı jeolokasyonunu yalnızca kullanıcı açıkça tercih ettiğinde iste: UI onayı olmadan ilk yüklemede asla.

Makul bir başlangıç viewport'u seçmek, algılanan kalite üzerinde büyük etkisi olan küçük bir ayrıntıdır.

MapAtlas Viewport State'ini Nasıl Sunar?

MapAtlas Dinamik Haritalar bileşeni, her geliştirici düzeyindeki web haritasının sunduğu getCenter, getZoom, getBearing, getPitch ve setView API'sinin aynısını sunar; buna ek olarak yalnızca AB barındırması ve Geocoding ile Search endpoint'leri arasında tutarlı viewport bias parametreleri de sağlar. Viewport'un tile ve projeksiyonlarla nasıl etkileşime girdiğine daha derin bir bakış için Vektör Tile Nedir ve Web Mercator Nedir yazılarına göz at.