MapLibre SVG Simgeleri: Piksel ve Sembol Boyutunu Denetleyin

MapLibre GL JS'de SVG simge görseli kullanmak için SVG'yi tarayıcı Image nesnesiyle çözün, bu görseli addImage işlevine verin ve kimliğine sembol katmanının icon-image değerinden başvurun. Kaynak SVG'yi ayrı tutun: kaydedilen stil görseli, düzenlenebilir SVG yol nesneleri yerine işleme için piksel sağlar.

Güncel resmî SVG sembol örneği bu çözme yolunu gösterir. MapLibre'in SVG çizimi gösteremediği yönündeki genel iddia bunu gözden kaçırır. Örneğimiz 6.12.0 sürümünü sabitler ve boş, belirteçsiz haritada özgün delikli amblem sınar.

Kaynağı ve kaydedilen görseli ayrı tutun

Korunan kaynak, iç açıklığı olan tek bileşik eşkenar dörtgen yolu içerir. viewBox değeri 0 0 64 64 kalır. Açık genişlik ve yüksekliği 64 veya 128 olan iki kopya üretiriz; yol verileri özdeş kalır.

Tarayıcı çözmesi her kopyayı belirtilen boyutlarında görsele dönüştürür. MapLibre'in addImage API'si, HTMLImageElement ve ImageData gibi görsel nesnelerini kabul eder. SVG yolunu sembol geometri talimatı olarak kabul etmez.

Renk veya kontur değiştirirken bu ayrım önemlidir. SVG ana dosyasını düzenleyin, değiştirilen görseli çözün ve haritanızın görselini uygun API ile güncelleyin. Kaydedilen pikselleri incelemek özgün yol yapısını geri getirmez. Gömülü raster SVG kılavuzumuz, SVG kapsayıcısıyla düzenlenebilir geometri arasındaki daha geniş farkı açıklar.

Kaynak çizim ve sembol boyaması

Görsel yoğunluğunu ve simge boyutunu birlikte seçin

İki ayar sembolümüzün nominal görsel çerçevesini etkiler. Görselin pixelRatio değeri yoğunluğunu tanımlar; katmanın icon-size değeri oluşan simgeyi ölçekler. Güncel stil görseli meta verilerine ve sembol düzeni belirtimine bakın.

Metne sığdırma olmayan, ortalanmış ve döndürülmemiş sembolümüzün nominal çerçevesi şöyledir:

logical width = decoded width / image pixelRatio * icon-size
logical height = decoded height / image pixelRatio * icon-size

2 oranıyla kaydedilen 128×128 görsel, icon-size 1 olduğunda 1 oranındaki 64×64 görselle aynı 64×64 nominal çerçeveyi verir. İlk oranı 1 yapmak çerçevesini iki katına çıkarır. icon-size değerini 1,5'e yükseltmek, 64×64 mantıksal görsel çerçevesini 96×96 yapar.

Bu çerçeve kaynak boşluğunu içerir. Amblem içinde çok küçük görünüyorsa her sembolün boyutunu artırmadan önce SVG sınırlarını inceleyin. Aynı oranla daha büyük çözülen görsel sembolü de büyütür; yalnızca girdi boyutları yoğunluk stratejisi değildir.

Harita tuvalinin kendi piksel oranı vardır. Bu, addImage işlevine verilen orandan ayrıdır. Ölçüm testimiz, belgelenen Map seçenekleriyle tuval oranını açıkça 1 ayarlar; tarayıcının cihaz piksel oranı 2 idi. Bu, ekran görüntüsünün cihaz piksellerini CSS boyutları saymak yerine aşağıdaki karşılaştırmaları yalıtır.

Gerçek boyalı alanı karşılaştırın

Chrome'da WebGL 2 ile beş sembol durumunu işledik. Her haritada tek nokta ve aynı açık arka plan vardı; döşeme ve belirteç yoktu. İki SVG kaynağı da özdeş tek yol içeriyor, gömülü görsel içermiyordu.

Kiremit rengi çizimi ölçmek için geri okumamız gerçek WebGL piksellerini kırmızı baskın renk için taradı: kırmızı, yeşilin 1,35 ve mavinin 1,6 katından büyüktü. Algılanan sınırlama kutusu boyutlarını tuvalin arka tampon/CSS oranına böldük. Bu, görsel çerçevesinin tamamını değil, eşiklenmiş boyalı bölgeyi ölçer.

