KML और GeoRSS लेयर

KmlLayer, KML और GeoRSS एलिमेंट को Maps JavaScript API का टाइल ओवरले.

खास जानकारी

Maps JavaScript API, KML और GeoRSS डेटा फ़ॉर्मैट के साथ काम करता है का इस्तेमाल किया जा सकता है. ये डेटा फ़ॉर्मैट KmlLayer ऑब्जेक्ट का इस्तेमाल करके मैप, जिसका कंस्ट्रक्टर सार्वजनिक रूप से ऐक्सेस की जा सकने वाली KML या GeoRSS फ़ाइल होनी चाहिए.

ध्यान दें: वह KmlLayer क्लास जो Maps JavaScript API में इस्तेमाल होने वाले KML ओवरले जनरेट करता है रेंडरिंग के लिए KML फ़ाइलों को वापस पाने और पार्स करने के लिए, Google की होस्ट की गई सेवा. इस वजह से, KML फ़ाइलें सिर्फ़ तब दिखती हैं, जब वे यहां होस्ट की जाती हैं सार्वजनिक तौर पर ऐक्सेस किया जा सकने वाला ऐसा यूआरएल जिसे ऐक्सेस करने के लिए, पुष्टि करने की ज़रूरत न हो.
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है अगर आपको निजी फ़ाइलों का ऐक्सेस चाहिए, कैश मेमोरी पर बारीकी से कंट्रोल करना है या ब्राउज़र व्यूपोर्ट को जियोस्पेशियल डेटा सर्वर पर क्वेरी पैरामीटर के रूप में भेजें, तो हमारा सुझाव है कि आप डेटा परतेंKmlLayer के बजाय. इससे आपके उपयोगकर्ताओं को ब्राउज़र को सीधे आपके वेब सर्वर से संसाधनों का अनुरोध करने के लिए कहा जाता है.

Maps JavaScript API, दी गई भौगोलिक जगह की जानकारी को बदलता है एक्सएमएल डेटा को KML प्रज़ेंटेशन में बदल देता है. यह डेटा, Maps JavaScript API का टाइल ओवरले. यह KML दिखता है (और कुछ हद तक काम करता है) जैसे कि Maps JavaScript API ओवरले एलिमेंट शामिल हैं. KML <Placemark> और GeoRSS point एलिमेंट, मार्कर के तौर पर रेंडर किए जाते हैं. उदाहरण के लिए, <LineString> एलिमेंट पॉलीलाइन के तौर पर रेंडर किए जाने और <Polygon> एलिमेंट को रेंडर किया जाता है पॉलीगॉन के तौर पर. इसी तरह, <GroundOverlay> एलिमेंट मैप पर आयताकार इमेज के तौर पर रेंडर की जाती है. हालांकि, अहम बात यह है कि ये चीज़ें Maps JavaScript API Markers नहीं हैं, Polylines, Polygons या GroundOverlays; इसके बजाय, उन्हें मैप पर एक ही ऑब्जेक्ट में रेंडर किया जाता है.

KmlLayer ऑब्जेक्ट, मैप पर map के बाद दिखते हैं प्रॉपर्टी सेट कर दी गई है. आप कॉल करके उन्हें मैप से हटा सकते हैं setMap(), null से आगे निकल रहा है. KmlLayer ऑब्जेक्ट, इन चाइल्ड एलिमेंट की रेंडरिंग को अपने-आप मैनेज करता है. मैप की दी गई सीमाओं के लिए सही सुविधाएँ हासिल करना. जिस तरह सीमाओं में बदलाव होता है, मौजूदा व्यूपोर्ट में सुविधाएं अपने-आप रेंडर किया गया.

KmlLayer में कॉम्पोनेंट, मांग पर रेंडर किए जाते हैं. लेयर की मदद से हज़ारों मार्कर की रेंडरिंग को आसानी से मैनेज किया जा सकता है, और पॉलीगॉन. ध्यान दें कि आपके पास इन कॉम्पोनेंट को ऐक्सेस करने की अनुमति नहीं है ऑब्जेक्ट सीधे तौर पर जुड़े होते हैं. हालांकि, उनमें से हर एक क्लिक इवेंट देता है, जो उन अलग-अलग चीज़ों को.

KML लेयर के विकल्प

