Warstwa mapy termicznej

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Wybierz platformę: Android iOS JavaScript
  1. Omówienie
  2. Wczytywanie biblioteki wizualizacji
  3. Dodawanie punktów ważonych danych
  4. Dostosowywanie warstwy mapy termicznej

Warstwa termiczna umożliwia renderowanie map termicznych po stronie klienta.

Opis

Mapa termiczna to wizualizacja używana do określania intensywności danych w punktach geograficznych. Po włączeniu warstwy mapy termicznej na górze mapy pojawi się kolorowa nakładka. Domyślnie obszary o większej intensywności będą kolorowe, a obszary o niższej intensywności będą miały kolor zielony.

Wczytywanie biblioteki wizualizacji

Warstwa mapy termicznej jest częścią biblioteki google.maps.visualization i nie jest domyślnie wczytywana. Klasy wizualizacji to samodzielna biblioteka niezależnie od głównego kodu interfejsu API JavaScript Map Google. Aby korzystać z funkcji zawartych w tej bibliotece, musisz go najpierw załadować za pomocą parametru libraries w adresie URL rozruchu interfejsu API JavaScript Map Google:

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

Dodaj warstwę mapy termicznej

Aby dodać warstwę mapy termicznej, musisz najpierw utworzyć nowy obiekt HeatmapLayer i udostępnić mu niektóre dane geograficzne w postaci tablicy lub obiektu MVCArray[]. Dane mogą być obiektami LatLng lub WeightedLocation. Po utworzeniu obiektu HeatmapLayer dodaj go do mapy, wywołując metodę setMap().

Poniższy przykład dodaje 14 punktów danych do mapy San Francisco.

/* 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);

Dodawanie ważonych punktów danych

Mapa termiczna może renderować obiekty LatLng lub WeightedLocation albo ich kombinację. Oba obiekty reprezentują jeden punkt danych na mapie, ale obiekt WeightedLocation umożliwia dodatkowo określenie wagi dla tego punktu danych. Zastosowanie wagi do punktu danych spowoduje, że token WeightedLocation będzie renderowany z większą intensywnością niż prosty obiekt LatLng. Waga jest liniowa, w której każdy obiekt LatLng ma domyślną wagę 1 – dodanie jednego WeightedLocation z {location: new google.maps.LatLng(37.782, -122.441), weight: 3} przyniesie taki sam efekt jak dodanie google.maps.LatLng(37.782, -122.441) 3 razy. Obiekty weightedLocation i LatLng możesz łączyć w jedną tablicę.

Używanie obiektu WeightedLocation zamiast LatLng może być przydatne, gdy:

  • dodawanie dużych ilości danych w jednym miejscu; Renderowanie 1 obiektu WeightedLocation o wadze 1000 będzie szybsze niż wyrenderowanie 1000 obiektów LatLng.
  • Wyświetlanie danych z wykorzystaniem dowolnych wartości. Możesz na przykład użyć obiektów LatLng do przedstawiania danych o trzęsieniu ziemi, ale warto użyć znacznika WeightedLocation, aby zmierzyć intensywność każdego trzęsienia ziemi w bogatej skali.
/* 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);

Dostosowywanie warstwy mapy termicznej

Możesz dostosować sposób renderowania mapy termicznej, korzystając z tych opcji. Więcej informacji znajdziesz w dokumentacji HeatmapLayerOptions.

  • dissipating: określa, czy mapy cieplne rozkładają się po powiększeniu. Gdy rozkład jest fałszywy, promień wpływu zwiększa się razem z powiększeniem, aby utrwalić intensywność kolorów w danej lokalizacji geograficznej. Wartość domyślna to true.
  • gradient: gradient kolorów mapy termicznej określony jako tablica ciągów kolorów CSS. Wszystkie kolory CSS3, w tym RGBA, są obsługiwane (z wyjątkiem rozszerzonych nazw kolorów i HSL(A).
  • maxIntensity: maksymalna intensywność mapy termicznej. Domyślnie kolory mapy termicznej są skalowane dynamicznie według największej koncentracji punktów na poszczególnych pikselach na mapie. Ta właściwość pozwala określić stały limit. Ustawienie maksymalnej intensywności może być pomocne, gdy zbiór danych zawiera kilka odstawek o niezwykle dużej intensywności.
  • radius: promień wpływu na każdy punkt danych w pikselach.
  • opacity: przezroczystość mapy termicznej, wyrażona jako liczba z zakresu od 0 do 1.

Poniżej znajdziesz niektóre z dostępnych opcji dostosowywania.

Zobacz przykład