Kenar piksellerinin tamamı bu renk eşiğini geçmez; bu nedenle ölçülen boyalı sınırlar nominal çerçevelerden küçüktür. Çiftler bu testte amaçlanan boyut ilişkisini gösterir; her yoğunluk veya yakınlaştırmada özdeş piksel kalitesi kanıtlamaz.

Kaydedilen görselin merkez alfası her durumda sıfırdı. İşlenen haritada bu konum, arka plan katmanının kendisi opak olduğu için 255 alfayla (244, 242, 232) arka plan rengini gösterdi. Açıklıktan opak harita pikselleri görmek simgenin saydamlığını kaybettiği anlamına gelmez.

Bunlar kaynağımız, tarayıcı, tuval ayarları ve eşikle sınırlı gözlemlerdir. Teslim edilen çizimi, özellikle ince kontur veya küçük açıklık içeriyorsa amaçlanan görüntüleme boyutlarında sınayın.

Belirteçsiz sembol başlangıcını kopyalayın

Bu eksiksiz HTML'yi kaydedip yerel web sunucusundan sunun. Sabitlenmiş kütüphane ve CSS için internet erişimi gerekir; harita döşeme hizmeti veya API anahtarı kullanmaz. SVG metin olarak gömülüp veri URL'sine kodlanır.

Örnek image.decode() işlemini bekler, dolayısıyla kayıt başarılı çözmeden sonra gerçekleşir. Bilinen görseli stil yüklendikten sonra kaydeder; bu tek sabit amblem için resmî örneğin eksik görsel çözümleyicisine ihtiyaç duymaz.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>MapLibre decoded SVG symbol</title>
<link rel="stylesheet"
      href="https://unpkg.com/maplibre-gl@6.12.0/dist/maplibre-gl.css">
<style>#map { width: 360px; height: 280px; }</style>
<div id="map"></div>
<pre id="status">Loading…</pre>
<script type="module">
import * as ml from
  'https://unpkg.com/maplibre-gl@6.12.0/dist/maplibre-gl.mjs';
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 64 64"><path fill="#c45b39" fill-rule="evenodd" d="M32 0 L64 32 L32 64 L0 32 Z M32 16 L16 32 L32 48 L48 32 Z"/></svg>`;
const image = new Image();
image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
try {
  await image.decode();
  const ratio = 2;
  const iconSize = 1;
  const map = new ml.Map({
    container: 'map', center: [0, 0], zoom: 2, interactive: false,
    attributionControl: false, fadeDuration: 0,
    style: { version: 8, sources: {}, layers: [{
      id: 'background', type: 'background',
      paint: { 'background-color': '#f4f2e8' }
    }] }
  });
  map.on('error', e => {
    document.querySelector('#status').textContent = e.error.message;
  });
  await map.once('load');
  map.addImage('emblem', image, { pixelRatio: ratio });
  map.addSource('point', { type: 'geojson', data: {
    type: 'Feature', geometry: { type: 'Point', coordinates: [0, 0] },
    properties: {}
  } });
  map.addLayer({ id: 'emblem', type: 'symbol', source: 'point', layout: {
    'icon-image': 'emblem', 'icon-size': iconSize, 'icon-overlap': 'always'
  } });
  await map.once('idle');
  const registered = map.getImage('emblem');
  document.querySelector('#status').textContent = JSON.stringify({
    version: ml.getVersion(),
    decoded: [image.naturalWidth, image.naturalHeight],
    registered: [registered.data.width, registered.data.height],
    imagePixelRatio: registered.pixelRatio,
    logicalFrame: [image.naturalWidth / ratio * iconSize,
                   image.naturalHeight / ratio * iconSize]
  }, null, 2);
} catch (error) {
  document.querySelector('#status').textContent = String(error);
}
</script>
</html>

Durum, çözülen ve kaydedilen boyutları [128, 128], görsel oranını 2 ve mantıksal çerçeveyi [64, 64] göstermelidir. Bu durum ölçülmüş boyalı sınırlama kutusunu değil, nominal çerçeveyi bildirir. 96×96 çerçeve için iconSize değerini 1,5 yapın. Düşük yoğunluklu girdiyi karşılaştırmak için aynı yolu ve viewBox'ı koruyarak SVG genişliğini ve yüksekliğini 64, ratio değerini 1 yapın.

