Vektor Karolar vs. Raster Karolar: Web Uygulamaniz 2026'da Hangisini Kullanmali?

Bir web uygulamasına bir harita entegre ettiğinizde, bir mimari karar sonrasında her şekli belirler: raster karolar veya vektör karolar. Doğru yapın ve haritanız hızlı, güzel ve uyumludur. Yanlış yapın ve piksellenmiş, ağır bir arka plan görüntüsü gönderiyorsunuz ve tasarım sisteminizle her dönüşte savaşır.

Bu kılavuz, iki format arasındaki teknik farkı açıklar, bir ön uç geliştirici için gerçekten önemli olan gerçek dünyadaki ödünleşmeleri gözden geçirir ve size açık bir karar çerçevesi verir. Sonunda, projeniz için hangi biçimi seçeceğinizi tam olarak bileceksiniz ve MapAtlas'ta vektör karolarla nasıl başlayacağınızı bileceksiniz.

Karo biçimi sorusu hemen hemen her haritalama projesinin başında ortaya çıkar ve internet "vektör karolar daha yeni" şeklinde duran yüzeysel cevaplarla doludur. Bu kılavuz daha derinlere gider ve işleme boru hatları, yük boyutları, tarayıcı uyumluluğu, stil kontrolü ve raster karoların doğru çağrı olarak kaldığı belirli senaryoları kapsar.

Zaten derliyorsanız ve yalnızca koda ihtiyacınız varsa, Hızlı Başlangıç bölümüne atlayın.

Raster Karolar Nedir?

Bir raster karo, önceden oluşturulmuş bir PNG veya JPEG görüntüsü, tipik olarak belirli bir yakınlaştırma seviyesinde dünyanın sabit bir dilimini temsil eden 256×256 veya 512×512 piksel. Bir kullanıcı pan veya yakınlaştırdığında, tarayıcı sunucunun zaten oluşturmuş ve önbelleğe alınmış bitişik veya daha yüksek çözünürlüklü karoları talep eder.

Görüntüleme tamamen sunucu tarafında olur. Tarayıcıya gelen karo görüntüsü bitmiş bir resimdir, piksel zaten yerleştirilmiştir, renkler zaten pişirilmiştir. Tarayıcının işi sadece onu görüntülemektir.

Raster karo sunucuları nasıl çalışır?

Tipik olarak bir raster karo yığını şöyle görünür:

1. Ham coğrafik veriler (OpenStreetMap, kadastro verileri, yükseklik modelleri) bir veritabanında işlenir.
2. Bir işleme motoru (Mapnik klasik seçimdir) her yakınlaştırma seviyesinde karoları bir karo önbelleğine önceden işler.
3. Bir karo sunucusu (raster modunda TileServer GL veya yönetilen bir CDN) /{zoom}/{x}/{y}.png URL kuralına göre önbelleğe alınan görüntüleri sunar.

Sonuç basit, hızlı ve durumsuz. Herhangi bir HTTP istemcisi bir karo talep edebilir, bir tarayıcı, bir mobil uygulama, bir harita görüntüsü oluşturan sunucu tarafı işlem veya bir GIS masaüstü uygulaması.

Raster karo güçleri

• Sıfır istemci tarafı işleme yükü. Tarayıcı sadece bir görüntü gösterir. WebGL gerekmez, gölge derlemesi gerekmez, yazı tipi işleme gerekmez.
• Evrensel uyumluluk. İnternet Explorer ve başsız işleme ortamları dahil olmak üzere herhangi bir tarayıcıda, herhangi bir sürümde çalışır.
• Tahmin edilebilir görünüm. Harita, karo sunucusunun oluşturmuş olduğu gibi tamamen görünür. İstemci tarafı değişkenliği yoktur.
• Kolay sunucu tarafı görüntü oluşturma. E-posta, PDF raporları veya sosyal paylaşım kartları için statik harita görüntüleri oluşturmak için mükemmel.

Raster karo zayıflıkları

• Büyük dosya boyutları. Tipik bir 256×256 PNG karo içerik yoğunluğuna bağlı olarak 30-200 KB'dir. Retina (512×512) karo piksel sayısının dört katıdır.
• Yüksek DPI ekranlarda pikselleşme. 1x ekran için oluşturulan bir karo, @2x karoları sunmadıkça 2x Retina ekranda bulanık görünür ve bant genişliğinizi ikiye katlar.
• Döndürme veya eğim yok. Bir raster haritayı döndürürseniz, metin etiketleri onunla döner ve okunmaz hale gelir. Raster haritaların her zaman kuzeye doğru olmasının nedeni budur.
• İstemci tarafı stil değişiklikleri yok. Yol rengini değiştirmek, POI simgelerini gizlemek veya koyu moda geçmek ister misiniz? Sunucu tarafında önceden işlenmiş yeni bir karo seti gerekir.
• Yakınlaştırma enterpolasyonu. Tamsayı yakınlaştırma seviyeleri arasında tarayıcı mevcut görüntüyü ölçeklendirir, bu da onu bulanıklaştırır. Vektör karolarla aldığınız "düzgün yakınlaştırma" hissi raster'de mevcut değildir.

