Warstwy KML i GeoRSS

KmlLayer renderuje elementy KML i GeoRSS na Nakładka kafelka Maps JavaScript API.

Omówienie

Interfejs Maps JavaScript API obsługuje formaty danych KML i GeoRSS do wyświetlania informacji geograficznych. Te formaty danych są wyświetlane na za pomocą obiektu KmlLayer, którego konstruktor pobiera adres URL publicznie dostępny plik KML lub GeoRSS.

Uwaga: klasa KmlLayer, w której generuje nakładki KML w interfejsie Maps JavaScript API, hostowana przez Google usługa do pobierania i analizowania plików KML na potrzeby renderowania. Dlatego można wyświetlać pliki KML tylko wtedy, gdy są przechowywane w publicznie dostępny adres URL, który nie wymaga uwierzytelniania dostępu.

Jeśli potrzebujesz dostępu do plików prywatnych, szczegółowej kontroli nad pamięciami podręcznymi lub wysyła widoczny obszar przeglądarki do serwera danych geoprzestrzennych jako parametr zapytania, zalecamy korzystanie z danych warstwy zamiast KmlLayer. Spowoduje to kierowanie użytkowników bezpośrednio do serwera WWW, aby przeglądarka wysyłała żądania zasobów.

Maps JavaScript API konwertuje podane dane geograficzne XML w postaci reprezentacji KML wyświetlanej na mapie przy użyciu Nakładka kafelka Maps JavaScript API. Ten plik KML wygląda (i w pewnym stopniu działa) jak znajomy Maps JavaScript API. elementów nakładanych. Plik KML <Placemark> i GeoRSS point elementy są renderowane jako znaczniki. Na przykład elementy <LineString> są renderowane. renderowane jako linie łamane, a elementy <Polygon> są renderowane w postaci wielokątów. Podobnie elementy <GroundOverlay> są: renderowanych jako prostokątne obrazy na mapie. Co ważne, te obiekty nie Maps JavaScript API Markers, Polylines, Polygons lub GroundOverlays; ale są renderowane w jeden obiekt na mapie.

KmlLayer obiektów pojawi się na mapie, gdy ich map została skonfigurowana. Możesz usunąć ich z mapy, dzwoniąc pod setMap() powyżej null. KmlLayer zarządza renderowaniem tych elementów podrzędnych automatycznie, pobieranie odpowiednich cech dla określonych granic mapy. Jako gdy granice zmieniają się, obiekty w bieżącym widoku są automatycznie wyrenderowano.

Komponenty w elemencie KmlLayer są renderowane na żądanie, warstwa pozwala na łatwe zarządzanie renderowaniem tysięcy znaczników, linie łamane i wielokąty. Pamiętaj, że nie masz dostępu do tych elementów składowych bezpośrednio, ale każdy z nich zapewnia zdarzenia kliknięcia, które zwracają dane tych pojedynczych obiektów.

Opcje warstwy KML

Konstruktor KmlLayer() opcjonalnie przekazuje pewną liczbę funkcji KmlLayerOptions:

• map określa obiekt (Map), na którym ma zostać wyrenderowana KmlLayer Możesz ukryć element KmlLayer, ustawiając tę opcję do null w metodzie setMap().
• preserveViewport określa, że mapa nie powinna być dostosowane do granic zawartości KmlLayer, gdy i pokazać warstwę. Domyślnie podczas wyświetlania parametru KmlLayer mapa jest powiększona i pozycjonowana tak, by pokazać cały obszar warstwy, treści.
• suppressInfoWindows oznacza, że klikalne obiekty w obrębie KmlLayer nie powinien wywoływać wyświetlania InfoWindow obiektów.

Dodatkowo po wyrenderowaniu KmlLayer zawiera on tag stałą właściwość metadata zawierającą nazwę warstwy, opis, fragment i autor w obiekcie KmlLayerMetadata dosłowne. Możesz sprawdzić te informacje za pomocą getMetadata() . Ponieważ renderowanie obiektów KmlLayer wymaga komunikacji asynchronicznej z serwerem zewnętrznym, warto nasłuchiwać zdarzenie metadata_changed, które wskazuje, że właściwość zostało wypełnione.

