Warstwa mapy termicznej

Wybierz platformę: Android iOS JavaScript
  1. Omówienie
  2. Wczytywanie biblioteki wizualizacji
  3. Dodawanie ważonych punktów danych
  4. Dostosowywanie warstwy mapy termicznej

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

Opis

Mapa termiczna to wizualizacja służąca do przedstawienia intensywności danych w punktach geograficznych. Gdy warstwa mapy termicznej jest włączona, na górze mapy pojawia się kolorowa nakładka. Domyślnie obszary o większej intensywności są oznaczone kolorem czerwonym, a mniejsze – zielonym.

Wczytaj bibliotekę wizualizacji

Warstwa mapy termicznej jest częścią biblioteki google.maps.visualization i nie jest domyślnie wczytywana. Klasy wizualizacji to biblioteka niezależna od głównego kodu interfejsu Maps JavaScript API. Aby korzystać z funkcji znajdujących się w tej bibliotece, musisz ją najpierw wczytać za pomocą parametru libraries w adresie URL wczytywania interfejsu Maps JavaScript API:

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

Dodaj warstwę mapy termicznej

Aby dodać warstwę mapy termicznej, musisz najpierw utworzyć nowy obiekt HeatmapLayer i udostępnić mu dane geograficzne w postaci tablicy lub obiektu MVCArray[]. Dane mogą mieć formę LatLng lub WeightedLocation. Po utworzeniu wystąpienia 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);

Dodaj ważone punkty danych

Mapa termiczna może renderować obiekty LatLng i WeightedLocation albo ich kombinację. Oba obiekty reprezentują jeden punkt danych na mapie, a obiekt WeightedLocation umożliwia dodatkowo określenie wagi tego punktu danych. Zastosowanie wagi do punktu danych spowoduje, że WeightedLocation będzie renderowany z większą intensywnością niż prosty obiekt LatLng. Waga jest skalą liniową, w której każdy obiekt LatLng ma domyślną wagę 1. Dodanie pojedynczego obiektu WeightedLocation o wartości {location: new google.maps.LatLng(37.782, -122.441), weight: 3} będzie miało taki sam efekt jak dodanie google.maps.LatLng(37.782, -122.441) 3 razy. Możesz mieszać obiekty weightedLocation i LatLng w jednej tablicy.

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

  • Dodawanie dużych ilości danych do jednej lokalizacji. Renderowanie pojedynczego obiektu WeightedLocation o wadze 1000 będzie szybsze niż 1000 obiektów LatLng.
  • Ukierunkowanie na dane na podstawie dowolnych wartości. Na przykład do nanoszenia danych o trzęsieniach ziemi możesz używać obiektów LatLng, ale możesz używać WeightedLocation, aby mierzyć siłę każdego trzęsienia ziemi w większej 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

Za pomocą poniższych opcji mapy termicznej możesz dostosować sposób renderowania mapy termicznej. Więcej informacji znajdziesz w dokumentacji HeatmapLayerOptions.

  • dissipating: określa, czy mapy termiczne rozpraszają się przy powiększeniu. Jeśli rozproszenie ma wartość fałszywą, promień oddziaływania zwiększa się wraz z powiększeniem, aby zachować intensywność kolorów w danej lokalizacji geograficznej. Wartość domyślna to true (prawda).
  • gradient: gradient kolorów mapy termicznej, określony jako tablica ciągów kolorów CSS. Obsługiwane są wszystkie kolory CSS3 – w tym RGBA – z wyjątkiem rozszerzonych kolorów nazwanych i wartości HSL(A).
  • maxIntensity: maksymalna intensywność mapy termicznej. Domyślnie kolory mapy termicznej są skalowane dynamicznie zgodnie z największą koncentracją punktów w konkretnym pikselu na mapie. Ta właściwość umożliwia określenie stałej wartości maksymalnej. Ustawienie maksymalnej intensywności może być przydatne, gdy zbiór danych zawiera kilka wyników odstających o nietypowo dużej intensywności.
  • radius: promień oddziaływania dla każdego punktu danych podany w pikselach.
  • opacity: nieprzezroczystość mapy termicznej, wyrażona jako liczba z zakresu od 0 do 1.

W przykładzie poniżej widać niektóre dostępne opcje dostosowywania.

Zobacz przykład