Vektör Karolar Nedir?

Bir vektör karo, bir harita bölgesi için ham coğrafik veriler, yol geometrileri, yapı çokgenleri, su gövdeleri, arazi kullanım alanları, etiket yerleştirme verileri içerir ve kompakt ikili biçimde kodlanır (genellikle Mapbox Vector Tile biçimi, .mvt). Karo piksel içermez. Bu bölgede ne var olduğunu, nasıl görünmesi gerektiğini değil.

İşleme tamamen istemci tarafında, WebGL kullanılarak olur. Bir Mapbox GL JS uyumlu harita (MapAtlas gibi) yüklediğinizde, SDK vektör karoları talep eder, geometri verilerini alır ve saniye başına 60 kare hızında gerçek zamanlı olarak her yolu, yapıyı ve etiketi bir <canvas> öğesine çizmek için stil belirtimini kullanır.

Vektör karo işleme nasıl çalışır?

Vektör karo (.mvt) + Stil JSON → WebGL gölgeleme → Tuval pikselleri

Stil JSON (kontrol ettiğiniz yapılandırılmış dosya) işleyiciye şunu söyler: yolları bu renkle çiz, yapı çıkıntılarını bu yükseklikte çiz, etiketler için bu yazı tipini kullan, yakınlaştırma 12'nin altında bu katman türlerini gizle. Stil çalışma zamanında değiştirilmesi yapılabilir, yeni karoları getirmeden.

Vektör karo güçleri

• Küçük yükler. İkili kodlanmış geometri, işlenmiş bir görüntüden çok daha kompakttır. Yoğun bir kentsel alan için tipik bir vektör karo, eşdeğer raster karosu için 80-200 KB'ye karşılık 15-50 KB'dir.
• Herhangi bir çözünürlükte keskin. Vektör geometrisi matematiksel olarak ölçeklendirilir. Retina ekran standart ekran ile aynı karoyu alır, işleyici sadece daha fazla piksel çıkarır. @2x karo varyantları gerekmez.
• Düzgün yakınlaştırma ve döndürme. İşleyici ham geometri üzerinde çalıştığından, yakınlaştırma sürekli olarak enterpolasyon yapılabilir (sadece tamsayı seviyelerde değil) ve harita etiketlerle her zaman dik olacak şekilde eğimlendirilir ve döndürülebilir.
• Tam istemci tarafı stil kontrolü. Stil nesnesi güncelleyerek herhangi bir görsel özelliği, yol rengini, etiket yazı tipini, katman görünürlüğünü, opaklığını değiştirin. Yeni karo talepleri yoktur. Koyu mod, yeni bir karo seti değil, bir stil JSON değişimidir.
• 3D yapı çıkıntısı. Vektör karolar yapı yükseklik meta verilerini içerir. İşleyiciler WebGL kullanarak çokgenleri 3D'de çıkartabilir. Raster karoların yükseklik konsepti yoktur.
• Veri tarafından yönlendirilen stil. Yolları hız sınırına göre reneklendir, arazi kullanımını kategoriye göre göl, işaretleyicileri nüfusa göre ölçeklendir, tümü sunucuya dokunmadan karodaki veri özelliklerine göre yönlendirilir.

Vektör karo zayıflıkları

• WebGL gerekli. WebGL desteği olmak, vektör karo işleme olmadığı anlamına gelir. Bu çok eski tarayıcıları (IE11) ve belirli başsız ortamları hariç tutar.
• İstemci tarafı CPU/GPU yükü. İşleme kullanıcının cihazında olur. Düşük uçlu Android telefonları veya yoğun yüklenmiş masaüstleri üzerinde, çok katmanlı karmaşık harita stilleri kare düşüşlere neden olabilir.
• Daha karmaşık ilk kurulum. Bir işleme kütüphanesi (Mapbox GL JS, MapLibre GL veya MapAtlas SDK) ve bir stil JSON'a ihtiyacınız var, sadece bir <img> etiketi değil.
• Yazı tipi ve glyph yükleme. Etiket işleme, glyph dosyalarının ayrı olarak sunulmasını gerektirir. Bu ilk yüklemede birkaç ekstra ağ isteği ekler.