KmlLayer() कंस्ट्रक्टर, विकल्प के तौर पर कई KmlLayerOptions:

• map से उस Map के बारे में पता चलता है जिस पर इमेज को रेंडर करना है KmlLayer. इसे सेट करके, KmlLayer को छिपाया जा सकता है setMap() तरीके में null के लिए मान.
• preserveViewport बताता है कि मैप KmlLayer के कॉन्टेंट की सीमाओं के मुताबिक अडजस्ट कर दिया जाता है. ऐसा तब होता है, जब लेयर दिखा रहा है. डिफ़ॉल्ट रूप से, KmlLayer दिखाते समय, लेयर की पूरी लेयर दिखाने के लिए, मैप को ज़ूम किया गया है और पोज़िशन किया गया है कॉन्टेंट.
• suppressInfoWindows से पता चलता है कि इसमें क्लिक की जा सकने वाली सुविधाएं हैं KmlLayer InfoWindow ऑब्जेक्ट.

इसके अलावा, KmlLayer रेंडर होने के बाद, उसमें लेयर के नाम वाली, नहीं बदली जा सकने वाली metadata प्रॉपर्टी, KmlLayerMetadata ऑब्जेक्ट में ब्यौरा, स्निपेट, और लेखक सीधा सवाल. इस जानकारी की जांच करने के लिए, getMetadata() का इस्तेमाल करें तरीका. क्योंकि KmlLayer ऑब्जेक्ट को रेंडर करने के लिए, किसी बाहरी सर्वर के साथ एसिंक्रोनस कम्यूनिकेशन है, जिसे आप सुनना चाहते हैं metadata_changed इवेंट से पता चलेगा कि प्रॉपर्टी बना दिया गया है.

इस उदाहरण में दिए गए उदाहरण से, एक KmlLayer बनाया गया है 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

इस उदाहरण में, दिए गए KML से एक KmlLayer बनाया गया है फ़ीड:

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 सुविधा के बारे में जानकारी

KML में कई सुविधाएं हो सकती हैं. इसलिए, हो सकता है कि आप सुविधा डेटा को सीधे KmlLayer ऑब्जेक्ट से लिया गया है. इसके बजाय, जैसे सुविधाओं को दिखाया जाता है और वे क्लिक किए जा सकने के लिए रेंडर किए जाते हैं Maps JavaScript API ओवरले. डिफ़ॉल्ट रूप से, अलग-अलग सुविधाओं पर क्लिक करने पर InfoWindow में KML <title> और <description> दी गई सुविधा के बारे में जानकारी. इसके अलावा, KML सुविधा पर क्लिक करने से KmlMouseEvent जनरेट होता है, जो यह जानकारी देती है:

• position यहां अक्षांश/देशांतर निर्देशांक दिखाता है इस KML सुविधा के लिए InfoWindow को ऐंकर करता है. यह आम तौर पर, पॉलीगॉन, पॉलीलाइन, और GroundOverlays, लेकिन मार्कर का सही ऑरिजिन.
• pixelOffset ऊपर दिए गए ऑफ़सेट के बारे में बताता है InfoWindow को ऐंकर करने के लिए position “टेल.” पॉलीगॉन ऑब्जेक्ट के लिए, यह ऑफ़सेट आम तौर पर 0,0 लेकिन मार्कर के लिए मार्कर की ऊंचाई शामिल होती है.
• featureData में JSON स्ट्रक्चर मौजूद है KmlFeatureData.

KmlFeatureData ऑब्जेक्ट का सैंपल नीचे दिखाया गया है:

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

नीचे दिए गए उदाहरण में, KML सुविधा <Description> को दिखाया गया है सुविधा के क्लिक होने पर <div> के किनारों पर दिया गया टेक्स्ट:

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 रेंडरिंग के लिए साइज़ और जटिलता से जुड़ी पाबंदियां

Maps JavaScript API की साइज़ और लोड की गई KML फ़ाइलों की जटिलता. मौजूदा सीमाओं की खास जानकारी नीचे दी गई है.

ध्यान दें: इन सीमाओं को किसी भी समय बदला जा सकता है समय.

प्राप्त अधिकतम फ़ाइल आकार (सामान्य KML, सामान्य GeoRSS, या संपीडित KMZ)

3 एमबी

