KmlLayer Taşıma Yolları

Giriş

Bu kılavuzun amacı, KmlLayer'ın en yaygın kullanım alanlarını ele almak ve alternatif uygulamalara yönelik karşılık gelen taşıma yollarını sağlamaktır. Bu bilgi, planlanan desteği sonlandırılma nedeniyle KmlLayer kullanımından geçiş yapması gereken geliştiriciler için hazırlanmıştır. KmlLayer'ı destekleyen son sürüm 3.65'tir ve Mayıs 2027'de kullanımdan kaldırılacaktır.

Taşıma yolunuz, KmlLayer'ı nasıl kullandığınıza bağlıdır:

Sınır/kenarlık/ilgi alanı bilgilerini stilize etmek için KML dosyası

KmlLayer kullanarak idari sınırları görüntüleyen veya şekillendiren (ör. belirli bir ülkeyi, eyaleti ya da yerleşim yerini vurgulama) geliştiriciler için Google Maps Platform, sınırlar için veriye dayalı stil oluşturma (DDS) özelliğine geçiş yapmayı önerir.

Taşıma Önerisi: Sınırlar İçin Veri Odaklı Stil

Sınırlar için veriye dayalı stil, Google'ın idari sınır poligonlarına doğrudan erişim sağlayarak harici KML dosyalarını barındırmanıza veya yönetmenize gerek kalmadan bu bölgelere özel stiller (dolgu ve kontur) uygulamanıza olanak tanır.

Kullanılabilir FeatureType

İdari bölgeler, işlevlerine göre kategorize edilir ve düzeylere göre düzenlenir. Stil oluşturma için aşağıdaki özellik türleri desteklenir:

  • COUNTRY: Ulusal siyasi varlık.
  • ADMINISTRATIVE_AREA_LEVEL_1: Ülke düzeyinin altındaki birinci dereceden idari bölge (ör. ABD'deki eyaletler).
  • ADMINISTRATIVE_AREA_LEVEL_2: Ülke düzeyinin altındaki ikinci dereceden idari bölge (ör. ABD'deki ilçeler).
  • LOCALITY: Birleşmiş şehir veya kasaba.
  • POSTAL_CODE: Posta için kullanılan posta kodları.
  • SCHOOL_DISTRICT: Birleştirilmiş, ilkokul veya ortaokul bölgeleri.

Bu özellik türlerinin kullanılabildiği bölgeler için sınır kapsamına bakın.

Bir alanı vurgulama

Belirli bir bölgeyi stilize etmek için yer kimliğine göre hedeflemeniz gerekir.

  • Kurulum: JavaScript Vektör harita türü için yapılandırılmış bir harita kimliği kullanmanız ve Google Cloud Console'da bulunan özellik katmanını etkinleştirmeniz gerekir.
  • Uygulama: Style a boundary polygon (Sınır poligonuna stil uygulama) örnek kodunu kullanın.

Kaydırmayı bir alanla kısıtlama

Kullanıcıların, vurguladığınız alanın sınırlayıcı kutusunun dışına çıkmasını önlemek için MapOptions içindeki restriction seçeneğini kullanabilirsiniz.

restriction nesnesi, haritanın görüntülenebilir alanını sınırlayan bir latLngBounds tanımlar. Kısıtlamanın işleyiş şekli hakkında daha fazla bilgi için belgeleri inceleyin.

// Restrict panning to a specific bounding box
restriction: {
  latLngBounds: {
    north: 47.8,
    south: 45.8,
    east: 10.5,
    west: 5.9,
  },
  strictBounds: true,
},

Özet Taşıma Uygulaması

Haritayı belirli bir alanın etrafında odaklamak için sınırlarda veriye dayalı stil oluşturma ve bölge kısıtlamasının nasıl kullanılacağına dair eksiksiz bir örnek aşağıda verilmiştir.

const myTargetRegion = "ChIJYW1Zb-9kjEcRFXvLDxG1Vlw"; // Place ID for Switzerland

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 46.8, lng: 8.2 },
    zoom: 9,
    mapId: "YOUR_MAP_ID", // Required for DDS
    // Restrict panning to a specific bounding box
    restriction: {
    // Bounding box for Switzerland
      latLngBounds: {
        north: 47.8,
        south: 45.8,
        east: 10.5,
        west: 5.9,
      },
      strictBounds: true,
    },
  });

  // Access the Country layer and style a specific region by Place ID
  const countryLayer = map.getFeatureLayer("COUNTRY");
  countryLayer.style = (options) => {
    if (options.feature.placeId === myTargetRegion) {
      return {
        fillColor: "#FF0000",
        fillOpacity: 0.5,
        strokeColor: "#FF0000",
        strokeWeight: 2,
      };
    } else {
    // Style everything else whited out, to make the area of interest pop out more.
      return {
        fillColor: '#ffffff',
        fillOpacity: 0.8,
      };
    }
  };
}