Performans Karşılaştırması: Gerçek Sayılar

Ödünleşmeleri somut hale getirmek için, yakınlaştırma seviyesi 14'te merkez Amsterdam'da bir harita karosu için gerçek dünyadaki ölçümler:

Ölçekte, vektör karolar harita ile ilgili bant genişliğini yüzde 60-80 azaltır. Ayda 10 milyon karo isteği oluşturan orta düzeyde bir uygulama için, bu fark CDN çıkış maliyetlerini anlamlı bir şekilde azaltır.

Raster Karoları Ne Zaman Kullanılır?

Raster karolar eski değildir. Doğru seçim olarak kaldıkları açık senaryolar vardır:

Eski sistem entegrasyonu. Bir haritayı .NET WebForms uygulamasına, sunucu tarafından oluşturulan bir Rails görünümüne veya yalnızca HTML ve temel JavaScript kontrol ettiğiniz bir ortama gömüyorsanız, Leaflet veya OpenLayers aracılığıyla bir raster karo katmanı, bir WebGL oluşturucusu tanıtmaktan daha basit ve daha güvenilirdir.

Sunucu tarafı harita görüntüsü oluşturma. E-posta şablonları, PDF dışa aktarımları veya açık grafik görüntüleri için bir Node.js sunucusunda harita anlık görüntülerini işlemeniz gerekiyorsa, başsız raster işleme yolunuz. Node-canvas gibi araçlar ve WebGL'nin olmadığı bir raster karo kaynağı çalışır.

Uydu ve hava fotoğrafı. Hava fotoğrafı doğası gereği raster verisidir. Vektör haritasında bile, uydu görüntü katmanı her zaman raster karolar olarak sunulur. Melez haritalar her iki biçimi karıştırır, yollar ve etiketler için vektör, fotoğrafik taban için raster.

Çok basit kullanım örnekleri. İletişim sayfasında statik bir konum haritası gömüyor musunuz? Basit bir Leaflet + OpenStreetMap raster kurulumu 20 dakika sürer ve sıfır JavaScript karmaşıklığı vardır. İnteraktif olmayan bir konum pimi için vektör karolara yükseltme haklı değildir.

Vektör Karoları Ne Zaman Kullanılır?

Önemsediğiniz herhangi bir modern web uygulaması için vektör karoları seçin:

• Özel marka stilleri. Tasarım sisteminizin belirli renkleri varsa, haritanızın da olması gerekir. Vektör karolar bunu bir JSON değişimi yapar.
• Koyu mod desteği. Koyu stil JSON bir yapılandırma dosyasıdır. Açık ve koyu arasında geçiş bir map.setStyle() çağrısıdır.
• Yüksek DPI / Retina keskinliği. Özellikle mobil-ilk uygulamalar ve keskin işlemenin bir tasarım önceliği olduğu herhangi bir UI için önemli.
• Düzgün kullanıcı deneyimi. Vektör haritasının sürekli yakınlaştırma enterpolasyonu ve 60fps işlemesi kullanıcılar tarafından hemen fark edilir. Raster haritalar etkileşimli bağlamlarda karşılaştırma yaparak hantal hissettiriyor.
• Veri görselleştirme katmanları. Vektör haritasına bir ısı haritası, koroplet veya küme katmanı eklemek yalnızca istemci tarafı yapılandırması gerektirir. Bir raster haritada, yeni bir katmanı fayansa çıkartabilirsiniz veya bir tuval bindirme hackunu kullanırsınız.
• 3D veya eğim perspektifleri. Yalnızca vektör karolar ve WebGL ile mümkündür.

Hızlı Başlangıç: MapAtlas ile Vektör Karolar

MapAtlas, Mapbox GL JS uyumlu API aracılığıyla vektör karoları sunar. Daha önce Mapbox GL JS kullandıysanız, geçiş bir stil URL değişimi ve bir API anahtarı değişimidir. Yeni başlıyorsanız, işte tam kurulum.

SDK'yı Yükleyin

npm install @mapmetrics/mapmetrics-gl

Veya sade HTML projeleri için CDN aracılığıyla:

<link rel="stylesheet" href="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css" />
<script src="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.js"></script>

Vektör harita oluşturun

import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

