KML ve GeoRSS Katmanları

KmlLayer, KML ve GeoRSS öğelerini Maps JavaScript API kutusu yer paylaşımı.

Genel Bakış

Maps JavaScript API, KML ve GeoRSS veri biçimlerini destekler coğrafi bilgileri görüntülemek için. Bu veri biçimleri Google Ads'de KmlLayer nesnesi kullanılarak oluşturulan harita. Bu nesnenin oluşturucusu, herkesin erişebileceği bir KML veya GeoRSS dosyası.

Not: Şu durumda olan KmlLayer sınıfı Maps JavaScript API'nin kullandığı KML dosyalarını oluşturmak ve ayrıştırmak için kullanılan, Google tarafından barındırılan bir hizmet. Sonuç olarak, KML dosyalarının görüntülenebilmesi için bu dosyalar yalnızca Erişim için kimlik doğrulaması gerektirmeyen, herkesin erişebileceği bir URL.
.
. Gizli dosyalara erişmeniz, önbellekler üzerinde ayrıntılı kontrol sahibi olmanız gerekiyorsa veya tarayıcı görünümünü sorgu parametresi olarak bir coğrafi veri sunucusuna gönderir. genel veri feed'i katmanları yerine KmlLayer kullanın. Bu işlem, kullanıcılarınızın doğrudan web sunucunuzdan kaynak istemesini sağlar.

Maps JavaScript API, girilen coğrafi konumu XML verilerini, harita üzerinde bir Maps JavaScript API kutusu yer paylaşımı. Bu KML görünüm (ve biraz davranır) bildiğiniz Maps JavaScript API gibi davranır yer paylaşımlı öğelerdir. KML <Placemark> ve GeoRSS point öğeleri işaretçi olarak oluşturulur. Örneğin, <LineString> öğeleri Çoklu çizgi olarak oluşturulur ve <Polygon> öğeleri oluşturulur çokgenler olarak görünüyor. Benzer şekilde, <GroundOverlay> öğeleri harita üzerinde dikdörtgen resimler olarak oluşturulur. Ancak daha da önemlisi, bu nesneler Maps JavaScript API Markers değildir, Polylines, Polygons veya GroundOverlays; bunun yerine, harita üzerinde tek bir nesne halinde oluşturulurlar.

Haritada KmlLayer nesne map kez görünür özelliği ayarlandı. Şu numarayı arayarak bu kişileri haritadan kaldırabilirsiniz: setMap() null geçiyor. KmlLayer nesne, bu alt öğelerin oluşturulmasını otomatik olarak yönetir ve Haritanın belirlenen sınırları için uygun özellikleri alma. sınırlar değiştiğinde, geçerli görüntü alanındaki özellikler otomatik olarak oluşturulur.

KmlLayer içindeki bileşenler istek üzerine oluşturulduğu için bu katman, binlerce işaretçinin oluşturulmasını kolayca yönetmenizi, tek bir çizgi çizin. Bu bileşenlere erişemeyeceğinizi unutmayın ancak bunların her biri, kullanıcılara belirli bir aralıkta veri döndüren devre dışı bırakabilirsiniz.

KML katmanı seçenekleri

KmlLayer() oluşturucusu, isteğe bağlı olarak bir dizi KmlLayerOptions:

• map,Map KmlLayer. Bunu ayarlayarak bir KmlLayer öğesini gizleyebilirsiniz. değerini setMap() yöntemi içinde null olarak ayarlayın.
• preserveViewport, haritanın aşağıdaki durumlarda KmlLayer içeriğinin sınırlarına göre ayarlanır. katman gösteriliyor. Varsayılan olarak, bir KmlLayer görüntülenirken katmanın tamamını gösterecek şekilde yakınlaştırıldığında içerik.
• suppressInfoWindows, KmlLayer, InfoWindow nesne.

Ayrıca, KmlLayer oluşturulduktan sonra, katmanın adını içeren sabit metadata özelliği KmlLayerMetadata nesnesinde açıklama, snippet ve yazar değişmez. Bu bilgileri getMetadata() kullanarak inceleyebilirsiniz yöntemidir. KmlLayer nesnenin oluşturulması, harici bir sunucuya eş zamansız iletişim kurduğunuzda, metadata_changed etkinliğidir. Bu etkinlik, mülkün dolduruldu.

Aşağıdaki örnek, varsayılan değerden bir KmlLayer GeoRSS özet akışı:

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: 49.496675, lng: -102.65625 },
    }
  );

  const georssLayer = new google.maps.KmlLayer({
    url:
      "http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss",
  });
  georssLayer.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: 49.496675, lng: -102.65625 },
  });
  const georssLayer = new google.maps.KmlLayer({
    url: "http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss",
  });

  georssLayer.setMap(map);
}

window.initMap = initMap;
index.js

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