Vektör verileri içeren KML dosyası (noktalar/çoklu çizgiler/sınırlar/poligonlar)

Taşıma Önerisi: Veri Kümeleri İçin Veri Odaklı Stil

Google, herkese açık coğrafi verileri gösterirken stil ve performans üzerinde daha fazla kontrol sahibi olmak için aşağıdaki yolu önerir.

Veri kümeleri için veriye dayalı stil oluşturma özelliği, kendi coğrafi verilerinizi (KML, GeoJSON veya CSV) yüklemenize, veri özelliklerine göre özel stil oluşturma uygulamanıza ve vektör haritalarda özellikleri görüntülemenize olanak tanır.

1. Kurulum ve Yükleme

Çalışma zamanında bir URL'yi getiren KmlLayer'nin aksine, DDS'nin verileri Google Cloud Console'da veri kümesi olarak barındırmanız gerekir.

  • Harita kimliği oluşturun: Vektör harita türü için yapılandırılmış bir harita kimliği kullanın.
  • Veri kümesini yükleme: Benzersiz bir veri kümesi kimliği oluşturmak için KML dosyanızı Google Cloud Console'a yükleyin. Daha fazla bilgi için Haritalar veri kümelerini yönetme ile ilgili tüm dokümanları okuyun.
  • Veri kümesini görüntüleme: Veri kümesi kimliği oluşturduktan sonra veri kümesini bir Haritalar stili ve harita kimliğiyle ilişkilendirmeniz gerekir. Ardından, verileri haritada göstermek için Veri Kümesi Kimliği'ni kullanırsınız. Tüm ayrıntılar için Haritaya veri kümesi ekleme ile ilgili tam dokümanı okuyun.
  • Verilerinizi KML biçiminde içe aktarmaya karar verirseniz veri kümeleri için KML şartlarına dikkat edin.

2. Görüntü alanını verilere göre ayarlama

KmlLayer varsayılan olarak otomatik kaydırma ve yakınlaştırma yaparak veri konumuna gider. Veri kümeleri için DDS'de bu davranış otomatik değildir ve manuel olarak uygulanmalıdır.

  • Sabit Kodlanmış Kısıtlamalar: Veri alanı statikse görünüm alanını belirli sınırlara kilitlemek için MapOptions içinde restriction seçeneğini kullanın.
  • Dinamik Yakınlaştırma: Görüntü alanını dinamik olarak ayarlamak için veri kümenizin sınırlayıcı kutusuyla birlikte map.fitBounds() kullanabilirsiniz.

3. Özellik özelliklerinden stil oluşturma

KML dosyaları genellikle DDS'nin otomatik olarak uygulamadığı stil bilgileri (ör. renkler) içerir. Renkleri ve opaklığı uygulamak için veri kümesi özelliklerinden özellikleri okuyan bir istemci tarafı stil işlevi oluşturmanız gerekir. Ayrıntılı bilgi için verilerinize stil verme ile ilgili geliştirici belgelerine bakın.

Örnek: Özellikleri kullanarak işlevleri biçimlendirme

Aşağıdaki örnekte, background_color ve opacity özelliklerini doğrudan yüklenen veri kümesinden okuyan bir stil işlevinin nasıl oluşturulacağı gösterilmektedir:

/**
 * Migration example: Styling features from dataset attributes.
 */
function styleDDSLayer(map, datasetId) {
  const datasetLayer = map.getDatasetFeatureLayer(datasetId);

  // Set the style function
  datasetLayer.style = (params) => {
    // Access attributes defined in your KML/Dataset
    const featureAttributes = params.feature.datasetAttributes;

    // Read style values from attributes, with fallback defaults
    const fillColor = featureAttributes['background_color'] || '#4285F4';
    const fillOpacity = parseFloat(featureAttributes['opacity']) || 0.5;
    const strokeColor = featureAttributes['border_color'] || '#34A853';

    return {
      fillColor: fillColor,
      fillOpacity: fillOpacity,
      strokeColor: strokeColor,
      strokeWeight: 2,
    };
  };
}

Etkileşimleri uygulama ve stil oluşturma hakkında daha fazla bilgi için Veri kümeleri için veriye dayalı stil oluşturmaya genel bakış ve dinamik veriler için Veri Kümeleri API'si başlıklı makaleleri inceleyin.

Taşıma Önerisi: GeoJSON ile İstemci Taraflı Oluşturma

KmlLayer'den GeoJSON ile istemci taraflı oluşturmaya geçen geliştiriciler için Google Haritalar Platformu, veri biçiminizi dönüştürmeyi ve özellikleri doğrudan tarayıcıda oluşturup stil uygulamak için veri katmanını kullanmayı içeren bir taşıma yolu önerir.