Ten przykład tworzy obiekt KmlLayer na podstawie podanych Kanał GeoRSS:

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

Poniższy przykład tworzy obiekt KmlLayer na podstawie podanego pliku KML. kanał:

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

Szczegóły funkcji KML

Ponieważ KML może zawierać dużą liczbę obiektów, możesz nie mieć dostępu do danych cech bezpośrednio z obiektu KmlLayer. Zamiast tego, jak funkcje są wyświetlane i renderowane tak, aby wyglądały jak klikalne. Nakładki w Maps JavaScript API. Domyślnie kliknięcie poszczególnych funkcji powoduje wyświetlenie InfoWindow zawierający plik KML <title> i <description> informacje o danej cechy. Dodatkowo kliknięcie obiektu KML powoduje wygenerowanie KmlMouseEvent, który przekazuje następujące informacje:

• position wskazuje szerokość i długość geograficzną na który będzie zakotwiczony InfoWindow dla tej funkcji KML. Ten jest zwykle klikniętą lokalizacją dla wielokątów, linii łamanych GroundOverlays, ale prawdziwe źródło znaczników.
• pixelOffset wskazuje przesunięcie od powyższej wartości position, aby zakotwiczyć InfoWindow. „tail”. W przypadku obiektów wielokątnych to przesunięcie jest zwykle 0,0, ale w przypadku znaczników zawiera wysokość znacznika.
• featureData zawiera strukturę JSON: KmlFeatureData

Przykładowy obiekt KmlFeatureData jest widoczny poniżej:

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

Poniższy przykład pokazuje funkcję KML <Description> tekst na boku <div> po kliknięciu funkcji:

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

Ograniczenia dotyczące rozmiaru i złożoności renderowania KML

Interfejs Maps JavaScript API ma ograniczenia dotyczące rozmiaru złożoności wczytywanych plików KML. Poniżej znajduje się podsumowanie obecnych limitów.

Uwaga: te limity mogą ulec zmianie w dowolnym momencie obecnie się znajdujesz.

Maksymalny rozmiar pobieranego pliku (nieprzetworzone dane KML, nieprzetworzone dane GeoRSS lub skompresowane dane KMZ)

3MB

Maksymalny rozmiar nieskompresowanego pliku KML

10MB

Maksymalny rozmiar nieskompresowanego pliku graficznego w plikach KMZ

500 KB na plik

Maksymalna liczba linków sieciowych

10

Maksymalna łączna liczba funkcji obejmujących cały dokument

1000

Liczba warstw KML

Liczba warstw KML, które można dodać, jest ograniczona wyświetlane na pojedynczej Mapie Google. Jeśli przekroczysz ten limit, żadne warstwy pojawią się na mapie, a w Twojej sieci zostanie zgłoszony błąd w konsoli JavaScript przeglądarki. Limit zależy od kombinacji liczbę utworzonych zajęć: KmlLayer i łączną długość zajęć wszystkich adresów URL użytych do utworzenia tych warstw. Co nowe KmlLayer będą zajmować część limitu dla warstwy, dalszej części limitu w zależności od długości adresu URL, w którym Z którego wczytano plik KML. Dlatego też liczba warstw, które można dodać, zależy od aplikacji; szybkość ładowania powinna wynosić średnio 10 lub 20 warstw bez limitu. Jeśli nadal osiągniesz limit, użyj narzędzia do skracania adresów URL w pliku KML. Możesz też utworzyć pojedynczy plik KML zawierający NetworkLinks do poszczególnych adresów URL KML.

Uwagi na temat wydajności i buforowania

Serwery Google tymczasowo przechowują pliki KML w pamięci podręcznej, aby zmniejszyć obciążenie serwerów. Zwiększy to także skuteczność użytkowników, ponieważ będzie wyświetlać aby zmieścić w jednym miejscu odpowiednie segmenty z pliku KML, użytkownik może ją kliknąć, przesunąć i powiększyć widok.

Aby uzyskać najlepszą skuteczność, zalecamy:

