لایه نقشه حرارتی

1. بررسی اجمالی
2. کتابخانه تجسم را بارگیری کنید
3. اضافه کردن امتیاز داده های وزنی
4. یک لایه Heatmap را سفارشی کنید

لایه Heatmap رندر سمت مشتری از نقشه های حرارتی را ارائه می دهد.

بررسی اجمالی

نقشه حرارتی تصویرسازی است که برای نشان دادن شدت داده ها در نقاط جغرافیایی استفاده می شود. هنگامی که لایه Heatmap فعال است، یک پوشش رنگی در بالای نقشه ظاهر می شود. به طور پیش فرض، مناطق با شدت بالاتر قرمز رنگ و مناطق با شدت کمتر سبز به نظر می رسند.

کتابخانه تجسم را بارگیری کنید

لایه Heatmap بخشی از کتابخانه google.maps.visualization است و به طور پیش فرض بارگیری نمی شود. کلاس های Visualization یک کتابخانه مستقل و جدا از کد اصلی Maps JavaScript API هستند. برای استفاده از عملکرد موجود در این کتابخانه، ابتدا باید آن را با استفاده از پارامتر libraries در URL بوت استرپ Maps JavaScript API بارگیری کنید:

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

یک لایه Heatmap اضافه کنید

برای افزودن یک لایه Heatmap، ابتدا باید یک شی 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 را در یک آرایه واحد ترکیب کنید.

استفاده از یک شی WeightedLocation به جای LatLng می تواند مفید باشد زمانی که:

• افزودن حجم زیادی از داده ها در یک مکان واحد. رندر کردن یک شی WeightedLocation با وزن 1000 سریعتر از رندر کردن 1000 شی 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);

یک لایه Heatmap را سفارشی کنید

می‌توانید نحوه نمایش نقشه حرارتی خود را با گزینه‌های نقشه حرارتی زیر سفارشی کنید. برای اطلاعات بیشتر به مستندات HeatmapLayerOptions مراجعه کنید.

• dissipating : مشخص می کند که آیا نقشه های حرارتی در زوم از بین می روند یا خیر. هنگامی که پراکندگی نادرست است، شعاع نفوذ با سطح زوم افزایش می‌یابد تا اطمینان حاصل شود که شدت رنگ در هر مکان جغرافیایی خاص حفظ می‌شود. پیش فرض ها به درست است.
• gradient : گرادیان رنگ Heatmap که به عنوان آرایه ای از رشته های رنگی CSS مشخص شده است. همه رنگ‌های CSS3 - از جمله RGBA - پشتیبانی می‌شوند به جز رنگ‌های با نام توسعه‌یافته و مقادیر HSL(A).
• maxIntensity : حداکثر شدت نقشه حرارتی. به‌طور پیش‌فرض، رنگ‌های نقشه حرارتی به‌صورت پویا با توجه به بیشترین غلظت نقاط در هر پیکسل خاص روی نقشه مقیاس‌بندی می‌شوند. این ویژگی به شما امکان می دهد حداکثر ثابتی را تعیین کنید. تنظیم حداکثر شدت زمانی می‌تواند مفید باشد که مجموعه داده‌های شما حاوی چند عدد پرت با شدت غیرمعمول بالا باشد.
• radius : شعاع نفوذ برای هر نقطه داده، بر حسب پیکسل.
• opacity : کدورت نقشه حرارتی که به صورت عددی بین 0 و 1 بیان می شود.

مثال زیر برخی از گزینه های سفارشی سازی موجود را نشان می دهد.

مشاهده نمونه