Veri katmanını kullanarak istemci tarafında oluşturma, coğrafi verileri görüntülemek için son derece esnek bir yöntem sunar. Google'ın sunucularında oluşturulan KmlLayer'ın aksine, Veri katmanı özelliklerle standart JavaScript nesneleri olarak etkileşim kurmanıza olanak tanır. Ancak büyük veri kümeleri için verilerinizin sunucu tarafında işlenmesini ve oluşturulmasını (ör. veri kümeleri için veriye dayalı stil oluşturma) tercih edebileceğinizi unutmayın.

1. KML'yi GeoJSON'a dönüştürme

İlk adım, KML dosyalarınızı GeoJSON'a dönüştürmektir. Bu işlem, birkaç popüler açık kaynak aracı kullanılarak yapılabilir:

  • ogr2ogr: GDAL paketinin bir parçası olan bu güçlü komut satırı yardımcı programı, birçok vektör biçimi arasında dönüştürme yapabilir.
ogr2ogr -f GeoJSON output.json input.kml
  • togeojson: KML ve GPX'i GeoJSON'a dönüştürmek için özel olarak tasarlanmış, iyi test edilmiş küçük bir araç.
togeojson input.kml > output.json

2. Görüntü alanını verilere göre ayarlama

KmlLayer, veri konumuna otomatik olarak kaydırıp yakınlaştırırken Veri katmanı bunu yapmaz. Görüntü alanını GeoJSON verilerinize uyacak şekilde ayarlamak için sınırlayıcı kutuyu manuel olarak hesaplamanız ve map.fitBounds() işlevini çağırmanız gerekir.

3. Özellik özelliklerinden stil oluşturma

Veri katmanında, görünümünü belirlemek için özellikleri doğrudan her GeoJSON özelliğinden okuyan bir style işlevi tanımlayabilirsiniz.

Örnek: Stil işlevi ve görüntü alanı ayarlaması

Aşağıdaki örnekte, GeoJSON verilerinin nasıl yükleneceği, görüntü alanını ayarlamak için sınırlarının nasıl hesaplanacağı ve özelliklerin, özelliklerine göre nasıl stillendirileceği gösterilmektedir:

/**
 * Migration example: Loading GeoJSON, fitting viewport, and styling from attributes.
 */
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });

  // Load the GeoJSON data
  map.data.loadGeoJson('path/to/your/data.json', null, (features) => {
    // Adjust viewport to show all loaded features
    const bounds = new google.maps.LatLngBounds();
    features.forEach((feature) => {
      feature.getGeometry().forEachLatLng((latlng) => {
        bounds.extend(latlng);
      });
    });
    map.fitBounds(bounds);
  });

  // Set the style function to read from GeoJSON properties
  map.data.setStyle((feature) => {
    // Access attributes defined in your GeoJSON properties
    const fillColor = feature.getProperty('background_color') || '#4285F4';
    const opacity = parseFloat(feature.getProperty('opacity')) || 0.5;
    const strokeColor = feature.getProperty('border_color') || '#34A853';

    return {
      fillColor: fillColor,
      fillOpacity: opacity,
      strokeColor: strokeColor,
      strokeWeight: 2,
      visible: true
    };
  });
}

Veri katmanını kullanma hakkında daha fazla bilgi için GeoJSON'u Haritalar'a aktarma dokümanlarını inceleyin.

Taşıma yolu: 3. taraf kitaplıklarıyla istemci tarafında oluşturma

KmlLayer için başka alternatifler arayan geliştiriciler, Google Haritalar Platformu JavaScript API'sinde KML verilerini işleyen, topluluk tarafından desteklenen çeşitli kitaplıklar bulabilir.

1. deck.gl

deck.gl, yüksek performanslı bir WebGL destekli görselleştirme çerçevesidir. GoogleMapsOverlay ve GeoJsonLayer aracılığıyla KML oluşturma için neredeyse doğrudan değiştirme olarak kullanılabilir.

  • Tuval Şartı: deck.gl'ı etkili bir şekilde kullanmak için haritanızı vektör harita türünü kullanacak şekilde dönüştürmeniz (WebGL oluşturma özellikleriyle bir tuval öğesi olarak oluşturulur) gerekir.
  • KML Desteği: Geometri ayrıştırma, KML'yi GeoJSON'a dönüştüren @loaders.gl/kml tarafından yapılır. Karmaşık stiller, simgeler ve NetworkLink'ler gibi bazı KML özelliklerinin ek manuel uygulama gerektirebileceğini unutmayın.
  • Dokümanlar: deck.gl Dokümanları | loaders.gl KML Yükleyici.
  • Örnekler:
    • Google Haritalar GitHub deposundaki deckgl-kml-updated örneği, gerçek zamanlı olarak güncellenen KML verilerini oluşturmak için deck.gl'nin nasıl kullanılacağını gösterir.
    • deckgl-kml örneğinde, KML verilerini oluşturmak için deck.gl'nin nasıl kullanılacağı gösterilmektedir.

2. geoxml3