अधिकतम असंपीडित KML फ़ाइल आकार

10 एमबी

KMZ फ़ाइलों में अधिकतम असंपीडित चित्र फ़ाइल आकार

हर फ़ाइल के लिए 500 केबी

नेटवर्क लिंक की ज़्यादा से ज़्यादा संख्या

10

पूरे दस्तावेज़ में अधिकतम विशेषताओं की संख्या

1,000

KML लेयर की संख्या

KML लेयर की संख्या केवल एक Google मैप पर प्रदर्शित होता है. यदि आप इस सीमा को पार कर जाते हैं, तो आपका कोई भी मैप पर लेयर दिखेंगी और आपके वेब वर्शन में किसी गड़बड़ी की सूचना दी जाएगी का JavaScript कंसोल है. यह सीमा इन चीज़ों पर आधारित है बनाई गई KmlLayer क्लास की संख्या और कुल उन लेयर को बनाने के लिए इस्तेमाल किए गए सभी यूआरएल. हर नए KmlLayer आप जो बनाते हैं, वह लेयर की सीमा का एक हिस्सा लेगा और URL की लंबाई के आधार पर सीमा का अतिरिक्त हिस्सा दे दिया जाता है, जहां KML फ़ाइल से लोड की गई थी. इस वजह से, जोड़ी जा सकने वाली लेयर की संख्या ऐप्लिकेशन के हिसाब से अलग-अलग होगा; औसतन, आपके पास दो औसत विकल्प 10 और 20 लेयर पर फ़िल्टर करें, लेकिन हर लेयर की ज़रूरत नहीं. अगर आपने अब भी सीमा पूरी कर ली है, KML यूआरएल को छोटा करने के लिए यूआरएल संक्षेपक का इस्तेमाल करना चाहिए. वैकल्पिक रूप से, एक KML फ़ाइल जिसमें यह शामिल है NetworkLinks अलग-अलग KML यूआरएल में बदल सकता है.

परफ़ॉर्मेंस और कैश मेमोरी से जुड़ी ज़रूरी बातें

Google के सर्वर, KML फ़ाइलों को कुछ समय के लिए कैश मेमोरी में सेव करेंगे, ताकि फ़ाइलों का लोड कम हो सके सर्वर. इससे आपके उपयोगकर्ताओं को बेहतर परफ़ॉर्मेंस मिलेगी. इसके लिए, आपकी KML फ़ाइल के सही सेगमेंट को स्पेस के हिसाब से कम करके दिखाता है, जैसा कि उपयोगकर्ता मैप पर क्लिक करते हैं, उसे पैन करते हैं, और ज़ूम करते हैं.

सबसे अच्छी परफ़ॉर्मेंस के लिए, हमारा सुझाव है कि आप:

• KML में सही <expires> टैग का इस्तेमाल करें.
  अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है KmlLayer यह तय करते समय एचटीटीपी हेडर का इस्तेमाल नहीं करेगा कि कैसे का इस्तेमाल करें.
• अनुरोध के समय, डाइनैमिक रूप से फ़ाइलें जनरेट न करें.
  अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है इसके बजाय, ज़रूरत पड़ने से पहले फ़ाइलें जनरेट करें और उन्हें इस्तेमाल करें स्टैटिक तरीके से. अगर आपके सर्वर को KML ट्रांसमिट करने में ज़्यादा समय लगता है फ़ाइल अपलोड करते समय, हो सकता है कि KmlLayer न दिखे.
• कैश मेमोरी को बायपास करने की कोशिश न करें, जब तक कि आपको पक्के तौर पर यह न पता हो कि आपके फ़ाइल अपडेट की गई.
  अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है हमेशा कैशे को बायपास करें (उदाहरण के लिए, कोई रैंडम संख्या या उपयोगकर्ता की घड़ी का समय क्वेरी पैरामीटर के रूप में) के कारण आसानी से आपका हो सकता है कि आपकी साइट अचानक लोकप्रिय हो जाए, और आप बड़ी KML फ़ाइलें पेश की जा रही हैं.
  अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है इसके कारण कैशे उपयोगकर्ताओं को पुराना डेटा दिखा सकता है, यदि किसी उपयोगकर्ता का घड़ी गलत है और <expires> टैग को सही तरीके से सेट करें.
  अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है इसके बजाय, अपडेट की गई स्टैटिक फ़ाइलों को एक नए, अलग रिविज़न नंबर के साथ पब्लिश करें, और इस पर पास किए गए URL को डायनामिक रूप से अपडेट करने के लिए सर्वर-साइड कोड का उपयोग करें मौजूदा वर्शन वाला KmlLayer.