icon-image değerini kaydedilen kimliğe eşit tutun. Simge görünmüyorsa başarılı çözme ve kaydı doğrulayın, ardından kaynağı, katmanı, görünürlüğü ve yerleşim ayarlarını inceleyin. Tek noktalı örneğimiz, karşılaştırmayı diğer sembollerle çakışmadan bağımsız yapmak için icon-overlap: 'always' kullanır. Üretim stiliniz farklı çakışma davranışı gerektirebilir.

Teslim modeli buysa DOM işaretçisi kullanın

MapLibre, DOM Markers ile özel simgeleri de belgeler. Bu yol, stil görseli kaydetmek yerine HTML öğesini sarar. Öğe tabanlı işaretçi iş akışı uygulamaya uyuyorsa bunu seçin; ardından tarayıcı stilini ve yerleşimini ayrı inceleyin.

Mapbox Studio'nun vektör simge özelliklerinden veya MapTiler SDK örneğinden gelen iddiaları bu MapLibre stil görseli hattına taşımayın. Normal tam renkli SVG görsel de yalnızca sdf bayrağını değiştirerek işaretli uzaklık alanına dönüşmez. Yoğunluk ayarları bu görselin nasıl yorumlandığını ve gösterildiğini yönetir; piksellerini düzenlenebilir konturlara dönüştürmez.

Hedef PNG dosyası gerektiriyorsa Sharp SVG işleme kılavuzumuz, raster teslim kopyası hazırlamayı ele alır. Düzenlemeler için normal SVG ana dosyasını koruyun; satır içi SVG ve görsel tesliminin etkileşim modelleri de farklıdır.

Simgeniz yalnızca PNG veya JPG olarak mevcutsa ve düzenlenebilir çizim gerekiyorsa PerfectVector ile SVG konturlarını geri kazanın, dış şekli ve açıklığı inceleyin ve harita görselinizi çözmeden önce ana dosyayı koruyun. Harita kodu yoğunluğu, sembol boyutunu ve coğrafi konumu yönetmeye devam eder. Mevcut temiz SVG doğrudan çözme iş akışından geçebilir; vektörleştirme kılavuzu, raster dönüşümünün ne zaman yararlı olduğunu açıklar.

Sık sorulan sorular

MapLibre GL JS, SVG çizimini sembol olarak gösterebilir mi? Evet. Güncel resmî örneği SVG metnini tarayıcı Image nesnesiyle çözer ve bu görseli sembol katmanı için kaydeder. Özgün SVG'yi kaydedilen görselden ayrı tutun.

Daha büyük girdi simgemi neden büyüttü? Aynı görsel piksel oranını ve icon-size değerini koruyarak çözülen boyutları artırmak nominal çerçeveyi büyütür. Görsel yoğunluğunu ve görüntüleme ölçeklendirmesini bilinçli eşleştirin.

pixelRatio sembolde düzenlenebilir SVG yollarını korur mu? Hayır. Görsel yoğunluğunu tanımlar. Kaynak SVG'yi koruyup düzenleyin, ardından harita için değiştirilen çizimi çözün.

Simgemin deliği içindeki harita pikseli neden opak? Opak arka plan katmanı saydam simge açıklığından görünebilir. Kaydedilen görselin alfasını tamamen bileştirilmiş harita tuvalinden ayrı inceleyin.

Kaynaklar

1. MapLibre — Uzak SVG sembolünü gösterme — Güncel SVG metni, tarayıcı görseli ve addImage yolu.
2. MapLibre — Map API'si — Kabul edilen görsel nesneleri ve çalışma zamanında görsel kaydı.
3. MapLibre — StyleImageMetadata — Görsel yoğunluğu ve SDF yorumlama meta verileri.
4. MapLibre — Sembol düzeni belirtimi — Simge ölçeklendirme ve çakışma davranışı.
5. MapLibre — MapOptions — Ölçüm testini yönetmekte kullanılan tuval seçenekleri.
6. MDN — HTMLImageElement.decode — Tarayıcı görsel çözmesini bekleme ve hataları işleme.
7. MapLibre — Markers ile özel simgeler ekleme — Ayrı HTML öğesi işaretçi iş akışı.