geoxml3, Google Haritalar JavaScript API v3 için özel olarak tasarlanmış bir KML işleyicidir. KML'yi tarayıcıda yerel olarak ayrıştırır ve verileri İşaretçiler, Çoklu Çizgiler ve Çokgenler gibi standart Google Haritalar API nesneleri olarak oluşturur.

  • Standart Harita Desteği: geoxml3, WebGL tabanlı çözümlerin aksine, belirli bir oluşturma modu gerektirmeden standart Google Haritalar JS API v3 haritalarında çalışır.
  • Uyarılar:
    • Sınırlı KMZ Desteği: Kitaplık, KMZ dosyalarını tam olarak desteklemez. KMZ arşivlerinin açılması genellikle ZipFile.complete.js gibi ek üçüncü taraf komut dosyalarıyla entegrasyon gerektirir.
    • Desteklenmeyen Öğeler: 3D geometriler, karmaşık etiketler ve belirli yeni KML öğeleri gibi özellikler desteklenmez.
  • Belgeler: geoxml3 GitHub deposu.

Etkileşimli öğeler içeren KML dosyası

Taşıma Önerisi: Veri Kümeleri İçin Veri Odaklı Stil

KmlLayer'dan veri kümeleri için veriye dayalı stil oluşturmaya (DDS) geçen geliştiriciler için bu kılavuzda, otomatik KML etkileşimlerinden fare tıklamaları ve üzerine gelme gibi özel, yüksek performanslı etkileşimlere nasıl geçileceği açıklanmaktadır.

İlk Kurulum

Etkileşimleri uygulamadan önce KML Taşıma: Vektör Verileri kılavuzundaki kurulum adımlarını uyguladığınızdan emin olun:

  • Harita kimliği: Vektör harita türü için bir harita kimliği yapılandırın.
  • Yükleme: Veri kümesi kimliği almak için KML verilerinizi Google Cloud Console'a yükleyin.
  • Katman Erişimi: Etkileşimli katmana erişmek için map.getDatasetFeatureLayer(datasetId) simgesini kullanın.

1. Etkileşim Etkinliklerini İşleme

KmlLayer içinde, özellik tıklamaları API tarafından otomatik olarak işlenerek bir bilgi penceresi açılır. Veri kümeleri için DDS'de, veri kümesi katmanındaki fare etkinlikleri için işleyicileri manuel olarak kaydetmeniz gerekir.

  • click: Kullanıcı bir özelliği tıkladığında tetiklenir.
  • mousemove: İmleç bir özelliğin üzerine geldiğinde tetiklenir. Üzerine gelme efektleri için kullanışlıdır.

2. Dinamik Stil (Fareyle Üzerine Gelme Efekti)

DDS stilleri katmana genel olarak uygulandığından, hangi özellikle etkileşimde bulunulduğunu izlemek ve stili yeniden uygulamak için bir durum değişkeni kullanmanız gerekir.

let currentFeatureId = null;

function initInteraction(map, datasetId) {
  const datasetLayer = map.getDatasetFeatureLayer(datasetId);

  // Apply the style function
  datasetLayer.style = (params) => {
    const isHovered = params.feature.datasetAttributes['id'] === currentFeatureId;
    return {
      strokeColor: 'green',
      strokeWeight: isHovered ? 4.0 : 2.0, // Bold border on hover
      fillColor: 'green',
      fillOpacity: isHovered ? 0.5 : 0.3,
    };
  };

  // Add interaction listeners
  datasetLayer.addListener('mousemove', (event) => {
    if (event.features.length > 0) {
      currentFeatureId = event.features[0].datasetAttributes['id'];
      datasetLayer.style = datasetLayer.style; // Re-apply style to reflect changes
    }
  });

  // Clear hover state when the mouse leaves the features
  map.addListener('mousemove', () => {
    if (currentFeatureId !== null) {
      currentFeatureId = null;
      datasetLayer.style = datasetLayer.style;
    }
  });
}

3. description özelliğinden HTML görüntüleme

KML'de <description> etiketi genellikle varsayılan bilgi penceresi için HTML içerir. Bu veriler veri kümesi olarak içe aktarıldığında description bir özellik özelliği haline gelir. Dizeyi oluşturmak için doğrudan standart bir google.maps.InfoWindow'ya iletin.

const infoWindow = new google.maps.InfoWindow();

datasetLayer.addListener('click', (event) => {
  if (event.features.length > 0) {
    const feature = event.features[0];
    // Access the HTML description attribute
    const htmlContent = feature.datasetAttributes['description'];

    infoWindow.setContent(htmlContent);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  }
});

4. ExtendedData ile özel bilgi penceresi

KML'niz özel ad/değer çiftlerini depolamak için <ExtendedData> kullanıyorsa bunlar datasetAttributes ile eşlenir. Özel bir HTML görüntüsü oluşturmak için bu özellikler arasında yineleme yapabilirsiniz.