• Użyj odpowiedniego tagu <expires> w pliku KML.
  
  KmlLayer nie będzie używać nagłówków HTTP podczas określania sposobu do buforowania plików KML.
• Nie generuj plików dynamicznie w czasie żądania.
  
  Zamiast tego wygeneruj pliki, zanim będą potrzebne, i je udostępniaj statycznie. Jeśli transmisja pliku KML trwa zbyt długo serwer KmlLayer może się nie wyświetlić.
• Nie próbuj omijać pamięci podręcznych, jeśli nie masz pewności, że .
  
  Zawsze pomijanie pamięci podręcznych (na przykład przez dodanie liczby losowej lub użytkownika jako parametr zapytania) może łatwo spowodować zmianę może zostać przeciążony, jeśli witryna nagle zyska popularność. obsługujące duże pliki KML.
  
  Może też powodować wyświetlanie w pamięci podręcznej nieaktualnych danych użytkownikom, jeśli zegar jest nieprawidłowy, a tag <expires> nie został być ustawione prawidłowo.
  
  Zamiast tego publikuj zaktualizowane pliki statyczne z nowym, osobnym numerem wersji, i użyj kodu po stronie serwera, by dynamicznie aktualizować URL przekazywany do KmlLayer w bieżącej wersji.
• Ogranicz zmiany w plikach KML do raz na minutę.
  
  Jeśli łącznie wszystkie pliki mają więcej niż 1 MB (po zdekompresowaniu), ogranicz zmiany do raz na 5 minut.
• Jeśli korzystasz z serwera danych geoprzestrzennych, unikaj używania parametrów zapytania, aby: ograniczyć widoczny obszar warstw.
  
  Zamiast tego możesz ograniczyć widoczny obszar mapy za pomocą funkcji bounds_changed. Użytkownicy będą otrzymywać tylko te funkcje, które: mogą być wyświetlane automatycznie.
  
  Jeśli na serwerze danych geoprzestrzennych jest dużo danych, za pomocą warstw danych, .
• Gdy korzystasz z serwera danych geoprzestrzennych, używaj wielu elementów KmlLayer. dla każdej grupy funkcji, na którą chcesz zezwolić użytkownikom, niż pojedynczy obiekt KmlLayer z innymi parametrami zapytania.
• Użyj skompresowanych plików KMZ, aby zmniejszyć ich rozmiar.
• Jeśli korzystasz z Google Cloud Storage lub innego rozwiązania do przechowywania danych w chmurze, unikaj korzystania z takich funkcji jak Podpisane adresy URL lub tokeny tymczasowe pozwalające wymuszać kontrolę dostępu. Mogą one niecelowo zapobiegać zapisywaniu w pamięci podręcznej.
• Zmniejsz precyzję wszystkich punktów do odpowiednią precyzję.
• scalać i upraszczać geometrię podobnych obiektów, takich jak wielokąty; i linii łamanych.
• Usuń wszystkie nieużywane elementy lub zasoby obrazu.
• Usuń wszystkie nieobsługiwane elementy.

Jeśli chcesz uzyskać dostęp do prywatnych danych, zapobiec buforowaniu lub wysłać przeglądarkę do serwera danych geoprzestrzennych jako parametr zapytania, zalecamy użycie warstwy danych zamiast KmlLayer Spowoduje to kierowanie użytkowników bezpośrednio żądania zasobów z Twojego serwera WWW.

Obsługiwane elementy KML

Interfejs Maps JavaScript API obsługuje następujące elementy KML. Parser plików KML ignoruje bez powiadamiania tagi XML, których nie rozpoznaje.

• Oznaczenia miejsc
• Ikony
• Foldery
• Opisowy kod HTML – zastępowanie encji przy użyciu reguły <BalloonStyle> oraz &lt;text&gt;
• pliki KMZ (skompresowane pliki KML, w tym również dołączone zdjęcia)
• linie łamane i wielokąty
• style linii łamanych i wielokątów, w tym kolor, wypełnienie i przezroczystość
• linki sieciowe do dynamicznego importowania danych
• warstwy nad powierzchnią oraz warstwy ekranu

Tabela poniżej zawiera szczegółowe informacje na temat obsługiwanych elementów KML.