• अपनी KML फ़ाइलों में किए जाने वाले बदलावों को, एक मिनट में सिर्फ़ एक बार तक सीमित रखें.
  अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है अगर सभी फ़ाइलों का साइज़ एक एमबी से ज़्यादा (बिना कंप्रेस की गई) है, तो बदलावों को इतना सीमित करें 5 मिनट में एक बार.
• जियोस्पेशियल डेटा सर्वर का इस्तेमाल करते समय, क्वेरी पैरामीटर का इस्तेमाल लेयर के व्यूपोर्ट को सीमित करता है.
  अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है इसके बजाय, आप मैप व्यूपोर्ट को bounds_changed इवेंट. उपयोगकर्ताओं को सिर्फ़ ऐसी सुविधाएं भेजी जाएंगी जो अपने-आप दिखाया जा सकता है.
  अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है अगर आपके जियोस्पेशियल डेटा सर्वर में काफ़ी डेटा है, तो डेटा लेयर का इस्तेमाल करके आज़माएं.
• जियोस्पेशल डेटा सर्वर का इस्तेमाल करते समय एक से ज़्यादा KmlLayer का इस्तेमाल करें के लिए टॉगल करने की सुविधा के बजाय की तुलना करें.KmlLayer
• फ़ाइल का साइज़ कम करने के लिए, कंप्रेस की गई KMZ फ़ाइलों का इस्तेमाल करें.
• अगर Google Cloud Storage या किसी दूसरे क्लाउड स्टोरेज का इस्तेमाल किया जा रहा है, तो जैसी सुविधाओं का इस्तेमाल करने से बचना होगा ऐक्सेस कंट्रोल लागू करने के लिए साइन किए गए यूआरएल या अस्थायी टोकन. ये काम कर सकते हैं अनजाने में कैश मेमोरी में सेव होने से रोकता है.
• सभी बिंदुओं की शुद्धता को कम करें कोई सटीक हो.
• पॉलीगॉन जैसी समान सुविधाओं की ज्यामिति को मर्ज करें और आसान बनाएं और पॉलीलाइन.
• इस्तेमाल न किए गए एलिमेंट या इमेज रिसॉर्स हटाएं.
• इस्तेमाल न किए जा सकने वाले एलिमेंट हटाएं.

अगर आपको निजी डेटा ऐक्सेस करना है, कैश मेमोरी में सेव होने से रोकना है या ब्राउज़र को भेजना है, तो व्यूपोर्ट को क्वेरी पैरामीटर के रूप में जियोस्पेशियल डेटा सर्वर से जोड़ना चाहिए, तो हमारा सुझाव है कि आप डेटा लेयर के बजाय KmlLayer. इससे आपके उपयोगकर्ताओं को ब्राउज़र को सीधे अपने वेब सर्वर से संसाधनों का अनुरोध करें.

इस्तेमाल किए जा सकने वाले KML एलिमेंट

Maps JavaScript API, नीचे दिए गए KML एलिमेंट के साथ काम करता है. सामान्य रूप से, समझ नहीं आने पर KML पार्सर, XML टैग को चुपचाप अनदेखा करता है.

• प्लेसमार्क
• आइकन
• फ़ोल्डर
• जानकारी देने वाला एचटीएमएल—<BalloonStyle>> के ज़रिए इकाई को बदलना और &lt;text&gt;
• KMZ (संलग्न चित्र सहित संपीडित KML)
• बहुरेखा तथा बहुभुज
• रंग, भराव तथा अपारदर्शिता सहित बहुरेखाओं व बहुभुजों के लिए शैलियां
• डेटा को डायनॉमिक तरीके से आयात करने के लिए नेटवर्क लिंक
• ग्राउंड ओवरले तथा स्क्रीन ओवरले

यहां दी गई टेबल में, इस्तेमाल किए जा सकने वाले KML एलिमेंट की पूरी जानकारी दी गई है.