<html>
  <head>
    <title>GeoRSS Layers</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Aşağıdaki örnek, verilen KML'den bir KmlLayer oluşturur özet akışı:

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 41.876, lng: -87.624 },
    }
  );

  const ctaLayer = new google.maps.KmlLayer({
    url: "https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml",
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 41.876, lng: -87.624 },
  });
  const ctaLayer = new google.maps.KmlLayer({
    url: "https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml",
    map: map,
  });
}

window.initMap = initMap;
index.js

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

<html>
  <head>
    <title>KML Layers</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

KML özelliği ayrıntıları

KML çok sayıda özellik içerebileceğinden özellik verilerini doğrudan KmlLayer nesnesinden alır. Bunun yerine ve özellikler görüntülendiğinde, tıklanabilir gibi görünecek şekilde Maps JavaScript API yer paylaşımları. Özellikleri tek tek tıkladığınızda varsayılan olarak KML içeren InfoWindow: <title> ve Belirtilen özellikle ilgili <description> bilgi. Ayrıca, bir KML özelliğine yapılan tıklama bir KmlMouseEvent, ve aşağıdaki bilgileri iletir:

• position, enlem/boylam koordinatlarını Bu KML özelliği için InfoWindow öğesini bağlamak üzere kullanılır. Bu konum genellikle çokgenler, çoklu çizgiler ve GroundOverlays, ancak işaretçilerin doğru kaynağı.
• pixelOffset, yukarıdaki uzaklığı gösterir InfoWindow arasında bağlantı kurmak için position "kuyruk". Poligonal nesnelerde, bu ofset genellikle 0,0, ancak işaretçiler için işaretçinin yüksekliği de dahildir.
• featureData, şunun JSON yapısını içerir: KmlFeatureData.

Aşağıda örnek bir KmlFeatureData nesnesi gösterilmiştir:

{
  author: {
    email: "nobody@google.com",
    name: "Mr Nobody",
    uri: "http://example.com"
  },
  description: "description",
  id: "id",
  infoWindowHtml: "html",
  name: "name",
  snippet: "snippet"
}

Aşağıdaki örnekte <Description> adlı KML özelliği gösterilmektedir özellik tıklandığında kenardaki bir <div> içindeki metin:

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: 37.06, lng: -95.68 },
    }
  );

  const kmlLayer = new google.maps.KmlLayer({
    url: "https://raw.githubusercontent.com/googlearchive/kml-samples/gh-pages/kml/Placemark/placemark.kml",
    suppressInfoWindows: true,
    map: map,
  });

  kmlLayer.addListener("click", (kmlEvent) => {
    const text = kmlEvent.featureData.description;

    showInContentWindow(text);
  });

  function showInContentWindow(text: string) {
    const sidebar = document.getElementById("sidebar") as HTMLElement;

    sidebar.innerHTML = text;
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 37.06, lng: -95.68 },
  });
  const kmlLayer = new google.maps.KmlLayer({
    url: "https://raw.githubusercontent.com/googlearchive/kml-samples/gh-pages/kml/Placemark/placemark.kml",
    suppressInfoWindows: true,
    map: map,
  });

  kmlLayer.addListener("click", (kmlEvent) => {
    const text = kmlEvent.featureData.description;

    showInContentWindow(text);
  });

  function showInContentWindow(text) {
    const sidebar = document.getElementById("sidebar");

    sidebar.innerHTML = text;
  }
}

window.initMap = initMap;
index.js

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  height: 100%;
  display: flex;
}

#sidebar {
  flex-basis: 15rem;
  flex-grow: 1;
  padding: 1rem;
  max-width: 30rem;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
}

#map {
  flex-basis: 0;
  flex-grow: 4;
  height: 100%;
}
style.css

<html>
  <head>
    <title>KML Feature Details</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="container">
      <div id="map"></div>
      <div id="sidebar"></div>
    </div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

KML oluşturma için boyut ve karmaşıklık kısıtlamaları

Maps JavaScript API'nin boyutları ve işlevleri karmaşıklığını ifade eder. Aşağıda mevcut sınırların özeti verilmiştir.

Not: Bu sınırlar herhangi bir zamanda değiştirilebilir. gerekir.

Maksimum getirilen dosya boyutu (ham KML, ham GeoRSS veya sıkıştırılmış KMZ)

3MB

Maksimum sıkıştırılmamış KML dosyası boyutu

10MB

KMZ dosyalarındaki maksimum sıkıştırılmamış resim dosyası boyutu

Dosya başına 500 KB

Maksimum ağ bağlantısı sayısı

10

Doküman genelindeki özelliklerin maksimum sayısı

1.000

KML katmanı sayısı

