Warstwa mapy termicznej

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

Warstwa mapy termicznej umożliwia renderowanie map termicznych po stronie klienta.

Omówienie

Mapa termiczna to wizualizacja używana do przedstawiania intensywności danych w punkty geograficzne. Gdy włączona jest warstwa Mapa termiczna, kolorowa nakładka wyświetlają się na górze mapy. Domyślnie obszary o większej intensywności będą pokolorowane czerwony, a obszary o niższej intensywności – zielone.

Wczytaj bibliotekę wizualizacji

Warstwa Mapa termiczna jest częścią biblioteki google.maps.visualization i nie jest ładowanego domyślnie. Klasy wizualizacji są samodzielną biblioteką, niezależnie od głównego kodu Maps JavaScript API. Aby korzystać z funkcji zawarte w tej bibliotece, musisz najpierw wczytać ją za pomocą funkcji 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>

Dodawanie warstwy mapy termicznej

Aby dodać warstwę mapy termicznej, musisz najpierw utworzyć nowy obiekt HeatmapLayer i podaj mu pewne dane geograficzne w postaci tablicy MVCArray[] obiekt. Dane te mogą być LatLng lub WeightedLocation obiektu. Po utworzeniu instancji obiektu HeatmapLayer dodaj go do używając metody setMap().

W przykładzie poniżej dodano 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ć: LatLng lub WeightedLocation obiektów lub kombinacji tych 2 elementów. Oba obiekty reprezentują te same dane. na mapie, ale obiekt WeightedLocation pozwala dodatkowo określ wagę tego punktu danych. Zastosowanie wagi do punktu danych spowoduje powodują, że elementy WeightedLocation są renderowane z większą intensywnością niż prosty obiekt LatLng. Waga jest skalą liniową, w której każde LatLng obiekt ma domniemaną wagę równą 1 – przez dodanie pojedynczego WeightedLocation z {location: new google.maps.LatLng(37.782, -122.441), weight: 3} będzie mieć taki sam efekt jak 3-krotne dodanie elementu google.maps.LatLng(37.782, -122.441). 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 w jednej lokalizacji Renderowanie jednego WeightedLocation obiekt o wadze 1000 będzie szybszy niż 1000 obiektów LatLng.
  • Podkreślenie danych na podstawie dowolnych wartości. Przykład: możesz użyć obiektów LatLng do wykresu danych o trzęsieniach ziemi, ale być może aby użyć funkcji WeightedLocation do pomiaru siły każdego trzęsienia ziemi jest bardziej bogata.
/* 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 za pomocą tej mapy termicznej . Zobacz HeatmapLayerOptions.

  • dissipating: określa, czy mapy termiczne rozpraszają się przy powiększeniu. Kiedy ma wartość fałsz, promień wpływu zwiększa się wraz z poziomem powiększenia Zadbanie o to, aby intensywność kolorów została zachowana na każdym obszarze geograficznym lokalizacji. Domyślna wartość to prawda.
  • gradient: gradient koloru mapy termicznej określony jako tablica CSS. ciągi kolorów. Wszystkie kolory CSS3 — w tym RGBA — są obsługiwane z wyjątkiem rozszerzeń o nazwie kolorów i wartości HSL(A).
  • maxIntensity: maksymalna intensywność mapy termicznej. Domyślnie mapa termiczna kolorów są dynamicznie skalowane zgodnie z największym stężeniem na dowolny piksel na mapie. Ta usługa umożliwia: określić stałą maksymalną wartość. Ustawienie maksymalnej intensywności może być pomocne, Twój zbiór danych zawiera kilka wartości odstających o nietypowo wysokiej intensywności.
  • radius: promień oddziaływania każdego punktu danych w pikselach.
  • opacity: przezroczystość mapy termicznej wyrażona jako liczba z zakresu od 0 do 1.

Przykład poniżej pokazuje niektóre dostępne opcje dostosowywania.

Zobacz przykład