const map = new mapmetricsgl.Map({
  container: 'map',         // <div> kimliği
  style: 'https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY',
  center: [4.9041, 52.3676], // [boylam, enlem], Amsterdam
  zoom: 12,
  pitch: 0,     // 0 = yukarıdan aşağı, 60 = 3D eğik
  bearing: 0,   // 0 = kuzeye, herhangi bir değer = döndürülmüş
});

style URL'i, tüm katmanları, yazı tiplerini ve kaynakları tanımlayan MapAtlas sunucuları üzerinde barındırılan bir JSON dosyasını işaret eder. Haritanın her görsel yönünü kontrol etmek için özel stil JSON'ınızı kendiniz barındırabilirsiniz, bkz. Harita Görselleştirme ve Stil kılavuzu.

Çalışma zamanında koyu moda geçin

document.getElementById('toggle-dark').addEventListener('click', () => {
  const isDark = map.getStyle().name?.includes('dark');
  map.setStyle(
    isDark
      ? 'https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY'
      : 'https://tiles.mapatlas.eu/styles/dark/style.json?key=YOUR_API_KEY'
  );
});

Zaten önbelleğe alınan veriler için yeni karo istekleri tetiklenmez. Yalnızca stil değişir, karolar aynı ikili geometri kalır, yeni renklerle yeniden işlenir.

GeoJSON veri katmanı ekleyin

Vektör karoların en güçlü özelliklerinden biri, kendi verilerinizi şekilli bir katman olarak bindirmektir:

map.on('load', () => {
  // Add your own data source
  map.addSource('delivery-zones', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [[[4.85, 52.34], [4.95, 52.34], [4.95, 52.40], [4.85, 52.40], [4.85, 52.34]]],
          },
          properties: { zone: 'Zone A', capacity: 150 },
        },
      ],
    },
  });

  // Style it as a colored fill layer
  map.addLayer({
    id: 'delivery-zones-fill',
    type: 'fill',
    source: 'delivery-zones',
    paint: {
      'fill-color': '#97C70A',
      'fill-opacity': 0.2,
    },
  });

  map.addLayer({
    id: 'delivery-zones-outline',
    type: 'line',
    source: 'delivery-zones',
    paint: {
      'line-color': '#97C70A',
      'line-width': 2,
    },
  });
});

Bu desen, bir kaynak ekleyin, bir katman ekleyin, stil ifadeleriyle boyayın, ısı haritaları, rota çizgileri, izokron çokgenleri ve koroplet haritalar için aynıdır. İşleyici ham geometri verir, bitmiş piksel değil olduğu için çalışır.

Raster'dan Vektör'e Geçiş

Mevcut bir Leaflet + raster karo kurulumunuz varsa ve yükseltmek istiyorsanız, minimum geçiş yolu:

1. **Leaflet yerine ** MapAtlas SDK (veya tamamen açık kaynaklı bir işleyiciyi tercih ederseniz MapLibre GL JS) **.
2. **Karo URL'sini ** bir MapAtlas stil JSON URL'si ile **.
3. **Bindirmeleri taşıyın ** Leaflet katmanlarından GL JS kaynaklarına ve katmanlarına.
4. WebGL olmayan ortamları test edin. WebGL kullanılamayacak olan az sayıda kullanıcı için bir alternatif veya zarafetle bozulma mesajı ekleyin.

İşlevsel sonuç, daha keskin görünen, daha hızlı yüklenen ve sunucuya dokunmadan yeniden şekillendirilebilen bir haritadır.

Vektör karo tabanının üstüne işaretleyici, açılır pencere, adres araması ve React entegrasyonu ekleme konusunda tam bir izlenecek için, bkz. Web Sitenize Etkileşimli Haritalar Nasıl Eklenir.

Stillemeyi daha da ileri götürmek için, koyu mod, marka renkleri, özel yazı tipleri, filigran kaldırma, bkz. Özel Markalı Harita Nasıl Şekillenmesi.

Ve MapAtlas'ı maliyet ve özellik açısından Google Maps'e göre değerlendiriyorsanız, MapAtlas vs. Google Maps: Geliştiriciler Neden Geçiyorlar temel farklılıkları kapsar.

Özet: Karar Çerçevesi

2026'da etkileşimli bir şey inşa ediyorsanız, vektör karolar varsayılan seçimdir. Raster karolar, belirli uyumluluk veya işleme kısıtlamaları için kasıtlı istisnalardır.

Vektör karolarla inşa etmeye hazır mısınız? Ücretsiz bir MapAtlas API anahtarı için kaydolun, kredi kartı gerekmez. Anahtarınız ilk günden itibaren karolar, coğrafya kodlama, yönlendirme ve izokron API'leri arasında çalışır.