function createCustomContent(feature) {
  const attributes = feature.datasetAttributes;
  const container = document.createElement("div");
  container.style.padding = "10px";
  container.innerHTML = "<h3>Feature Details</h3><dl></dl>";

  const dl = container.querySelector("dl");

  // Iterate through all data attributes imported from KML ExtendedData
  for (const key in attributes) {
    const dt = document.createElement("dt");
    dt.style.fontWeight = "bold";
    dt.textContent = key;

    const dd = document.createElement("dd");
    dd.textContent = attributes[key];

    dl.appendChild(dt);
    dl.appendChild(dd);
  }
  return container;
}

datasetLayer.addListener('click', (event) => {
  if (event.features.length > 0) {
    const content = createCustomContent(event.features[0]);
    infoWindow.setContent(content);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  }
});

Daha gelişmiş görselleştirme teknikleri için veri özelliklerini stilize etme hakkındaki geliştirici belgelerine bakın.

Taşıma Önerisi: GeoJSON ile İstemci Taraflı Oluşturma

KmlLayer'dan GeoJSON ile istemci tarafında oluşturmaya ve veri katmanına geçen geliştiriciler için bu kılavuz, otomatik KML etkileşimlerinden özel, etkinliğe dayalı etkileşimlere ve dinamik stil oluşturmaya nasıl geçileceğini açıklar.

İlk Kurulum

Etkileşimleri uygulamadan önce KML verilerinizi GeoJSON'a dönüştürmeniz ve veri katmanına yüklemeniz gerekir. ogr2ogr veya togeojson gibi araçları kullanma ve haritayı map.data.loadGeoJson() ile başlatma hakkında ayrıntılı bilgi için Taşıma Önerisi: GeoJSON ile İstemci Tarafında Oluşturma kılavuzuna bakın.

1. Otomatik ve Manuel Etkileşimler

Bu katmanlar arasındaki temel fark, kullanıcı girişini işleme biçimleridir:

  • KmlLayer: Özellik tıklamalarını otomatik olarak işler ve KML InfoWindow içeren bir ve verilerini gösterir.
  • Veri katmanı: InfoWindow Nesneleri otomatik olarak göstermez. Kullanıcı etkileşimlerini yakalamak için etkinlik işleyicileri manuel olarak eklemeniz ve verileri görüntülemek için kod yazmanız gerekir.

2. Etkileşim Etkinliklerini İşleme

GeoJSON özelliklerini etkileşimli hale getirmek için addListener() nesnesinde map.data yöntemini kullanın. Sık karşılaşılan etkinlikler şunlardır:

  • click: Bilgi pencerelerini veya seçim mantığını tetiklemek için kullanılır.
  • mouseover / mouseout: Fareyle üzerine gelme efektleri ve vurgulama için kullanılır.

3. Bilgi penceresinde HTML açıklamalarını görüntüleme

KML, GeoJSON'a dönüştürüldüğünde <description> etiketi (genellikle HTML içerir) genellikle description adlı bir özellikle eşlenir. Bu dizeyi almak ve standart bir google.maps.InfoWindow içinde oluşturmak için feature.getProperty('description') kullanabilirsiniz.

const infoWindow = new google.maps.InfoWindow();

// Handle clicks to show the HTML description
map.data.addListener('click', (event) => {
  // Access the 'description' property from the GeoJSON feature
  const htmlContent = event.feature.getProperty('description');

  if (htmlContent) {
    infoWindow.setContent(htmlContent);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  }
});

4. Özel bilgi pencereleri ve ExtendedData

Orijinal KML'niz <ExtendedData> kullanıyorsa bu ad-değer çiftleri GeoJSON özelliklerine dönüştürülür. Veri katmanında bunlar için varsayılan bir kullanıcı arayüzü olmadığından, bunları yinelemek ve görüntülemek için özel bir InfoWindow uygulamanız gerekir.

event.feature.getProperty('attribute_name') kullanarak bu özelliklere erişebilir ve infoWindow.setContent() yöntemine iletilecek özel bir HTML dizesi veya DOM öğesi oluşturabilirsiniz.

5. Dinamik Stil (Fareyle Üzerine Gelme Efektleri)

Veri katmanı, etkinliklere yanıt olarak özellik stillerini programatik bir şekilde güncellemenize olanak tanır. Bir özelliğin görünümünü geçici olarak değiştirmek için overrideStyle() (ör. fareyle üzerine gelindiğinde) ve genel stile dönmek için revertStyle() simgesini kullanın.

// Set a base style for all features
map.data.setStyle({
  fillColor: 'blue',
  strokeWeight: 1
});

