हीटमैप लेयर

1. खास जानकारी
2. विज़ुअलाइज़ेशन लाइब्रेरी लोड करना
3. वेटेड डेटा पॉइंट जोड़ें
4. हीटमैप लेयर को पसंद के मुताबिक बनाना

हीटमैप लेयर की मदद से, क्लाइंट साइड पर हीटमैप को रेंडर किया जाता है.

खास जानकारी

हीटमैप एक विज़ुअलाइज़ेशन है, जिसका इस्तेमाल भौगोलिक बिंदु. हीटमैप लेयर के चालू होने पर, एक रंगीन ओवरले मैप पर सबसे ऊपर दिखाई देते हैं. डिफ़ॉल्ट रूप से, ज़्यादा तीव्रता वाले इलाके रंग के होते हैं लाल और कम तीव्रता वाले क्षेत्र हरे रंग में दिखाई देंगे.

विज़ुअलाइज़ेशन लाइब्रेरी लोड करें

हीटमैप लेयर, google.maps.visualization लाइब्रेरी का हिस्सा है, न कि डिफ़ॉल्ट रूप से लोड होता है. विज़ुअलाइज़ेशन क्लास एक सेल्फ़-कंटेन्ड लाइब्रेरी होती हैं, यह मुख्य Maps JavaScript API कोड से अलग होती है. फ़ंक्शन का इस्तेमाल करने के लिए इस लाइब्रेरी में शामिल है, तो आपको पहले इसे libraries का इस्तेमाल करके लोड करना होगा पैरामीटर JavaScript API बूटस्ट्रैप यूआरएल में पैरामीटर है:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=visualization&callback=initMap">
</script>

हीटमैप लेयर जोड़ें

हीटमैप लेयर जोड़ने के लिए, आपको पहले नया HeatmapLayer बनाना होगा और उसे कुछ भौगोलिक डेटा MVCArray[] ऑब्जेक्ट. वह डेटा या तो LatLng ऑब्जेक्ट या WeightedLocation ऑब्जेक्ट है. HeatmapLayer ऑब्जेक्ट को इंस्टैंशिएट करने के बाद, उसे इसमें जोड़ें setMap() तरीके को कॉल करके मैप करें.

नीचे दिए गए उदाहरण में, सैन फ़्रांसिस्को के मैप में 14 डेटा पॉइंट जोड़े गए हैं.

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData
});
heatmap.setMap(map);

वेटेड डेटा पॉइंट जोड़ें

हीटमैप से इनमें से कोई एक LatLng या WeightedLocation ऑब्जेक्ट या दोनों का कॉम्बिनेशन है. दोनों ऑब्जेक्ट एक ही डेटा दिखाते हैं मैप पर पॉइंट कर सकते हैं, लेकिन WeightedLocation ऑब्जेक्ट की मदद से उस डेटा पॉइंट के लिए वज़न तय करें. डेटा पॉइंट पर वेट लागू करने से WeightedLocation को सामान्य LatLng ऑब्जेक्ट. वज़न एक लीनियर स्केल होता है, जिसमें हर LatLng ऑब्जेक्ट का इंप्लिसिट भार 1 है — एक WeightedLocation जोड़ना {location: new google.maps.LatLng(37.782, -122.441), weight: 3} में से google.maps.LatLng(37.782, -122.441) को तीन बार जोड़ने जैसा ही असर होगा. एक अरे में, weightedLocation और LatLng ऑब्जेक्ट को मिक्स किया जा सकता है.

LatLng की जगह WeightedLocation ऑब्जेक्ट का इस्तेमाल करना तब फ़ायदेमंद हो सकता है, जब:

• एक ही जगह पर ज़्यादा डेटा जोड़ना. सिंगल इमेज रेंडर हो रही है 1,000 वज़न वाला WeightedLocation ऑब्जेक्ट इससे ज़्यादा तेज़ होगा 1,000 LatLng ऑब्जेक्ट रेंडर किए जा रहे हैं.
• आर्बिट्रेरी वैल्यू के आधार पर, आपके डेटा पर ज़ोर देना. उदाहरण के लिए, भूकंप का डेटा प्लॉट करते समय, LatLng ऑब्जेक्ट का इस्तेमाल किया जा सकता है. हालांकि, ऐसा भी हो सकता है कि आपको WeightedLocation का इस्तेमाल करके, हर भूकंप की तीव्रता को मापा जा सकता है रिचर स्केल पर एक साथ नज़र आ सकता है.

/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setMap(map);

हीटमैप लेयर को पसंद के मुताबिक बनाना

नीचे दिए गए हीटमैप की मदद से, अपने हीटमैप को रेंडर करने का तरीका अपनी पसंद के मुताबिक बनाया जा सकता है के विकल्प. ज़्यादा जानकारी के लिए, ज़्यादा जानकारी के लिए, HeatmapLayerOptions दस्तावेज़ देखें.

• dissipating: इससे पता चलता है कि ज़ूम करने पर हीटमैप खत्म होते हैं या नहीं. टास्क कब शुरू होगा जब ज़ूम स्तर पर ज़ूम स्तर बढ़ने पर, प्रभाव में वृद्धि होती है, तब उसका प्रसार गलत होता है पक्का करें कि कलर इंटेंसिटी किसी जगह पर सुरक्षित रहे स्थान. डिफ़ॉल्ट तौर पर, यह 'सही' पर सेट होती है.
• gradient: हीटमैप की कलर ग्रेडिएंट, जिसे सीएसएस के कलेक्शन के तौर पर बताया गया है कलर स्ट्रिंग. सभी CSS3 रंग — आरजीबीए के साथ-साथ — एक्सटेंडेड नाम के अलावा, अन्य सभी सुविधाएं काम करती हैं रंग और HSL(A) वैल्यू शामिल हैं.
• maxIntensity: हीटमैप की ज़्यादा से ज़्यादा तीव्रता. डिफ़ॉल्ट रूप से, हीटमैप रंगों की सांद्रता को इस हिसाब से डाइनैमिक तौर पर स्केल किया जाता है कि किसी खास पिक्सल पर मैप करें. इस प्रॉपर्टी की मदद से, ये काम किए जा सकते हैं तय ज़्यादा से ज़्यादा सीमा तय करें. ज़्यादा से ज़्यादा तीव्रता को सेट करने से, इन मामलों में मदद मिल सकती है आपके डेटासेट में असामान्य रूप से ज़्यादा तीव्रता वाले कुछ आउटलायर मौजूद हैं.
• radius: पिक्सल में, हर डेटा पॉइंट के असर की रेडियस.
• opacity: हीटमैप की ओपैसिटी को 0 और 1 के बीच की संख्या से दिखाया जाता है.

नीचे दिए गए उदाहरण में, पसंद के मुताबिक बनाने के कुछ विकल्प दिखाए गए हैं.

उदाहरण देखें