Eklenebilecek KML katmanlarının sayısı sınırlıdır tek bir Google Haritası’nda gösterilir. Bu sınırı aşarsanız katmanlar haritada görünür ve web tarayıcınızda bir hata bildirilir adresini ziyaret edin. Sınır, aşağıdakilerin bir kombinasyonuna dayanır: oluşturulan KmlLayer sınıfın sayısı ve bu katmanları oluşturmak için kullanılan tüm URL'ler. Her yeni KmlLayer oluşturduğunuz bu katman, katmana ait sınırın bir kısmını kaplar ve sınırın diğer kısımlarından bir kısmını kapsayabilir. KML dosyası şuradan yüklendi. Sonuç olarak, ekleyebileceğiniz katman sayısı uygulamaya göre değişiklik gösterir; ortalama olarak yükleme ile Sınıra ulaşmadan 10 ve 20 katman. Yine de sınıra ulaşırsanız KML URL'lerini kısaltmak için bir URL kısaltıcı kullanmak. Alternatif olarak, şunu içeren tek KML dosyası: NetworkLinks .

Performans ve önbelleğe alma konusunda dikkat edilmesi gereken noktalar

Google'ın sunucuları, sunucular. Bu işlem, KML dosyanıza uygun segmentlerin alanı verimli bir şekilde kullanıcılar haritayı tıklar, kaydırır ve yakınlaştırır.

En iyi performans için şunları yapmanızı öneririz:

• KML'de uygun bir <expires> etiketi kullanın.
  .
  . KmlLayer nasıl karar verirken HTTP üstbilgilerini kullanmaz .
• İstek sırasında dosyaları dinamik olarak oluşturmayın.
  .
  . Bunun yerine, dosyaları ihtiyaç duyulmadan önce oluşturun ve sunun statik olarak. Sunucunuzun KML'yi aktarması uzun sürüyorsa dosyası olmadan, KmlLayer görüntülenmeyebilir.
• Verilerinizin dosyası güncellendi.
  .
  . Önbellekleri her zaman atlamak (örneğin, rastgele bir sayı veya kullanıcının saatini sorgu parametresi olarak değiştirmek) sizin siteniz aniden popülerleşirse sunuculara bulaşmanıza neden olabilir ve siz de bunu büyük KML dosyaları sunuyor.
  .
  . Ayrıca, herhangi bir kullanıcının saat yanlış ve <expires> etiketi emin olun.
  .
  . Bunun yerine, güncellenen statik dosyaları yeni ve özel bir düzeltme numarasıyla yayınlayın. kullanılan URL'yi dinamik olarak güncellemek için sunucu tarafı kodu KmlLayer.
• KML dosyalarınızda yapılacak değişiklikleri dakikada bir kez olacak şekilde sınırlandırın.
  .
  . Tüm dosyaların toplam boyutu (sıkıştırılmamış) 1 MB'tan fazlaysa değişiklikleri şu şekilde sınırlayın: 5 dakikada bir.
• Coğrafi veri sunucusu kullanırken, katmanların görünümünü sınırlandırın.
  .
  . Bunun yerine, harita görünümünü yalnızca bounds_changed etkinliği. Kullanıcılara yalnızca otomatik olarak gösterilebilir.
  .
  . Coğrafi veri sunucunuzda büyük miktarda veri varsa, veri katmanlarını kullanarak .
• Coğrafi veri sunucusu kullanırken birden fazla KmlLayer kullanın izin vermek istediğiniz her bir özellik grubu için .KmlLayer
• Dosya boyutunu küçültmek için sıkıştırılmış KMZ dosyaları kullanın.
• Google Cloud Storage veya başka bir bulut depolama alanı çözümü kullanıyorsanız kaçınırsınız. Erişim denetimlerini zorunlu kılmak için imzalı URL'ler veya geçici jetonlar. Bunlar yanlışlıkla önbelleğe almayı engelleyebilir.
• Tüm noktaların hassasiyetini emin olun.
• Çokgenler gibi benzer özelliklerin geometrisini birleştirip basitleştirme ve çoklu çizgilerden oluşur.
• Kullanılmayan öğeleri veya resim kaynaklarını kaldırın.
• Desteklenmeyen öğeleri kaldırın.

Gizli verilere erişmeniz, önbelleğe almayı önlemeniz veya tarayıcıyı göndermeniz gerekiyorsa sorgu parametresi olarak bir coğrafi veri sunucusuna aktarmak istiyorsanız, veri katmanları yerine KmlLayer. Bu işlem, kullanıcılarınızın doğrudan web sunucunuzdan kaynak isteme.

Desteklenen KML öğeleri

Maps JavaScript API aşağıdaki KML öğelerini destekler. KML ayrıştırıcısı, genellikle, anlamlandıramadığı XML etiketlerini sessiz bir şekilde göz ardı eder.

• Yer İşaretleri
• Simgeler
• Klasörler
• Açıklayıcı HTML: <BalloonStyle> aracılığıyla öğe değiştirme ve &lt;text&gt;
• KMZ (ekli resimler de dahil olmak üzere, sıkıştırılmış KML)
• Çoklu çizgiler ve poligonlar
• Renk, dolgu ve saydamlık da dahil olmak üzere, çoklu çizgiler ve poligonlar için stiller
• Dinamik olarak veri içe aktarmak için ağ bağlantıları
• Yer katmanları ve ekran katmanları

Aşağıdaki tabloda, desteklenen KML öğelerinin tüm ayrıntıları verilmiştir.