// Highlight feature on mouseover
map.data.addListener('mouseover', (event) => {
  map.data.revertStyle(); // Clear previous highlights
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

// Revert style on mouseout
map.data.addListener('mouseout', (event) => {
  map.data.revertStyle();
});

Daha ayrıntılı uygulama bilgileri için Veri Katmanı: Etkinlik İşleme ve Veri Katmanı: Dinamik Stil ile ilgili dokümanlara bakın.

Taşıma yolu: 3. taraf kitaplıklarıyla istemci tarafında oluşturma

KmlLayer'dan üçüncü taraf çözümlerine geçen geliştiriciler için bu kılavuzda, deck.gl ve geoxml3 kullanılarak fare tıklamaları ve dinamik etkinlikler gibi etkileşimli verilerin işlenmesi ele alınmaktadır.

İlk Kurulum

Etkileşimleri uygulamadan önce Taşıma Yolu: Üçüncü taraf kitaplıklarıyla istemci tarafında oluşturma kılavuzundaki kurulum adımlarını uyguladığınızdan emin olun. Bunlardan bazıları:

  • deck.gl: Haritanızı Vektör harita türünü kullanacak şekilde dönüştürme (canvas gereklidir).
  • geoxml3: Kitaplık komut dosyalarını kendi ana makinenizden yayınlama ve Merkezler Arası Kaynak Paylaşımı'nı (CORS) yönetme.

1. deck.gl ile Etkileşimli Veriler

deck.gl, doğrudan giriş biçimi olarak KML'yi destekler ve KML dosyasında sağlanan verilere göre tıklamalar gibi özellik etkileşimlerini otomatik olarak işler.

  • KMLLoader İşleme: @loaders.gl/kml modülü kullanılarak geometri ve özellikler, deck.gl tarafından etkileşim etkinliklerini yerel olarak tetiklemek için kullanılan bir biçimde ayrıştırılır.
  • Özellik Tıklamaları: Bir özellik tıklandığında deck.gl, etkinliği yakalayabilir ve ilişkili meta verileri (ör. <name> veya <description>) gösterebilir.
  • Örnek: deckgl-kml-updated örneğinde, deprem işaretçilerinin üzerine gelindiğinde ayrıntılı etkinlik bilgilerinin gösterildiği gerçek zamanlı KML oluşturma işlemi gösterilmektedir.

2. geoxml3 ile Etkileşimli Veriler

geoxml3, KML'yi tarayıcıda yerel olarak ayrıştırır, stil bilgilerini ayıklar ve etkileşimini koruyan standart Google Haritalar API nesneleri oluşturur.

  • Yerel Stil Çıkarma: Kitaplık, oluşturulan işaretçilere, çoklu çizgilere ve çokgenlere uygulamak için KML'den <Style> ve <StyleMap> öğelerini alır.
  • Tıklama işleyicileri: geoxml3, varsayılan olarak bu nesneler için tıklama işleyicileri sağlar. Ayrıca, kendi seçim mantığınızı veya kenar çubuğu güncellemelerinizi uygulamak için ayrıştırıcı oluşturma sırasında özel geri çağırma işlevleri (createMarker, createOverlay) de tanımlayabilirsiniz.
  • Örnek: Bu örnekte, KML'yi oluşturmak için geoxml3'ün nasıl kullanılacağı gösterilmektedir. İşaretçilere tıklayarak deprem bilgilerini görüntüleme gibi etkileşimli daire işaretçileri gibi özelleştirmeler yapılabilir.
  • Kullanım Şekli:
var myParser = new geoXML3.parser({
  map: map,
  processStyles: true, // Automatically handle KML styles
  afterParse: function(doc) {
    // Code to run after the KML is fully parsed
  }
});
myParser.parse('interactive_data.kml');

Görüntü içeren KML dosyası

KmlLayer'ı kullanarak uydu kaynaklı veriler, hava durumu modelleri veya geçmiş planlar gibi görüntüleri gösteren geliştiriciler için bu kılavuzda, GroundOverlays'e veya üçüncü taraf ayrıştırıcılara yönelik taşıma yolları açıklanmaktadır.

Taşıma Önerisi: Maps JavaScript API GroundOverlay

Görüntüleri taşımak için önerilen yol, google.maps.GroundOverlay sınıfını kullanmaktır. Bu sayede, doğrudan kodunuzda belirli coğrafi koordinatlarda haritaya resim yerleştirebilirsiniz.

1. Uygulama

Sınırları tanımlamak için KML dosyasına güvenmek yerine, resim URL'sini ve haritadaki dikdörtgeni temsil eden bir LatLngBounds nesnesi belirtirsiniz.

  • Belgeler: Yer Katmanları Kılavuzu.
  • Görüntü hazırlama: Görüntünüz coğrafi referanslı ancak doğru projeksiyonda (EPSG:4326) değilse Maps JS API ile kullanmak üzere görüntüyü çarpıtmak için açık kaynaklı gdalwarp aracını kullanabilirsiniz.
gdalwarp -t_srs EPSG:4326 image.jp2 image.jpg

Taşıma yolu: 3. taraf kitaplıklarını kullanma

İş akışınız verilerinizi KML biçiminde tutmanızı gerektiriyorsa görüntü yer paylaşımlarını oluşturmak için geoxml3 veya deck.gl gibi üçüncü taraf kitaplıkları kullanılabilir.

Sorumluluk reddi beyanı: Bu üçüncü taraf çözümleri Google tarafından desteklenmez. Ancak bu işlevler test edilmiştir ve çoğu kullanım alanında çalışması beklenir.

1. geoxml3

geoxml3, basit GroundOverlay öğelerini tarayıcıda yerel olarak ayrıştırmak ve Google Haritalar API nesnelerine dönüştürmek için iyi bir seçenektir.

Kullanım örneği:

const geoXmlParser = new geoXML3.parser({
    map: map,
    afterParse: function(doc) {
        console.log("Parsing complete. Number of documents: " + doc.length);
        const bounds = doc[0].gbounds;
        if (bounds && !bounds.isEmpty()) {
           map.fitBounds(bounds);
        }
    },
    createOverlay: function(groundOverlayData) {
        // Extract bounds and URL from parsed KML data
        const imageUrl = groundOverlayData.icon.href;
        const imageBounds = {
            north: parseFloat(groundOverlayData.latLonBox.north),
            south: parseFloat(groundOverlayData.latLonBox.south),
            east: parseFloat(groundOverlayData.latLonBox.east),
            west: parseFloat(groundOverlayData.latLonBox.west)
        };

        // Create the Google Maps GroundOverlay
        const nativeOverlay = new google.maps.GroundOverlay(imageUrl, imageBounds);
        nativeOverlay.setMap(map);
    }
});
geoXmlParser.parse('your_file.kml');

2. deck.gl

deck.gl'nın standart GeoJsonLayer'ı vektör verilerini işlerken BitmapLayer kullanılarak manuel uygulama aracılığıyla GroundOverlays'ı da destekleyebilir.

Bu yaklaşımda, dosyayı ayrıştırmak için KMLLoader'dan yararlanılır ve ardından KML verilerinden çıkarılan görüntü URL'si ve koordinatlarla BitmapLayer açıkça tanımlanır.

Gelişmiş Kullanım Alanı: gdal2tiles kullanarak piramit oluşturma

Görüntü döşemesi piramitleri içeren karmaşık KML dosyalarının taşınması daha zordur ve görüntü verilerinin ayıklanmasını gerektirir.

  • Araç: gdal2tiles, KMZ piramidinden veri çıkarabilir ve döşemeleri görüntülemek için standart Maps JavaScript API kodu oluşturabilir. Son sonucun, mevcut bir haritaya dahil edilmesi için manuel olarak değiştirilmesi gerekebilir.
gdal2tiles -z 10- -n -u https://yourhost.com/tiles/ -w google input.kmz

Ağ bağlantıları içeren KML dosyalarının işlenmesi için KmlLayer öğesinin otomatik ve bulut tarafında getirilmesinden daha açık veri yönetimi stratejilerine geçilmesi gerekir.

Desteklenen çözüm: Veri kümeleri için veri odaklı stil (DDS)

Google Haritalar Platformu veri kümeleri <NetworkLink> öğelerini doğal olarak ayrıştırmadığından veri yapınıza göre bir taşıma stratejisi seçmeniz gerekir:

  • 1. Strateji: Ayrı Veri Kümeleri (Kullanıcı Kontrollü Katmanlar İçin En İyisi) Daha önce ağ bağlantısı olan her KML dosyasını Google Cloud Console'da kendi veri kümesi olarak yükleyin. Ardından, map.getDatasetFeatureLayer(datasetId) işlevini çağırarak ve görünürlüğünü ya da stilini ayarlayarak bu katmanları gerektiğinde dinamik olarak yüklemek ve görüntülemek için JavaScript'i kullanabilirsiniz.
  • 2. Strateji: Düzleştirilmiş KML Dosyası (Yüksek Performanslı Görüntüleme İçin En İyisi) Çeşitli ağ bağlantılı dosyalarınızdaki tüm özellikleri tek bir kapsamlı KML dosyasında birleştirip veri kümesi olarak yükleyin. Ardından, belirli veri alt kümelerini anında filtrelemek ve görüntülemek için özelliklere dayalı dinamik stil kullanabilirsiniz.

Dinamik Verileri Güncelleme: Ağ bağlantılarının "otomatik yenileme" davranışını taklit etmek için kaynak veriler her değiştiğinde veri kümenizin yeni bir sürümünü programatik olarak yüklemek üzere Datasets API'yi kullanın.

Açık Kaynak Çözümleri: deck.gl ve geoxml3

deck.gl ve geoxml3, KML <NetworkLink> öğelerinin ayrıştırılması ve otomatik olarak getirilmesi için güçlü destek sağlamaz.

deck.gl

deck.gl, KMLLoader'i (togeojson üzerinde oluşturulmuştur) kullanır ve bu, NetworkLink'leri açıkça desteklemez.

  • Neden iyi bir çözüm değil? Ayrıştırıcı, güvenilirliği ve basitliği sağlamak için kendi ağ isteklerini yapmaktan kaçınan, eşzamanlı ve "zahmetsiz" bir dönüştürücü olarak tasarlanmıştır. Uygulamanız birden fazla URL'yi işaret eden KML dosyalarına dayanıyorsa deck.gl bunları otomatik olarak çözmez.

geoxml3

geoxml3, Maps JS API için KML'yi ayrıştırmak üzere geliştirilmiş olsa da ağ bağlantıları için deneyseldir ve desteklenmemektedir.

  • Neden iyi bir çözüm değil? İşlev yalnızca eski ve iyi test edilmemiş belirli bir "network_link" dalında mevcuttur. Bu aracın karmaşık bağlantı yapılarını veya CORS gibi modern güvenlik gereksinimlerini işleyemeyebileceğinden üretim verilerini taşımak için kullanılması önerilmez.

Özet Önerisi

Geliştiriciler, güvenilir bir geçiş için ağ bağlantıları içeren dosyalarla ilgili üçüncü taraf ayrıştırıcıları kullanmaktan kaçınmalı ve bunun yerine veri getirme mantığını Veri Kümeleri API'sini kullanarak yeniden oluşturmalıdır. Bu sayede, bakımı yapılmayan istemci tarafı ayrıştırıcılarına güvenmek yerine verilerinizin Google Haritalar Platformu altyapısında güvenli bir şekilde yönetilmesi sağlanır.

Ekran yer paylaşımlarını göstermek için KML kullanma

KmlLayer'dan veri odaklı stil (DDS) gibi modern alternatiflere geçen geliştiricilerin, veri kümelerinde ekran kaplamalarının desteklenmediğini unutmaması önemlidir. Sabit resimleri, logoları veya lejantları haritanın üzerinde gösterme efektini elde etmek için Maps JavaScript API'yi kullanarak özel kontroller oluşturmanız gerekir.

1. KML Dosyanızda Dikkat Edilmesi Gerekenler

Eşdeğer bir özel kontrol oluşturmak için KML dosyanızdaki <ScreenOverlay> öğesinde aşağıdaki temel özellikleri inceleyin:

  • <Icon>&lt;href>: Göstermek istediğiniz resmin URL'si.
  • <screenXY>: Yer paylaşımının ekranda konumlandırılacağı yeri tanımlar.
    • x=0, y=1 (kesirler), sol üst ile eşleşir.
    • x=1, y=1, Sağ Üst'e karşılık gelir.
    • x=0, y=0, sol alta karşılık gelir.
    • x=1, y=0, sağ alta karşılık gelir.
  • <size>: Yer paylaşımının genişliğini ve yüksekliğini tanımlar.
  • <rotation>: Resmin döndürülüp döndürülmeyeceğini belirtir.

2. Uygulama: Özel Kontrol Oluşturma

Özel Denetim, temelde haritanın önceden tanımlanmış konumlarından birine "iterek" yerleştirdiğiniz standart bir HTML öğesidir (ör. <div> veya <img>).

KML konumlarını ControlPosition ile eşleme

Maps JavaScript API, kontrolleri sabitlemek için ControlPosition enum'ını kullanır. KML'nizi uygun JS API sabitiyle eşlemek için aşağıdaki tabloyu kullanın:<screenXY>

KML Konumu (screenXY) JS API ControlPosition
Sol Üst (x:0, y:1) TOP_LEFT (Eski) veya BLOCK_START_INLINE_START (Mantıksal)
Sağ üst (x:1, y:1) TOP_RIGHT veya BLOCK_START_INLINE_END
Sol alt (x:0, y:0) BOTTOM_LEFT veya BLOCK_END_INLINE_START
Sağ alt (x:1, y:0) BOTTOM_RIGHT veya BLOCK_END_INLINE_END

3. Taşıma örneği: Sabit logo yer paylaşımı

Aşağıdaki örnek, haritanın sağ üst kısmına yerleştirilmiş bir KML ScreenOverlay logosunu taklit eder.

CSS Stili

"Yer paylaşımınızın" boyutunu ve görünümünü tanımlamak için CSS kullanın.

#logo-control {
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  margin: 10px;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

#logo-control img {
  width: 150px; /* Equivalent to KML <size> */
  display: block;
}

JavaScript Uygulaması

Öğeyi map.controls dizisine ekleyin.

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 41.85, lng: -87.65 },
  });

  // 1. Create the container for the overlay
  const logoControlDiv = document.createElement("div");
  logoControlDiv.id = "logo-control";

  // 2. Create the image (KML <Icon>)
  const logoImage = document.createElement("img");
  logoImage.src = "https://example.com/logo.png";
  logoImage.alt = "Company Logo";

  logoControlDiv.appendChild(logoImage);

  // 3. Position the control (KML <screenXY>)
  // In this case, we use TOP_RIGHT
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(logoControlDiv);
}

Daha Fazla Bilgi